如何解决弹窗访问window对象时的CORS问题（Discord OAuth场景）

问题描述 #

在使用Discord API进行OAuth认证时，能够从URL中获取授权码，但遇到CORS错误：

SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame

相关代码如下：

const CLIENT_URL = window.location.href;
const popup = window.open(
  ` https://discord.com/oauth2/authorize?response_type=code&client_id=*******&scope=identify&guilds.join&state=*******&redirect_uri=http://localhost:3000&prompt=consent
`,
  "popup",
  "popup=true"
);

const checkPopup = setInterval(() => {
  if (popup.window.location.href.includes(CLIENT_URL)) {
    const params: any = new Proxy(
      new URLSearchParams(popup.window.location.search),
      {
        get: (searchParams, prop) => searchParams.get(prop),
      }
    );
    let value = params?.code;
    console.log(value);
    popup.close();
  }

  if (!popup || !popup.closed) return;
  clearInterval(checkPopup);
}, 1000);
};

解决方法 #

1. 使用postMessage实现跨窗口安全通信 #

浏览器同源策略禁止直接访问跨域窗口的location对象，postMessage是标准的安全解决方案：

• 新增专门的回调页面（如http://localhost:3000/oauth-callback），负责提取授权码并发送给主窗口。
• 主窗口通过监听message事件接收授权码。

主窗口代码修改：

const popup = window.open(
  `https://discord.com/oauth2/authorize?response_type=code&client_id=*******&scope=identify%20guilds.join&state=*******&redirect_uri=http://localhost:3000/oauth-callback&prompt=consent`,
  "popup",
  "width=600,height=800"
);

// 监听回调页面的消息，验证来源确保安全
window.addEventListener('message', (event) => {
  if (event.origin !== 'http://localhost:3000') return;
  if (event.data.type === 'discord-oauth-code') {
    const authCode = event.data.code;
    console.log('获取到授权码:', authCode);
    popup.close();
    // 这里可以继续处理授权码，比如发给后端换取token
  }
});

回调页面（oauth-callback.html）代码：

<!DOCTYPE html>
<html>
<body>
<script>
// 从URL参数中提取授权码
const searchParams = new URLSearchParams(window.location.search);
const authCode = searchParams.get('code');

// 向主窗口发送授权码
window.opener.postMessage(
  { type: 'discord-oauth-code', code: authCode },
  'http://localhost:3000'
);

// 自动关闭弹窗
window.close();
</script>
</body>
</html>

2. 修正Discord OAuth配置 #

在Discord开发者后台的OAuth2 → 重定向URI列表中，添加http://localhost:3000/oauth-callback，否则Discord会拒绝跳转请求。

3. 移除跨域窗口的直接访问 #

原代码中popup.window.location.href.includes(CLIENT_URL)会触发跨域限制——弹窗跳转过程中会短暂停留在Discord的跨域页面，此时访问其location会被浏览器拦截。使用postMessage方案可彻底避免该问题。

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