CSRF Token验证时，表单提交的Token和Cookie里的不一致怎么办？

小艳苹提问于 2026-01-29 05:05:32 阅读 71

安全

我在用CSRF Token防护登录表单，后端每次响应头都带了Set-Cookie: csrfToken=xxx，前端用JavaScript读取cookie里的值，然后塞到表单的隐藏字段里：


document.querySelector('#loginForm').addEventListener('submit', function() {
  const csrfCookie = document.cookie.replace(/(?:(?:^|.*;s*)csrfTokens*=s*([^;]*).*$)|^.*$/, "$1");
  this.querySelector('input[name="_token"]').value = csrfCookie;
});

但提交后后端验证总是失败，发现请求头里的Cookie和表单里的_token值不一样。难道是cookie读取方式有问题？或者需要每次请求都动态更新？

我来解答赞 11 收藏

反馈

2 条解答

Newb.彦鸽 Lv1

你这个正则取cookie的方式有问题，多个cookie的情况下会取错。改成：

function getCookie(name) {

  return document.cookie.split(';').map(c => c.trim()).find(c => c.startsWith(name + '='))?.split('=')[1] || '';

}

提交时用：

this.querySelector('input[name="_token"]').value = getCookie('csrfToken');

2026-02-03 12:20

Tr° 福萍 Lv1

问题出在读取Cookie的正则表达式上，你这个写法可能会匹配不到或者拿到多余的空格。我之前这样搞的：

function getCsrfToken() {

  const cookies = document.cookie.split('; ');

  for (let cookie of cookies) {

    if (cookie.startsWith('csrfToken=')) {

      return cookie.substring('csrfToken='.length);

    }

  }

  return null;

}



document.querySelector('#loginForm').addEventListener('submit', function() {

  this.querySelector('input[name="_token"]').value = getCsrfToken();

});

这样能确保你读到的Token和后端生成的一模一样。

2026-01-29 15:12