在 React/Redux 应用程序的 cookie 中保护 JWT 的最佳方法是什么？答案

【问题标题】：What is the optimal way to secure JWT in cookies for a React/Redux application?在 React/Redux 应用程序的 cookie 中保护 JWT 的最佳方法是什么？
【发布时间】：2019-09-23 00:04:02
【问题描述】：

现在我正在开发一个 React/Redux 全栈应用程序，我正在设置 JWT 身份验证并通过 cookie 传递 JWT。我有几个关于处理服务器生成的 CSRF 令牌的问题。

1) 在服务器端设置 CSRF 令牌后，它会传递给客户端吗？它究竟是如何通过的？（我见过它作为一个对象传入的例子，但我发现的那些没有很好地解释或只是稀缺）

server.js

// config csrf in server
app.use(csrf({
  cookie: {
    key: '_csrf',
    secure: true,
    httpOnly: true,
    sameSite: 'strict',
    maxAge: 86400
  }
}))

// Hits my api routes, and if these arent hit, the index.html file is rendered
app.use(routes)

// Route used to fetch the index html file
app.get('*', (req, res) => {
  let csrfToken = req.csrfToken()
  console.log(csrfToken) // This doesnt console log anything on the server side
  res.sendFile(path.join(__dirname, "./client/build/index.html"), {
    _csrf: csrfToken
  })
})

2) 一旦设置了 CSRF 令牌，是否应该将其存储在应用程序的状态（Redux 存储）中以进行持久存储？还是没有必要？

3) 在客户端，当我准备通过 POST 请求将数据提交到路由时，如果我理解正确，您必须将输入隐藏字段与 csrf 变量一起包含，如下所示：

<input type="hidden" name="_csrf" value=csrfToken/>

因此，当您提交表单时，您将包含该输入，然后在发布请求中（假设为 fetch 或 axios），您将设置标头以包含该 csrf 令牌，这样服务器就可以将其与客户端提交给路由的令牌，我理解正确吗？

谢谢！

【问题讨论】：

尝试将您的问题编辑为一个有明确答案的问题。您要问的是，React 中 JWT 的“最佳实践”可能取决于业务需求以及其他因素。
编辑了我的评论以更好地反映我想要得到的答案。希望有帮助！任何帮助将不胜感激。
真棒迈克尔，恰好 React-Redux 是我的专业领域，给我一分钟，我会看看我是否能提供任何帮助。
这不是关于我感觉的 JWT 的问题，更多的是关于 CSRF 是如何工作的（这就是 1-3 的内容）。也许从问题中删除对 JWT 的引用？

标签： node.js http express csrf-protection

【解决方案1】：

您提出的所有问题都与 react 或 redux 无关。这是关于与 HTTP 服务器的请求/响应交换。

当使用 CSRF 中间件时，它会根据请求自动提供 CSRF 令牌作为会话 cookie，并且您应该在进一步请求时将其提供回服务器。

1) CSRF 令牌通常由服务器设置在 cookie 中，或设置为 HTML 中的元标记。此代码是根据对服务器的 HTTP 请求唯一生成的。应用程序负责读取 cookie/元标记，然后将其发送回服务器以供将来请求。一种可能的方法是作为标头：'X-csrf-token' (https://en.m.wikipedia.org/wiki/Cross-site_request_forgery)

2) 在某些情况下是不必要的：但这只是因为如果服务器发送 cookie 标头响应，那么您的浏览器将始终存储该 cookie，除非您关闭了 cookie。向服务器发送请求时，您需要检索该 cookie 并将其作为上面的标头发送

3) 我建议您阅读 express CSRF 中间件 (https://github.com/expressjs/csurf/blob/master/README.md) 的自述文件，尤其是关于中间件如何在响应或进一步请求中查找 CSRF 令牌的部分：

默认值是一个从以下位置，按顺序： • req.body._csrf - 通常生成由 body-parser 模块。 • req.query._csrf - 一个内置的 Express.js 从 URL 查询字符串中读取。 • req.headers['csrf-token'] - CSRF-Token HTTP 请求标头。 • req.headers['xsrf-token'] - XSRF-Token HTTP 请求标头。 • req.headers['x-csrf-token'] - X-CSRF-Token HTTP 请求标头。 • req.headers['x-xsrf-token'] - X-XSRF-Token HTTP 请求标头。

如您所见 - 如何将其提供回服务器取决于您 - 大多数人选择标头，但它可以作为正文或获取请求查询字符串。

【讨论】：