reactjs - React 中的安全 JWT 令牌处理

Question

一个小时以来，我一直在寻找一个令人满意的答案，但我仍然无法弄清楚这个问题的答案：如何使用 React 在客户端安全地存储 JWT 令牌？

根据我的阅读，localStorage 解决方案不受欢迎，因为它可以从第三方脚本访问。提出的更安全的解决方案是使用 HttpOnly cookie，但问题是，它无法通过 js 访问，因此在 React 中无用。

因此，如何在客户端安全地存储 JWT 令牌？

标签： reactjsjwt

Answer 1

简而言之 - 您无法在浏览器中安全地存储令牌。如果您的代码可以访问令牌，那么任何攻击者也可以访问它。也就是说，您可以减轻一些风险并决定一个可能“足够安全”以满足您的需求的解决方案。

例如，将令牌保存在本地存储中可能就足够了，如果丢失这样的令牌不会造成很大的风险 - 也许您的网站处理的数据不敏感。

一个可行的选择是将令牌保留在内存中。这种方式窃取它有点复杂。那么当然你每次刷新页面都需要获取一个新的token，但是你可能会使用SSO cookie在后台自动获取新的token。

如果您想采用当前的 SPA 安全最佳实践，您应该研究Backend-For-Frontend模式。您添加了一个轻量级后端组件，该组件处理令牌和 OAuth 流，并使用基于 cookie 的常规会话与您的 React 应用程序进行通信。在 Curity，我们创建了这样一个组件的示例实现，您可以将其用作灵感：https ://github.com/curityio/bff-node-express

您可以观看这个精彩的视频：https ://www.youtube.com/watch?v= lEnbi4KClVw Philippe de Ryck 详细介绍了为什么无法在 SPA 中安全地存储令牌。