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中的一个简单表单。我在加载反应应用程序之前加载了一些初始数据，并且在那里设置了 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 来发送数据和令牌

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 并将其发送到客户端。中间件希望您：

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

有关详细信息，请参阅 this 答案。

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

express.js CSURF cookie and header match, returning 403

csrf

node.js

express