React 中的安全 JWT 令牌处理
Secure JWT token handling in React
我一直在寻找一个小时的满意答案，但我仍然无法找到问题的答案：如何使用 React 在客户端安全地存储 JWT 令牌？
据我所知，localStorage 解决方案不受欢迎，因为它可以从第三方脚本访问。一个更安全的解决方案是使用HttpOnly cookie，但问题是，它无法通过js访问，因此在React中没有用。
因此，如何在客户端安全地存储 JWT 令牌？
简而言之 - 您无法在浏览器中安全地存储令牌。如果您的代码可以访问令牌，那么任何攻击者也可以访问它。也就是说，您可以减轻一些风险并决定可能“足够安全”满足您需求的解决方案。
例如如果丢失这样的令牌不会带来很大的风险，那么将令牌保存在本地存储中可能就足够了 - 也许您的网站处理的数据不敏感。
一个可行的选择是将令牌保存在内存中。这样偷起来就麻烦一些了。那么当然你每次刷新页面都需要获取一个新的token，但是你可能会使用SSO cookies在后台自动获取新的token。
如果您想采用 SPA 的当前安全最佳做法，您应该调查 the Backend-For-Frontend pattern. You add a lightweight backend component which handles tokens and OAuth flows, and which uses regular cookie-based sessions in communication with your React app. At Curity we created an example implementation of such a component, which you could use as inspiration: https://github.com/curityio/bff-node-express
您可以观看这个很棒的视频：https://www.youtube.com/watch?v=lEnbi4KClVw Philippe de Ryck 详细介绍了为什么无法在 SPA 中安全存储令牌。
我一直在寻找一个小时的满意答案，但我仍然无法找到问题的答案：如何使用 React 在客户端安全地存储 JWT 令牌？
据我所知，localStorage 解决方案不受欢迎，因为它可以从第三方脚本访问。一个更安全的解决方案是使用HttpOnly cookie，但问题是，它无法通过js访问，因此在React中没有用。
因此，如何在客户端安全地存储 JWT 令牌？
简而言之 - 您无法在浏览器中安全地存储令牌。如果您的代码可以访问令牌，那么任何攻击者也可以访问它。也就是说，您可以减轻一些风险并决定可能“足够安全”满足您需求的解决方案。
例如如果丢失这样的令牌不会带来很大的风险，那么将令牌保存在本地存储中可能就足够了 - 也许您的网站处理的数据不敏感。
一个可行的选择是将令牌保存在内存中。这样偷起来就麻烦一些了。那么当然你每次刷新页面都需要获取一个新的token，但是你可能会使用SSO cookies在后台自动获取新的token。
如果您想采用 SPA 的当前安全最佳做法，您应该调查 the Backend-For-Frontend pattern. You add a lightweight backend component which handles tokens and OAuth flows, and which uses regular cookie-based sessions in communication with your React app. At Curity we created an example implementation of such a component, which you could use as inspiration: https://github.com/curityio/bff-node-express
您可以观看这个很棒的视频：https://www.youtube.com/watch?v=lEnbi4KClVw Philippe de Ryck 详细介绍了为什么无法在 SPA 中安全存储令牌。