跨域环境下通过PostMessage获取认证后URL参数的方案咨询

问题背景 #

我拥有www.myapp.com和www.myfinalurl.com两个域名，可修改两处的JavaScript代码。www.myapp.com需要打开指向www.myredirect.com的弹窗，该页面会自动重定向到带查询参数的www.myfinalurl.com。由于跨域限制，无法直接从www.myapp.com获取www.myfinalurl.com的URL参数，必须用PostMessage实现通信。

但弹窗打开后用户可能需要完成登录（耗时不固定），导致重定向完成时间不确定。之前用5秒延迟发送PostMessage的方案在登录耗时较长时失效，想找可行的解决办法，同时想知道定时重复发送PostMessage直至收到回复是否为合理实践。

可行解决方案 #

方案1：让www.myfinalurl.com主动发起通信（更可靠）

既然能控制www.myfinalurl.com的代码，最稳妥的方式是当该页面加载完成后，主动向父窗口（www.myapp.com）发送消息，无需等待父窗口触发。这样完全避开了重定向/登录耗时不确定的问题。

方案2：父窗口定时轮询发送请求（需加安全限制）

定时重复发送PostMessage是可行的实践，但必须做好以下两点：

• 限制轮询次数或设置超时时间，避免无限循环消耗资源
• 严格验证消息的origin，防止恶意网站冒充通信

修正后的代码示例 #

www.myapp.com 代码（轮询方案）

const authPopup = window.open(passUrl, '_blank', 'width=640,height=480,menubar=no,toolbar=no');
let pollInterval;
let pollCount = 0;
const MAX_POLLS = 30; // 最多轮询30次（约30秒）

// 监听来自myfinalurl的回复
window.addEventListener('message', (event) => {
  // 严格验证来源，防止跨域攻击
  if (event.origin !== 'https://www.myfinalurl.com') return;

  const thisUrl = event.data;
  Shiny.setInputValue('UrlWithParams', thisUrl, { priority: 'event' });
  authPopup.close();
  clearInterval(pollInterval); // 收到回复后停止轮询
}, false);

// 轮询发送请求
pollInterval = setInterval(() => {
  if (pollCount >= MAX_POLLS) {
    clearInterval(pollInterval);
    authPopup.close(); // 超时关闭弹窗
    return;
  }
  try {
    authPopup.postMessage('request-url', 'https://www.myfinalurl.com');
    pollCount++;
  } catch (e) {
    // 弹窗未加载完成时会报错，忽略即可
  }
}, 1000); // 每秒发送一次

www.myfinalurl.com 代码（主动发送+兼容轮询）

window.addEventListener('load', () => {
  const myLocation = window.location.href;
  // 向父窗口发送消息，严格指定目标origin
  window.opener?.postMessage(myLocation, 'https://www.myapp.com');
});

// 同时保留监听父窗口请求的逻辑（兼容轮询方案）
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://www.myapp.com') return;
  if (event.data === 'request-url') {
    event.source.postMessage(window.location.href, event.origin);
  }
});

关键注意事项 #

• 所有PostMessage通信必须验证event.origin，只允许指定的域名，避免XSS或恶意通信
• 使用window.opener时要加可选链（?.），防止弹窗被用户手动关闭后报错
• 轮询方案一定要设置最大次数，防止无限循环

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