在反应/客户端中以安全的方式存储 JWT 令牌的位置？

Question

我们正在使用 React js 开发一个 Web 应用程序并使用 Odoo 作为后端。

我的网络应用程序将托管在 abc.com，后端位于 xyz.com。

现在，当我在后端调用登录 API 时，它会给出 JWT 令牌作为响应。现在我的问题是我们应该在哪里存储这个 JWT 令牌以供后续使用。

我发现了一些类似的问题，但我不确定它们应该存储在我的用例中的哪里。谁能建议我应该将其存储在客户端的哪里？

预先非常感谢！

Answer 1

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

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

2. 存储在本地存储中。这使您可以在用户刷新页面时重用令牌。然而，使用此选项，XSS 攻击可以更轻松地窃取您的令牌。

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

另请观看 Philippe de Ryck 制作的关于浏览器中令牌安全性的精彩视频：https://pragmaticwebsecurity.com/talks/xssoauth.html

Answer 2

您可以将获得的令牌存储在cookie中。如果您使用 axios 库来处理请求，则可以设置要在 axios 拦截器中处理的令牌

export function getToken() {
  for (const i in TokenKey) {
    if (Cookies.get(TokenKey[i])) return Cookies.get(TokenKey[i])
  }

service.interceptors.request.use(
  config => {
    const token = getToken() || store.getters.token
    if (token) {
      config.headers['Authorization'] = token
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }

）