iframe src重定向后Web BroadcastChannel跨窗口通信失败问题

核心原因 #

问题本质是浏览器的跨站点上下文隔离策略与BroadcastChannel的通信规则共同作用导致的：

1. BroadcastChannel的通信范围仅限同一站点（eTLD+1）且处于同一信任上下文的浏览上下文（窗口、iframe等）。
2. 当iframe被嵌入在跨站点顶层页面（即顶层页面与iframe最终源的eTLD+1不同，比如my.site.wow和accounts.rubbish.wow）时，浏览器会将该iframe标记为跨站点隔离iframe，限制其与其他上下文的通信能力——即使这些上下文最终同源。
3. 新窗口从google.wow（跨站点）重定向到accounts.rubbish.wow后，虽然最终与iframe同源，但由于初始导航的站点是google.wow，且iframe处于跨站点隔离状态，浏览器会将这两个上下文划分到不同的隔离组，导致BroadcastChannel消息无法互通。

而成功场景中，顶层页面my.rubbish.wow与iframe最终源accounts.rubbish.wow属于同一eTLD+1（rubbish.wow），浏览器将iframe视为同站点可信上下文，新窗口重定向到同源后会被纳入同一信任组，因此BroadcastChannel可以正常通信。

验证方式 #

可以通过以下步骤确认隔离状态：

• 在iframe和新窗口中分别打印window.origin和window.top.origin，失败场景下会看到iframe的window.top.origin与自身origin不同。
• 在Chrome中打开chrome://process-internals/，查看失败场景下iframe和新窗口是否处于不同进程（站点隔离导致进程分离）。

解决方案 #

针对该问题，有三种可行的解决思路：

1. 跳过跨站点重定向打开新窗口
   让iframe直接打开最终同源的URL（http://accounts.rubbish.wow:4002/new-window），跳过google.wow的重定向，确保新窗口初始导航与iframe同源，从而纳入同一信任组。

2. 使用postMessage替代BroadcastChannel
   postMessage支持显式指定目标源，不受跨站点隔离的信任组限制（只要目标上下文正确监听并验证源）。示例代码：

   • iframe中监听消息：

     window.addEventListener('message', (event) => {
       if (event.origin === 'http://accounts.rubbish.wow:4002') {
         const messageDiv = document.getElementById('messages');
         const newMessage = document.createElement('div');
         newMessage.textContent = 'Received message: ' + event.data;
         messageDiv.appendChild(newMessage);
       }
     });
     

   • 新窗口中发送消息：

     document.getElementById('sendMessageButton').addEventListener('click', () => {
       window.opener.postMessage('Authentication successful', 'http://accounts.rubbish.wow:4002');
     });
     

3. 配置跨站点信任头（可控域名场景）
   如果所有相关域名都在你的控制范围内，可以通过设置响应头建立跨站点信任关系：
   在accounts.rubbish.wow的服务端添加以下响应头：

   Cross-Origin-Embedder-Policy: require-corp
   Cross-Origin-Opener-Policy: same-site
   

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