React 中的安全 JWT 令牌处理

Question

我已经寻找一个满意的答案一个小时了，但我仍然无法找出问题的答案：如何使用 React 将 JWT 令牌安全地存储在客户端？

据我所知，本地存储解决方案并不理想，因为它可以从第三方脚本访问。提出的更安全的解决方案是使用 HttpOnly cookie，但问题是，它无法通过 js 访问，因此它在 React 中没有用处。

那么，如何在客户端安全地存储 JWT 令牌呢？

Answer 1

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

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

一个可行的选择是将令牌保留在内存中。这样的话，窃取它就有点复杂了。当然，每次刷新页面时您都需要获取新令牌，但您可能会使用 SSO cookie 在后台自动获取新令牌。

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

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