使用window.opener引发CORS错误，跨域帧访问问题求助

我之前碰到过几乎一模一样的情况！明明父窗口和弹出窗口只有哈希部分不同，却时不时触发DOMException: Blocked a frame with origin from accessing a cross-origin frame，折腾了好一阵才找到原因和解决办法。

为什么会间歇性出现这个问题？ #

虽然同源策略中哈希部分不影响同源判断，但生产环境的一些边缘场景可能会触发浏览器的安全校验：

• 隐性的origin不一致：比如生产环境存在重定向（比如不带www的域名被重定向到带www，或者HTTP重定向到HTTPS），如果弹出窗口是在重定向之前打开的，父窗口完成重定向后origin就变了，此时子窗口访问window.opener就会跨域。
• 浏览器缓存/Service Worker干扰：旧的缓存资源或者Service Worker可能导致页面的origin判断出现异常，尤其是在页面频繁更新的生产环境。
• 父窗口的异步操作：如果父窗口在弹出子窗口后，有异步的路由跳转（哪怕只是哈希变化，但某些前端路由实现可能会触发页面状态的异常），也可能导致window.opener的上下文被篡改。

可靠的解决方案 #

最稳妥的方式是放弃直接访问window.opener的属性，改用**postMessage API**进行跨窗口通信，这是浏览器官方推荐的安全通信方式，能规避所有同源相关的边缘问题。

父窗口代码

// 打开子窗口
const childWindow = window.open('/application/#page-name');

// 监听子窗口的消息请求
window.addEventListener('message', (event) => {
  // 严格验证消息来源，防止恶意注入
  if (event.origin !== window.origin) return;
  
  if (event.data.type === 'GET_GLOBALS') {
    // 发送全局数据给子窗口
    childWindow.postMessage({
      type: 'GLOBALS_DATA',
      payload: window.globalsCache
    }, window.origin);
  }
});

子窗口代码

// 监听父窗口返回的数据
window.addEventListener('message', (event) => {
  if (event.origin !== window.origin) return;
  
  if (event.data.type === 'GLOBALS_DATA') {
    const globals = event.data.payload;
    // 在这里处理拿到的全局数据
    console.log('获取到全局数据:', globals);
  }
});

// 向父窗口发送数据请求
window.opener.postMessage({ type: 'GET_GLOBALS' }, window.origin);

额外的排查点 #

如果还是想排查间歇性跨域的根源，可以做这些检查：

• 确认生产环境中父窗口和子窗口的协议、域名、端口完全一致（比如都是https://www.example.com，不能一个带www一个不带）。
• 检查前端路由配置，确保弹出窗口的URL没有被意外重定向到其他origin。
• 清理生产环境的浏览器缓存和Service Worker缓存，避免旧代码干扰。

我当时就是用postMessage替换了直接访问window.opener.globalsCache的方式，之后就再也没出现过这个间歇性跨域的问题了！

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