node.js - express.js CSURF cookie 和 header 匹配，返回 403

Question

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

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

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

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

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

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

我正在使用 fetch 发送数据和 token

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 和 header 在我发送的每个请求中是否匹配。一切似乎都是正确的，但我仍然收到 403 错误，所以我一定错过了一些东西。我对它可能是什么感到迷失，我在谷歌搜索中所能找到的只是其他人以非常相似的方式设置他们的应用程序。

Answer 1

您正在读取 _csrf cookie 的内容并将其发送回 X-CSRF-Token header 内。这是行不通的。

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

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

参见this回答以获取更多详细信息。