Gmail OAuth2弹窗跨域无法提取code参数获取access_token咨询

你遇到的跨域错误是浏览器同源策略的默认安全限制：只要通过window.open打开的窗口跳转到了和你当前站点不同源的域名（比如Google的授权域名），主页面就没有任何权限访问该窗口的document、location等属性，你现在用定时器轮询win.document.URL的方案从原理上就不可行，没有办法绕过这个浏览器安全限制。

OAuth2授权码流程本身就要求通过回调地址传递授权码，不要尝试用轮询跨域窗口的方式取参数，按标准流程实现即可，下面是两种生产环境常用的实现方式：

方案1：静态回调页 + postMessage 通信（实现成本最低） #

这个方案不需要额外改后端逻辑，只需要在自己站点下加一个简单的静态回调页即可：

• 先去Google云控制台的OAuth客户端配置页，把授权回调地址设置为你自己域名下的静态页面路径，比如https://你的站点域名/oauth/google-callback.html
• 后端生成Google OAuth授权URL时，redirect_uri参数必须和上面配置的回调地址完全一致
• 用户在弹窗完成授权后，Google会自动将弹窗重定向到你配置的回调页，授权码code会直接拼接在这个回调页的URL参数里
• 回调页拿到URL里的code之后，通过postMessage把code传给打开弹窗的主页面，之后自动关闭弹窗
• 主页面提前监听message事件，收到code之后传给后端接口兑换access_token即可

对应代码实现 #

主页面打开弹窗+监听消息的逻辑：

// 打开授权弹窗
const authWindow = window.open(
  data.google_oauth_url,
  'Gmail授权',
  'width=800, height=600'
);

// 监听回调页发来的消息
window.addEventListener('message', (event) => {
  // 必须校验消息来源，防止恶意页面伪造授权消息
  if (event.origin !== window.location.origin) return;
  if (event.data?.type === 'GOOGLE_AUTH_SUCCESS') {
    const authCode = event.data.code;
    // 关闭弹窗
    authWindow.close();
    // 调用自有后端接口，传authCode兑换access_token
    console.log('拿到授权码', authCode);
  }
});

你自己域名下的回调页google-callback.html的代码：

<!DOCTYPE html>
<html>
<body>
  <p>授权完成，正在返回...</p>
  <script>
    const urlParams = new URLSearchParams(window.location.search);
    const authCode = urlParams.get('code');
    const authError = urlParams.get('error');

    // 向打开当前弹窗的父页面传参
    if (window.opener && !window.opener.closed) {
      window.opener.postMessage({
        type: 'GOOGLE_AUTH_SUCCESS',
        code: authCode,
        error: authError
      }, window.location.origin);
    }
    // 关闭当前弹窗
    window.close();
  </script>
</body>
</html>

方案2：服务端回调中转（安全性更高） #

如果你的授权流程需要更高的安全性，可以把回调地址设为你自己的服务端接口：

• Google OAuth配置里的redirect_uri填服务端接口地址，比如https://你的站点域名/api/oauth/google/callback
• 用户授权完成后，Google会把code作为参数请求你的这个服务端接口
• 服务端拿到code之后，可以直接在服务端发起请求兑换access_token、完成账号绑定等逻辑，处理完成之后给弹窗返回一段简单的HTML脚本，执行弹窗关闭、通知主页面授权完成的逻辑即可
• 这种方案不需要把code传到前端，能避免授权码被前端恶意脚本窃取，安全性更高

注意事项 #

• 兑换access_token的请求必须放在服务端发起，不要在前端直接调用Google的token接口，避免client_secret泄露
• 所有postMessage的消息必须校验origin字段，不要信任任意来源发来的消息
• 不要尝试用任何跨域hack手段读取Google域名下的窗口内容，现代浏览器已经全部封堵了这类绕过同源策略的方法，强行用只会导致代码兼容性极差

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