node.js - 在 React/Redux 应用程序的 cookie 中保护 JWT 的最佳方法是什么？

Question

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

1) 在服务器端设置 CSRF token 后，它会传递给客户端吗？它究竟是如何通过的？ (我见过它作为对象传入的例子，但我发现的例子解释得不是很好或很少)

服务器.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 token ，它是否应该存储在应用程序的状态(Redux 存储)中以进行持久存储？或者这是不必要的吗？

3) 在客户端，当我准备通过 POST 请求将数据提交到路由时，如果我理解正确的话，您必须像这样将输入隐藏字段包含在 csrf 变量中:

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

因此，当您提交表单时，您将包含该输入，然后在发布请求(假设是 fetch 或 axios)中，您将设置 header 以包含该 csrf token ，这样服务器就可以将它与客户端正在向路由提交 token ，我理解正确吗？

谢谢!

Answer 1

您所问的内容都与 React 或 Redux 无关。这是关于与 HTTP 服务器的请求/响应交换。

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

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

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

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

The default value is a function that reads the token from the following locations, in order: • req.body._csrf - typically generated by the body-parser module. • req.query._csrf - a built-in from Express.js to read from the URL query string. • req.headers['csrf-token'] - the CSRF-Token HTTP request header. • req.headers['xsrf-token'] - the XSRF-Token HTTP request header. • req.headers['x-csrf-token'] - the X-CSRF-Token HTTP request header. • req.headers['x-xsrf-token'] - the X-XSRF-Token HTTP request header.

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