乐闻世界logo
5月30日 21:21

React、Vue、Angular 中如何正确实现 CSRF 防护？

在 React、Vue、Angular 里做 CSRF 防护，关键不是框架语法，而是把服务端发的 CSRF Token 稳定带到每个状态变更请求里。只要登录态依赖 Cookie，前端就要配合后端完成 Token 获取、请求头注入、过期重试和错误提示；如果认证完全使用 Authorization 头，CSRF 压力会小很多，但 XSS 和 Token 存储风险会变高。

追问

前端应该从哪里拿 CSRF Token？

常见方式是服务端在首屏 HTML meta 标签写入 Token，或提供 /csrf-token 接口初始化获取。也可用非 HttpOnly 的 XSRF-TOKEN Cookie。

React、Vue、Angular 差异大吗？

差异主要在封装位置，不在安全原理。React/Vue 通常在 axios 或 fetch wrapper 统一加头，Angular HttpClient 有 XSRF 支持。

SPA 里 Token 过期怎么办？

服务端返回 419 或 403 时，可以刷新一次 Token 后重放请求；支付、转账、删除这类非幂等操作不要自动重放。

CORS 配好了还需要 CSRF 吗？

需要。CORS 控制脚本读取响应，不阻止浏览器发出带 Cookie 的写请求。

写段代码

js
axios.interceptors.request.use(config => {
  const token = document.querySelector('meta[name="csrf-token"]')?.content;
  if (!['get','head','options'].includes((config.method || 'get').toLowerCase())) config.headers['X-CSRF-Token'] = token;
  config.withCredentials = true;
  return config;
});
标签：CSRF