Twitter OAuth2弹窗实现遇异常：窗口状态误判及技术咨询

问题背景 #

我通过弹窗实现OAuth登录，Google和Discord均正常，但Twitter出现两个异常：

1. Twitter OAuth页面加载完成后，oAuthWindow.closed返回true（窗口实际未关闭），导致关闭检测逻辑失效；
2. 子窗口的window.opener为null，丢失父窗口引用，无法回调授权结果。

当前实现逻辑：openOAuthWindow函数通过OAuth URL创建弹窗，将Promise的resolve/reject存入window对象；子窗口重定向到redirect_uri时，通过window.opener调用父窗口函数后关闭，父窗口清理函数并处理Promise；同时用setInterval检测窗口关闭状态，若未完成授权则返回OAuthError。

1. 其他检测窗口开闭状态的方法 #

• 监听unload/beforeunload事件：在弹窗加载完成后，给弹窗的window绑定unload事件，窗口关闭时触发回调。注意Twitter页面跳转也会触发该事件，需结合fulfilled状态判断是否为用户主动关闭。
• postMessage心跳检测：父窗口每隔1秒给弹窗发送ping消息，你的redirect_uri页面收到消息后回复pong。如果连续几次未收到回复，且授权未完成，则判定窗口已关闭。示例代码：

  let heartbeatInterval = setInterval(() => {
    if (oAuthWindow && !oAuthWindow.closed) {
      try {
        oAuthWindow.postMessage('ping', 'https://your-domain.com');
      } catch (e) {
        clearInterval(heartbeatInterval);
        if (!fulfilled) {
          window.returnOAuthError!(new OAuthError("User closed the window", ERROR_STATUSES.USER_CLOSED_OAUTH_WINDOW));
        }
      }
    }
  }, 1000);
  
  // 监听弹窗回复
  window.addEventListener('message', (event) => {
    if (event.data === 'pong' && event.origin === 'https://your-domain.com') {
      // 窗口正常，无需处理
    }
  });
  

  注：Twitter的OAuth页面跨域无法回复消息，此方法主要用于检测用户主动关闭你的redirect_uri页面的情况。
• 尝试聚焦窗口：调用oAuthWindow.focus()，若调用抛出异常，说明窗口大概率已关闭。但部分浏览器允许跨域窗口聚焦，此方法可靠性有限，仅作补充。

2. 弹窗OAuth实现的替代方案 #

• postMessage标准方案：将redirect_uri设置为你的域名下的页面，该页面通过postMessage将授权码和state发送给父窗口，父窗口监听message事件接收数据。此方式不依赖window.opener直接调用，兼容性更好，也能规避部分跨域问题。
• 跳转式授权：放弃弹窗，直接跳转至Twitter授权页面，用户完成授权后跳回你的站点。这种方式无弹窗跨域问题，实现更简单，只是用户体验略有不同（页面会刷新）。
• 使用成熟OAuth库：针对Twitter的OAuth 1.0a协议，可使用oauth-1.0a库；或直接使用Twitter官方SDK，这些库已经处理了不同平台的兼容性细节，减少自定义实现的漏洞。

3. 弹窗实现OAuth2需规避的安全缺陷 #

• noopener参数风险：必须确保弹窗未添加noopener参数，否则会丢失window.opener引用。但这会带来风险：弹窗页面可通过window.opener操控父页面，因此必须保证redirect_uri是完全信任的域名，避免钓鱼网站篡改父页面内容。
• 跨域消息验证：使用postMessage时，必须严格校验event.origin，只处理来自可信域名的消息，防止恶意网站伪造授权数据。
• CSRF防护：生成随机的state参数并存入用户会话，授权成功后验证返回的state是否与存储值一致，防止跨站请求伪造攻击。
• 弹窗拦截问题：浏览器会拦截非用户主动触发的弹窗（比如异步逻辑中打开的弹窗），所以必须在用户点击事件的同步回调中打开弹窗。

实现代码 #

public static async openOAuthWindow(url: string, windowFeatures: string = "width=500,height=600,popup=true"): Promise<CodeAndState> {
    if(!windowFeatures.includes("noopener")) {
        const oAuthWindow: Window = window.open(url, "_blank", windowFeatures)!;

        let fulfilled = false;

        const removePromiseCallbacksAndFullfill = () => {
            delete window.returnAuthCode;
            delete window.returnOAuthError;
            fulfilled = true;
        };

        let resultPromise: Promise<CodeAndState> = new Promise<CodeAndState>((resolve, reject) => {
            window.returnAuthCode = resolve;
            window.returnOAuthError = reject;
        }).then((codeAndState: CodeAndState) => {
            removePromiseCallbacksAndFullfill();
            return codeAndState;
        }).catch((error) => {
            removePromiseCallbacksAndFullfill();
            return Promise.reject(error);
        });

        let windowAliveInterval = setInterval(() => {
            if (oAuthWindow.closed) {
                clearInterval(windowAliveInterval);
                if(!fulfilled) {
                    const error = new OAuthError("User closed the window", ERROR_STATUSES.USER_CLOSED_OAUTH_WINDOW);
                    window.returnOAuthError!(error);
                }
            }
        }, 500);

        return resultPromise;
    }
    throw new Error("OAuth window sends code to the parent window, so it must be opened without 'noopener' feature");
}

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