Double Submit Cookie的token怎么同时放在cookie和请求头里？

W″逸翔提问于 2026-02-17 23:50:27 阅读 44

安全

我在用Vue和Express实现Double Submit Cookie防护，但一直报错。后端设置的cookie是Secure和HttpOnly的，前端用document.cookie拿不到值。尝试在axios拦截器里加请求头：


axios.interceptors.request.use(config => {
  const csrftoken = document.cookie.replace(/.*csrftoken=([^;]*)/, '$1');
  config.headers['X-CSRF-Token'] = csrftoken;
  return config;
});

但控制台提示cookie为空，后端返回403。明明登录时后端设置了Set-Cookie: csrftoken=xxx，难道HttpOnly导致无法读取？或者我应该把token存两份，一份HttpOnly，一份普通cookie？

CSRF防护 Token验证前端安全

我来解答赞 6 收藏

反馈

2 条解答

萌新.志敏 Lv1

HttpOnly的cookie前端确实读不了，这是设计目的。Double Submit Cookie的正确做法是：

后端应该生成两个token：
1. HttpOnly的cookie用于服务端校验（安全）
2. 普通cookie或直接返回token值给前端（非HttpOnly）

具体实现：

Express后端：

res.cookie('csrf_token_http', token, { httpOnly: true, secure: true });

res.cookie('csrf_token', token, { secure: true });

// 或者直接返回json

res.json({ csrfToken: token });

Vue前端：

// 如果是用普通cookie

axios.defaults.headers.common['X-CSRF-Token'] = document.cookie.replace(/.*csrf_token=([^;]*)/, '$1');



// 如果是接口返回的

axios.post('/login').then(res => {

  axios.defaults.headers.common['X-CSRF-Token'] = res.data.csrfToken;

});

关键点：
- HttpOnly的cookie只用于服务端校验
- 可读的token放在普通cookie或响应体
- 前端把可读的token放到请求头
- 服务端比较两个token是否一致

别折腾document.cookie读HttpOnly了，读不到的，我当初也踩过这个坑。要么用普通cookie要么直接从接口拿token值，性能上建议缓存起来避免每次请求都解析cookie。

2026-03-07 03:01

___华丽 Lv1

HttpOnly的cookie确实拿不到，你得让后端同时设置两个cookie，一个HttpOnly存敏感数据，一个普通cookie存csrf token。后端代码大概这样：

res.cookie('csrftoken', token, { httpOnly: false, secure: true });

res.cookie('session', sessionToken, { httpOnly: true, secure: true });

前端axios拦截器不用改，应该能用。记得确保前后端的cookie domain和path配置一致，不然会有问题。

2026-02-18 02:01