React 中的安全 JWT 令牌处理答案

【问题标题】：Secure JWT token handling in ReactReact 中的安全 JWT 令牌处理
【发布时间】：2021-09-14 19:10:32
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs jwt

【解决方案1】：

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

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

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

如果您想采用当前的 SPA 安全最佳实践，您应该研究 the 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 中安全地存储令牌。

【讨论】：

有些人不知道要感谢他们的问题得到很好的回答。