reactjs - 存储会话密钥的标准

Question

在对该主题进行了一些研究之后，似乎会话密钥通常被存储为 cookie，这很好，因为它们会自动添加到请求中。不过，由于限制较少，我一直看到开发人员更喜欢本地存储而不是 cookie。我正在构建一个 React 前端，因此在本地存储中持久化一个减速器并在该减速器中管理会话密钥将非常容易。我需要将此附加到请求中，这似乎是唯一的缺点。想知道是否有一个标准来说明如何做到这一点。先感谢您！

标签： reactjsauthenticationsessioncookieslocal-storage

Answer 1

您可以在浏览器中存储密钥的地方只有几个：

1. 会话存储/本地存储
2. 饼干
3. 网络工作者
4. 在记忆中

饼干

只要 Cookie 具有正确的配置/属性，Cookie 就是放置敏感密钥的最佳位置之一。这包括 , , ,httpOnly并secure确保它们在合理的时间内过期。更多阅读here了解如何正确设置这些属性。SameSiteDomain

Cookie 非常好用，因为它们与 HTTPS 一样安全，并且无法通过 javascript 访问（如果设置了正确的属性，即 httpOnly）。但请注意，您仍然需要注意诸如 CSRF 攻击之类的漏洞，并且您必须包含一个 CSRF 令牌来应对此漏洞，因为 cookie 会由浏览器自动添加到标头中。

本地存储/会话存储

LocalStorage 和会话存储是保存密钥的糟糕地方，因为它们可以通过 javascript 访问。您可以在此处查看 Auth0 建议如何存储密钥，并注意出于上述原因，他们劝说不要将其存储在 localStorage 中。

在记忆中

您可以将密钥存储在 javascript 内存中（使用闭包来封装您的密钥）。这有一个缺点，因为在刷新/关闭/新标签等之后密钥不会保留，但仍然非常安全

网络工作者

Web Workers是另一个可以存储密钥的地方。Worker 与应用程序的其余部分在一个单独的全局范围内运行，因此它使它们非常安全，并且您可以对将其密钥发送到哪些 api 进行精细控制。

Auth 可能很棘手，而且很容易忘记包含一些重要的内容，因此请确保您充分了解所有属性以及每个部分的工作原理。或者使用 Auth0 或单唱等预制选项。