设置httpOnly:true时出现EBADCSRFTOKEN错误，求技术解决方案

核心原因 #

当你给XSRF-TOKEN Cookie设置httpOnly: true时，前端JavaScript无法读取这个Cookie的值。而CSRF验证要求前端把这个Token值通过请求头（通常是X-XSRF-TOKEN）或表单参数提交给后端，后端才能和生成的CSRF Secret比对验证。前端读不到Cookie，自然传不对Token，就会触发EBADCSRFTOKEN错误。

解决方案 #

要保留httpOnly: true的安全特性，你需要换一种方式把CSRF Token传递给前端，同时保持存储CSRF Secret的Cookie是httpOnly的。

方案1：将CSRF Token放入响应头 #

后端在生成Token后，把它放到自定义响应头里，前端从响应头获取Token，再在后续请求中携带这个Token到后端。

修改你的代码如下：

app.use(cookieParser())
// 这里的cookie配置是存储CSRF Secret的，保持httpOnly:true没问题
app.use(csurf({cookie: {secure: true, sameSite: true, httpOnly: true}}));

app.use(function (err, req, res, next) {
    if (err.code !== 'EBADCSRFTOKEN')
        return next(err);
    else
        console.log("Error:", err.message?err.message:err);

    res.status(403).json({'errorMessage':'Not Authorized'});
})

app.use(function(req, res, next) {
    // 不再设置XSRF-TOKEN Cookie，而是把Token放到响应头
    res.setHeader('X-XSRF-TOKEN', req.csrfToken());
    res.setHeader('X-Frame-Options', 'DENY');
    res.setHeader('Access-Control-Allow-Origin','SAMEORIGIN');
    res.setHeader('Cache-control', 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0');
    res.setHeader('Pragma', 'no-cache');
    next();
});

前端处理逻辑：

• 首次请求时，从响应头X-XSRF-TOKEN中获取Token并存储（比如用localStorage）
• 后续发起POST/PUT/DELETE等请求时，在请求头中添加X-XSRF-TOKEN，值为存储的Token

方案2：将CSRF Token嵌入页面HTML #

csurf默认会自动管理存储CSRF Secret的Cookie（这个Cookie是httpOnly的，安全），你可以通过req.csrfToken()生成Token，把它渲染到页面的HTML中（比如内嵌到script标签的全局变量里），这样前端就能拿到Token，无需读取Cookie。

比如在你的路由中返回页面时：

app.get('/', function(req, res) {
  // 把Token传给模板，渲染到页面中
  res.render('index', { csrfToken: req.csrfToken() });
});

前端页面中：

<script>
  // 全局变量存储Token
  window.CSRF_TOKEN = '<%= csrfToken %>';
</script>

然后发起请求时，把这个Token放到请求头或表单里：

fetch('/api/data', {
  method: 'POST',
  headers: {
    'X-XSRF-TOKEN': window.CSRF_TOKEN,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ ... })
});

关键注意点 #

• 存储CSRF Secret的Cookie必须保持httpOnly: true，防止XSS攻击窃取Secret
• 传递给前端的Token只是一次性的验证凭证，即使被XSS窃取，也只能用于当前会话的有限请求，风险远低于Secret被窃取
• 确保前端在每次请求时都正确携带Token，后端的csurf中间件默认会检查X-XSRF-TOKEN请求头或_csrf表单参数

内容的提问来源于stack exchange，提问作者snehal