浏览器拦截第三方Cookie时，Web应用如何实现用户身份验证？

问题根因确认 #

你遇到的是浏览器ITP（智能跟踪预防）机制的限制，当前桌面端Safari、移动端Safari、移动端Chrome都会默认拦截跨上下文的第三方Cookie，你的前后端分属不同域名部署时，Rails下发的Session Cookie会被判定为第三方Cookie直接拦截，和Cookie本身的基础配置没有关系。

方案1：仅修改Cookie配置即可修复（优先推荐，改造成本最低） #

只要把前后端部署在同一个根域名的不同子域名下，就可以绕开第三方Cookie限制，不需要修改认证逻辑。比如前端用app.yourdomain.com，后端用api.yourdomain.com，同根域名下的Cookie会被判定为第一方资源，不会被ITP拦截。
对应的配置修改如下：

Rails端配置 #

1. 修改Session配置：编辑config/initializers/session_store.rb

Rails.application.config.session_store :cookie_store, 
  key: '_your_app_session',
  domain: '.yourdomain.com', # 填写你的根域名，前面加.匹配所有子域名
  tld_length: 2, # 根域名是.com/.cn这类一级域名填2，如果是.co.jp这类二级顶级域名填3
  same_site: :lax,
  secure: Rails.env.production?, # 生产环境必须开启HTTPS，Heroku默认提供HTTPS能力
  httponly: true # 开启后Cookie无法被前端JS读取，防止XSS漏洞窃取身份凭证

2. 修改跨域配置：编辑config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'https://app.yourdomain.com' # 必须明确指定前端域名，不能填*
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      credentials: true # 必须开启，允许跨域请求携带Cookie
  end
end

前端React配置 #

所有发往后端的请求都要开启携带凭证的配置，以Axios为例：

// 全局配置
axios.defaults.withCredentials = true

// 单次请求单独配置
axios.post('https://api.yourdomain.com/login', userParams, { withCredentials: true })

方案2：无法统一根域名时的替代方案 #

如果确实不能把前后端部署在同一个根域名下，再考虑更换认证机制：

• JWT认证：登录成功后后端返回JWT Token，前端把Token存在localStorage中，后续所有请求都在Authorization请求头中携带Token，后端校验Token有效性完成身份认证。需要注意做好XSS防护，不要把敏感信息写入JWT的Payload（JWT的Payload是Base64明文编码，任何人都可以解码读取），该方案的安全性低于HttpOnly Cookie方案，出现XSS漏洞时Token会被直接窃取，且默认无法在服务端主动作废未过期的Token，需要额外实现Token黑名单机制。
• 服务端跳转认证：前端跳转到后端域名的登录页，登录完成后后端把Session存在自身域名的Cookie中，再跳转回前端域名并把Session ID作为参数带回，前端把Session ID存在localStorage中，后续请求都携带该参数，后端优先读取参数中的Session ID完成认证，该方案需要额外做CSRF防护。

不推荐的操作 #

不要尝试用same_site: none + secure: true的配置绕开ITP限制，当前Safari会直接拦截符合该配置的第三方Cookie，就算临时放行最长也只能存储7天，完全不支持长期登录场景。

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