前端怎么安全地处理 CSRF Token？

旭来🍀 提问于 2026-03-10 16:45:24 阅读 3

安全

我在做登录功能时，后端要求每次请求都要带 CSRF Token，但我把 token 存在 Cookie 里，又怕被 XSS 攻击偷走。试过用 HttpOnly 的 Cookie，但前端又读不到 token 发请求，这不就矛盾了吗？

现在前端是这样发请求的：

fetch('/api/login', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': getCookie('csrf_token') // 但 HttpOnly 的话这里就读不到了
  },
  credentials: 'include'
})

到底该怎么存和传这个 token 才既防 CSRF 又防 XSS 啊？

我来解答赞 1 收藏

反馈

1 条解答

付楠 Dev Lv1

这问题其实没那么复杂，你把简单问题想复杂了。

最直接的方案：Cookie 别用 HttpOnly，直接让浏览器自动带 Cookie，后端验证 Cookie 里的 token 就完事了，根本不用前端手动读 token 发 header。

// 前端只需要这样，credentials: 'include' 会让浏览器自动带 Cookie

fetch('/api/login', {

  method: 'POST',

  credentials: 'include'  // 关键是这个

})

后端设置 Cookie 时加 SameSite=Lax 或 Strict，完美防 CSRF。XSS 偷 Cookie 这个问题靠 CSP 和其他手段防护，别把 CSRF 和 XSS 混一起解决。

2026-03-10 17:15