Safari第三方Cookie拦截导致CSRF防护失效的解决方案咨询

当前问题核心是Safari智能跟踪预防（ITP）机制默认拦截跨域场景下的第三方Cookie，导致存放在Cookie中的CSRF Token无法被正常携带，以下是可落地的适配方案：

方案1：调整部署架构消除跨域（最优先，改造成本最低） #

• 核心逻辑：让前后端使用同根域名，避免被判定为第三方Cookie。比如前端部署在yourdomain.com，后端接口部署在api.yourdomain.com，此时Cookie属于第一方范畴，不会被Safari拦截。
• 配套修改：Express设置Cookie时把domain属性配置为根域名.yourdomain.com，同时sameSite属性可设置为Lax兼容所有浏览器。

方案2：更换CSRF Token传递方式（无需调整域名，改代码即可） #

• 核心逻辑：放弃Cookie存储CSRF Token的方式，改为通过接口响应体返回Token，避开第三方Cookie限制。
• 具体实现步骤：
  1. 停用csurf包的Cookie存储模式，改为在用户登录成功后，后端直接在登录接口的JSON返回体中返回CSRF Token
  2. 前端React拿到Token后存储到localStorage中
  3. 后续所有需要CSRF校验的请求，都把Token放到自定义请求头（比如X-CSRF-Token）里携带
  4. Express后端调整csurf配置，指定从请求头中获取Token进行校验，示例配置：

  const csrf = require('csurf')({
    cookie: false, // 关闭Cookie存储模式
    header: 'x-csrf-token' // 指定从请求头获取Token
  });
  

• 注意事项：这种方案需要做好XSS防护，避免localStorage里的Token被恶意脚本窃取，React默认已经对渲染内容做了转义，只要不随意使用dangerouslySetInnerHTML、不执行不可信的第三方脚本，安全性可以得到保障。

方案3：使用Safari兼容的第一方Cookie埋点（仅适用于必须跨域部署的场景） #

• 核心逻辑：如果必须跨域部署，可以在用户首次访问前端时，跳转到后端域名下的一个空白中转页，后端种下第一方Cookie后再跳转回前端，此时Safari会认为该后端域名是用户主动交互过的，不会拦截它的Cookie。
• 操作说明：中转页只需完成Cookie写入和302跳转逻辑即可，用户几乎感知不到跳转过程。

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