Double Submit Cookie设置后服务端无法验证，哪里出问题了？

UX-子怡提问于 2026-01-31 12:13:26 阅读 33

安全

我在用Double Submit Cookie防护CSRF时遇到问题，设置了cookie和请求头，但服务端一直提示验证失败。前端代码是这样的：


document.cookie = `csrftoken=${Math.random()}`;
fetch('/api/data', {
  method: 'POST',
  headers: { 'X-CSRF-Token': getCookie('csrftoken') }
});

测试时发现cookie确实存在，但后端说请求头里的token和cookie值不一致。难道是设置cookie的方式有问题？或者需要设置特定属性？之前查资料说要配合HttpOnly，但这样前端又拿不到值，感觉矛盾了…

我来解答赞 10 收藏

反馈

2 条解答

芳芳 ☘︎ Lv1

直接这样改：

function setCsrfCookie() {

  const token = Math.random().toString();

  document.cookie = csrftoken=${token}; SameSite=Strict; Secure;

  return token;

}



const token = setCsrfCookie();

fetch('/api/data', {

  method: 'POST',

  headers: { 'X-CSRF-Token': token },

  credentials: 'same-origin'

});

cookie要设置SameSite和Secure属性，且要用credentials配置才能携带凭证。HttpOnly确实拿不到cookie值，所以不需要设HttpOnly。

2026-02-03 11:08

打工人新利 Lv1

问题出在 Math.random() 每次都会生成新值，导致 cookie 和请求头的值不一致。改成固定值或用后端生成的 token 应该能用。

前端代码示例：

const csrfToken = '固定值或者后端提供的token';

document.cookie = csrftoken=${csrfToken};

fetch('/api/data', {

  method: 'POST',

  headers: { 'X-CSRF-Token': csrfToken }

});

后端确保用同一个 token 来验证请求头和 cookie。

2026-01-31 18:05