Question

现在，我正在开发一个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令牌，这样服务器就可以将其与客户提交给该路线的令牌，我是否正确理解？

谢谢！

Answer 1

您提出的任何要求都没有涉及到react或redux。这是关于与HTTP服务器的请求/响应交换。

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

1）CSRF令牌通常由服务器在cookie中设置，或在HTML中设置为meta标签。该代码是根据对服务器的HTTP请求唯一生成的。应用程序有责任读取cookie / meta标签，然后将其发送回服务器以供将来请求。一种可能的方式是作为标题：“ X-csrf-token”（https://en.m.wikipedia.org/wiki/Cross-site_request_forgery）

2）在某些情况下是不必要的：但这仅是由于以下事实：如果服务器发送Cookie标头响应，那么除非您关闭了Cookie，否则您的浏览器将始终存储该Cookie。向服务器发送请求时，您需要检索该cookie并将其作为上方的标头发送

3）我建议您阅读快速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请求标头。

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

对于React / Redux应用程序，如何在Cookie中保护JWT的最佳方法是什么？

1 个答案: