javascript - 在哪里以安全的方式将 JWT token 存储在 react /客户端？

Question

我们正在用 react js 开发一个 web 应用程序，并使用 Odoo 作为后端。
我的网络应用程序将托管在 abc.com，后端位于 xyz.com。
现在，当我在后端调用登录 API 时，它会给出一个 JWT token 作为响应。现在我的问题是我们应该在哪里存储这个 JWT token 以供后续使用。
我发现很少有类似的问题，但我不确定它们应该存储在我的用例中的什么位置。
任何人都可以向我建议我们应该将它存储在客户端的哪个位置？
提前非常感谢!

Answer 1

您有几个选项可以存储 token 。每个选项都有其缺陷，您应该选择哪一个取决于您的具体需求和用例。很高兴知道在浏览器中没有安全的方式来存储 token 。

存储在内存中。您可以将 token 保存在脚本内存中的变量中。使用 XSS 攻击很难窃取 token ，但每次用户刷新页面时都需要一个新 token 。

存储在本地存储中。这使您可以在用户刷新页面时重用 token 。但是，使用此选项，XSS 攻击更容易窃取您的 token 。

存储在 httponly、安全、同站点的 cookie 中。这目前被认为是 SPA 最安全的选项，但在这种情况下，您将无法设置 Authorization直接来自 SPA 的 header ，您只能依靠浏览器将安全 cookie 添加到您的请求中。这意味着，您可能需要一些额外的后端组件，这些组件将从 cookie 中提取 token (并且可能首先将它们放入这些 cookie 中)。这通常称为 token 处理程序组件或后端换前端。如果这是您需要的安全级别，您可以查看我们在 Curity 所做的此类 BFF 的示例实现:https://curity.io/resources/learn/token-handler-spa-example/

还可以观看 Philippe de Ryck 制作的关于浏览器中 token 安全性的精彩视频:https://pragmaticwebsecurity.com/talks/xssoauth.html