express.js CSURF cookie和标头匹配，返回403

Question

我有一个简单的快速服务器设置，如：

  app.use(bodyParser.json());
  app.use(cookieParser());
  app.use(csurf({ cookie: true }));
  // routes
  app.use(Routes imported from another file);

客户端当前只是一个简单的反应形式。我在React应用加载之前已经加载了一些初始数据，并且在那里设置了csrf cookie。

我有一个简单的函数来解析csrf cookie客户端。我在create-react-app中代理快递服务器，所以我不能只在标题中设置元标记。

const csrfToken = () => {
  const cookies = decodeURIComponent(document.cookie).split(';');
  const token = cookies.find(cookie => cookie.includes('_csrf'));

  if (token) {
    return token.split('=')[1]
  }
}

我正在使用访存来发送数据和令牌

const response = await fetch(url, {
      credentials: 'include',
      method: 'POST',
      headers: {
        'Connection': 'keep-alive',
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken()
      },
      body: JSON.stringify({ ...body })
    });

我尝试注释掉告诉应用程序使用csurf的行，并检查请求中是否存在所有内容。我可以在我发送的每个请求中验证cookie和标题是否匹配。一切似乎都正确，但是我仍然遇到403错误，因此我必须丢失某些内容。我茫然不知所措，我发现谷歌搜索就是其他人非常相似地设置他们的应用程序。

Answer 1

您正在读取_csrf cookie的内容，并将其发送回X-CSRF-Token标头中。这将不起作用。

Express中运行的csurf中间件已通过以下代码配置：app.use(csurf({ cookie: true }));生成_csrf cookie并将其发送到客户端。它做到了，并希望您：

1. 在服务器上生成第二条CSRF数据。
2. 将第二段数据附加到发送给客户端的响应中。结果，响应将同时带有_csrf cookie和附加的第二条数据到达客户端。
3. 从客户端接收到一个完整的_csrf cookie并将第二个数据复制到六个预定义位置/位置（例如“ X-CSRF-Token”标头或另一个位置）中的一个的请求。

请参阅this答案以了解更多详细信息。