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);

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

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

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

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

我正在使用 fetch 发送数据和令牌

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

您正在阅读_csrfcookie的内容并将其发送回X-CSRF-Token标题中。这是行不通的。

csurfExpress 内部运行的中间件已通过以下代码进行配置：app.use(csurf({ cookie: true }));生成_csrfcookie 并将其发送到客户端。中间件希望您：

1. 在服务器上生成第二个 CSRF 数据。
2. 将第二条数据附加到发送给客户端的响应中。结果，响应到达客户端时同时_csrf附有 cookie 和第二条数据。
3. 确保来自客户端的传入请求具有相同的_csrfcookie，并将第二条数据复制到六个预定义位置/位置之一（例如“X-CSRF-Token”标头或其他位置）。

有关更多详细信息，请参阅此答案。