谷歌OAuth首次点击弹窗被拦截 出现strict-dynamic CSP错误

问题原因 #

1. 弹窗拦截触发：当前逻辑是用户首次点击按钮时才异步加载auth2模块，加载完成后才触发授权弹窗。移动端浏览器的弹窗拦截规则要求弹窗必须在用户交互的同步上下文中触发，gapi.load是异步操作，等回调执行时已经脱离了用户点击的上下文，因此首次弹窗被拦截。第二次点击时auth2已经加载完成，授权逻辑同步执行，符合弹窗触发要求，因此可以正常弹出。
2. CSP报错：你看到的strict-dynamic报错是因为部分老旧移动端浏览器不支持CSP的strict-dynamic指令，该报错本身不会直接导致弹窗失败，但如果你的CSP没有额外配置谷歌相关域名，可能会导致谷歌脚本加载异常。

修复方案 #

方案1：预加载auth2模块（推荐） #

在页面初始化阶段提前加载并初始化auth2模块，不要等到用户点击时才加载，确保点击按钮时可以直接同步触发授权请求。
示例代码：

// 页面初始化阶段执行（如Vue的onMounted、React的useEffect、原生DOMContentLoaded回调中）
let isGapiAuth2Ready = false
window.gapi.load("auth2", () => {
  // 提前完成初始化
  window.gapi.auth2.init({
    client_id: process.env.GOOGLE_CLIENT_ID,
    scope: "email profile"
  })
  isGapiAuth2Ready = true
})

调整原有登录函数：

export const googleOauth = (params) => {
  return new Promise((resolve, reject) => {
    function execAuthorize() {
      window.gapi.auth2.authorize(
        {
          client_id: process.env.GOOGLE_CLIENT_ID,
          scope: "email profile",
          response_type: "code",
        },
        (response) => {
          if (response && !response.error) {
            const data = { data: { ...response, ...params } }
            post(oauthUrl, data)
              .then((res) => resolve(res))
              .catch((error) => reject(error))
          } else {
            reject(response.error)
          }
        }
      )
    }

    if (isGapiAuth2Ready) {
      execAuthorize()
      return
    }
    // 极端情况还未加载完成，可增加加载提示避免用户重复点击
    window.gapi.load("auth2", execAuthorize)
  })
}

方案2：修复CSP配置 #

如果你的站点配置了自定义CSP响应头，调整script-src指令，补充谷歌相关域名作为降级，兼容不支持strict-dynamic的老旧浏览器：

script-src 'nonce-你的随机nonce值' 'strict-dynamic' https://apis.google.com https://accounts.google.com;

这样就算strict-dynamic被忽略，浏览器也会允许加载谷歌域名下的脚本，不会出现加载异常。

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