GSI谷歌登录时g_csrf_token未通过Cookie传递到子域问题

问题根因 #

你遇到的是谷歌身份服务(GSI)常规登录按钮的已知限制：data-state_cookie_domain 配置项仅对「One Tap 一键登录」功能生效，标准的「Sign in with Google」按钮生成的g_csrf_token Cookie，默认会固定使用当前页面域名（也就是site.example.com）作为Cookie的域名，且会设置Cookie的SameSite=Lax属性。
当按钮自动向跨子域的api.site.example.com发起POST请求时，Chrome的Cookie安全策略会判定该Cookie不满足跨子域携带条件，因此被拦截。

推荐解决方案 #

方案1：使用自定义回调接管登录流程（最稳妥） #

放弃按钮自带的data-login_uri自动提交逻辑，通过data-callback绑定自定义登录处理函数，直接在前端读取当前域名下的g_csrf_token后，手动向后端发起请求，完全绕开Cookie跨子域携带的限制。

代码示例

1. 页面引入GSI SDK并配置回调：

<script src="https://accounts.google.com/gsi/client" async defer></script>
<div
  id="g_id_onload"
  data-client_id="你的Google OAuth客户端ID"
  data-callback="handleGoogleLogin"
  data-auto_prompt="false"
></div>
<div class="g_id_signin" data-type="standard"></div>

2. 自定义登录处理函数：

function handleGoogleLogin(loginResponse) {
  // 从当前页面Cookie中读取g_csrf_token
  const csrfToken = document.cookie
    .split('; ')
    .find(item => item.startsWith('g_csrf_token='))
    ?.split('=')[1];

  // 手动向后端发起登录请求
  fetch('https://api.site.example.com/auth/google/callback', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      credential: loginResponse.credential,
      g_csrf_token: csrfToken
    })
  })
  .then(res => res.json())
  .then(authResult => {
    // 处理登录成功后的跳转、状态更新等逻辑
  })
}

方案2：保留自动提交逻辑，调整接口路由 #

如果不想修改前端登录逻辑，可以在主域site.example.com下配置反向代理规则，将登录请求路径（比如/auth/google/callback）的请求转发到api.site.example.com对应的接口地址，此时请求的域名和Cookie域名完全匹配，不会触发Cookie拦截规则。

额外注意事项 #

• 后端校验Google ID Token时，必须同时校验iss（签发方）、aud（受众，即你的客户端ID）字段的合法性，不要仅依赖CSRF校验作为唯一安全校验手段
• 如果使用Node.js作为后端，直接使用google-auth-library提供的verifyIdToken方法即可完成全部合规校验

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