Django+React项目中CSRF Token的最佳实现方式咨询

核心方案：基于@ensure_csrf_cookie的无模板集成 #

你不用每次提交表单前都单独请求获取Token，只需要在**用户首次加载应用（比如访问React入口页）**时，请求一个带@ensure_csrf_cookie的视图，Django会自动把CSRF Token写入浏览器Cookie，之后这个Cookie会在同域请求中自动携带，React只需要从Cookie中读取Token并放到请求头里即可。

具体实现步骤 #

1. Django端配置

   • 新增一个专门用于初始化CSRF Cookie的视图：

     from django.views.decorators.csrf import ensure_csrf_cookie
     from django.http import JsonResponse
     
     @ensure_csrf_cookie
     def get_csrf_token(request):
         return JsonResponse({"detail": "CSRF cookie set"})
     

   • 在urls.py中配置路由：

     path('api/csrf/', get_csrf_token, name='get_csrf_token'),
     

   • 确保Django的CSRF中间件已启用（默认开启，检查settings.py的MIDDLEWARE列表里有'django.middleware.csrf.CsrfViewMiddleware'）

2. React端处理

   • 应用加载时（比如App.js的useEffect钩子），先请求/api/csrf/触发CSRF Cookie设置：

     useEffect(() => {
         fetch('/api/csrf/')
             .then(res => res.json())
             .catch(err => console.error('Failed to set CSRF cookie:', err));
     }, []);
     

   • 封装请求工具函数，自动从Cookie中提取CSRF Token并添加到请求头：

     // 工具函数：从Cookie中读取CSRF Token
     function getCsrfToken() {
         const value = `; ${document.cookie}`;
         const parts = value.split(`; csrftoken=`);
         if (parts.length === 2) return parts.pop().split(';').shift();
         return null;
     }
     
     // 封装需要CSRF验证的请求
     async function csrfFetch(url, options = {}) {
         const headers = {
             ...options.headers,
             'X-CSRFToken': getCsrfToken(),
             'Content-Type': 'application/json'
         };
     
         return fetch(url, {
             ...options,
             headers,
             credentials: 'include' // 确保携带所有同域Cookie（CSRF、JWT刷新令牌等）
         });
     }
     

   • 之后所有表单提交、数据修改类请求，都用这个csrfFetch函数发送即可。

关于安全顾虑的解答 #

Django的CSRF验证机制本身是安全的，核心逻辑是：

• CSRF Token绑定到用户会话，恶意用户即使拿到自己的Token，也无法伪造其他用户的请求——浏览器同源策略会阻止跨域请求携带他人Cookie，而Django验证时会同时检查请求头里的Token和Cookie里的Token是否匹配，且两者必须属于同一个会话。
• 只要你的JWT刷新令牌通过HttpOnly、Secure（生产环境）、SameSite: 'Strict'的Cookie存储（不要存在localStorage），结合CSRF验证，就能有效防范CSRF攻击和令牌窃取。

结合JWT刷新令牌的注意事项 #

• 刷新JWT的接口必须做CSRF验证：因为刷新令牌存在Cookie中，若不验证CSRF，会存在被伪造请求刷新令牌的风险。所以刷新请求也要用csrfFetch发送，确保携带X-CSRFToken头。
• 配置JWT刷新Cookie时，强制设置HttpOnly: true、Secure: true（生产环境）、SameSite: 'Strict'，进一步提升安全性。

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