reactjs - 在react.js中哪里存储访问 token ？

Question

我正在 Reactjs 中构建一个应用程序。验证 access_token 后，我必须进行 fetch 调用。注册时，access_token 是从后端服务器获取的。但是，这些access_token存放在哪里。有什么方法可以使这些 access_token 全局化，以便所有组件都可以访问它。我使用过本地存储、缓存和 session 存储，但这些都是不可取的。 这几天一直在这个问题上纠结，有什么解决办法吗？提前致谢。

Answer 1

可用选项和限制:

有两种类型的选项用于存储您的 token :

1. Web Storage API :提供 2 种机制:sessionStorage和localStorage 。此处存储的数据始终可供您的 Javascript 代码使用，并且无法从后端访问。因此，您必须手动将其添加到 header 中的请求中。此存储仅适用于您的应用程序的域，不适用于子域。这两种机制之间的主要区别在于数据过期:

• sessionStorage :数据仅适用于 session (直到浏览器或选项卡关闭)。
• localStorage :存储没有过期日期的数据，只能通过 JavaScript 清除，或清除浏览器缓存/本地存储的数据

Cookies :与后续请求一起自动发送到您的后端。 Javascript 代码的过期和可见性是可以控制的。可供您应用的子域使用。

设计身份验证机制时必须考虑两个方面:

• 安全性:访问 token 或身份 token 是敏感信息。需要始终考虑的主要攻击类型是 Cross Site Scripting (XSS) 和 Cross Site Request Forgery (CSRF)。
• 功能要求:浏览器关闭时用户是否应该保持登录状态？他的 session 会持续多长时间？等等

出于安全考虑，OWASP不建议将敏感数据存储在 Web 存储中。你可以查看他们的CheatSheetSeries页。您还可以阅读this detailed article了解更多详情。

原因主要与XSS漏洞有关。如果您的前端没有 100% 免受 XSS 攻击，那么恶意代码可以在您的网页中执行，并且可以访问 token 。 完全防止 XSS 是非常困难的，因为它可能是由您使用的 Javascript 库之一引起的。

另一方面，如果将 Cookie 设置为 HttpOnly，则 Javascript 可能无法访问 Cookie。 。 现在 cookie 的问题是它们很容易使您的网站容易受到 CSRF 的攻击。 SameSite cookie 可以减轻此类攻击。但是，旧版本的浏览器不支持该类型的 cookie，因此可以使用其他方法，例如使用状态变量。在此 Auth0 文档 article 中有详细说明.

建议的解决方案:

为了安全地存储您的 token ，我建议您使用 2 个 cookie 的组合，如下所述:

JWT token 具有以下结构:header.payload.signature

一般来说，有效负载中存在有用的信息，例如用户角色(可用于调整/隐藏部分 UI)。因此，保持该部分对 Javascript 代码可用非常重要。

身份验证流程完成并在后端创建 JWT token 后，想法是:

1. 存储header.payload参与 SameSite Secure Cookie(因此只能通过 https 获取，并且仍然可用于 JS 代码)
2. 存储signature参与 SameSite Secure HttpOnly cookies
3. 在后端实现一个中间件，以从这 2 个 cookie 重新构建 JWT token 并将其放入 header 中:Authorization: Bearer your_token

您可以设置 Cookie 的有效期以满足您的应用程序的要求。

这个想法在 this article 中被提出并得到了很好的描述。作者:彼得·洛克。