在 react.js 中存储访问令牌的位置？

Question

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

原文由 Thananjaya S 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可用选项和限制：

有两种类型的选项可用于存储您的令牌：

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

• sessionStorage ：仅可用于会话的数据（直到浏览器或选项卡关闭）。
• localStorage ：存储没有过期日期的数据，并且只能通过 JavaScript 清除，或者清除浏览器缓存/本地存储的数据

1. Cookies ：随后续请求自动发送到您的后端。可以控制 Javascript 代码的到期和可见性。可用于您应用的子域。

在设计身份验证机制时，您必须考虑两个方面：

• 安全性：访问或身份令牌是敏感信息。要始终考虑的主要攻击类型是 跨站点脚本(XSS) 和 跨站点请求伪造(CSRF)。
• 功能需求：关闭浏览器时用户是否应该保持登录状态？他的会议将持续多长时间？ ETC

出于安全考虑， OWASP 不建议将敏感数据存储在 Web 存储中。您可以查看他们的 CheatSheetSeries 页面。您还可以阅读 这篇详细的文章 以获取更多详细信息。

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

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

建议的解决方案：

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

JWT 令牌具有以下结构： header.payload.signature

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

一旦身份验证流程完成并在后端创建 JWT 令牌，想法是：

1. 将 header.payload 部分存储在 --- SameSite Secure Cookie 中（只能通过 https 获得，并且仍然可用于 JS 代码）
2. 将 signature 部分存储在 --- SameSite Secure HttpOnly
3. 在后端实现一个中间件，从这 2 个 cookie 中重建 JWT 令牌并将其放入标头中： Authorization: Bearer your_token

您可以设置 cookie 的过期时间以满足您应用程序的要求。

Peter Locke 在 这篇文章 中提出并很好地描述了这个想法。

原文由 Anouar 发布，翻译遵循 CC BY-SA 4.0 许可协议