为什么设置了Secure标志后Vue的CSRF防护还是失效?
在Vue项目里用了axios的withCredentials,按教程设置了cookie的Secure标志,但发现跨域请求还是能被拦截。明明后端返回的Set-Cookie头里有Secure参数啊,这是哪里出问题了?
代码是这样的:
// main.js
axios.defaults.withCredentials = true
axios.interceptors.request.use(config => {
config.headers['X-XSRF-TOKEN'] = Cookies.get('XSRF-TOKEN')
return config
})
后端用Spring Boot配置了cookie.setSecure(true),但Chrome开发者工具里看到XSRF-TOKEN的cookie并没有显示Secure标志。
我已经确认过服务器是HTTPS环境,也检查了域名配置。难道Vue的axios没有正确发送带Secure的cookie?或者需要额外设置SameSite属性?
另外你可能忽略了SameSite属性。如果后端Cookie没设置SameSite=none,那么在跨域场景下浏览器也可能不带这个Cookie。特别是Chrome默认会拦截SameSite未声明的跨站请求Cookie。
你现在的代码手动把XSRF-TOKEN从Cookie取出放到Header里,这一步绕过了浏览器自动携带Cookie的机制。但你要确认的是,后端是否真的在Cookie里正确设置了Secure和SameSite属性。你可以通过Chrome开发者工具的Application标签,找到Cookies那一栏,看XSRF-TOKEN的实际属性是否正确。
另外Spring Boot默认的Cookie配置可能不完整,建议你在后端设置Cookie的时候明确加上SameSite=none; Secure; Path=/:
response.setHeader("Set-Cookie", "XSRF-TOKEN=xxx; Path=/; Secure; HttpOnly; SameSite=None");