Safari下iframe与同源异标签页跨域通信方案咨询

问题背景 #

自Safari 7起，浏览器对第三方iframe启用追踪拦截机制，导致常规跨标签通信方案失效：

• iframe内触发的localStorage事件无法传递到同源的其他标签页
• iframe内使用BroadcastChannel无法向同源其他标签页发送数据
• 仅postMessage可实现主页面与iframe间的直接通信，但无法触达其他同源标签页

本人开发的sysend.js库已标注Safari 7+不支持此类场景，但希望找到可行的替代技巧。

可行解决方案 #

1. 主页面作为中转代理 #

利用主页面与iframe可通过postMessage通信的特性，将主页面作为数据中转节点：

• 步骤1：iframe通过postMessage向主页面发送需要传递的数据
• 步骤2：主页面接收到数据后，使用同源标签页可正常触发的通信机制（如localStorage事件、BroadcastChannel）将数据广播到其他同源标签页
• 示例代码：

  // iframe 侧
  window.parent.postMessage({
    type: 'cross-tab-broadcast',
    data: '需要传递的内容'
  }, '主页面的源');
  
  // 主页面侧
  window.addEventListener('message', (event) => {
    if (event.origin === 'iframe的源' && event.data.type === 'cross-tab-broadcast') {
      // 使用localStorage广播
      const key = 'cross-tab-message';
      localStorage.setItem(key, JSON.stringify(event.data.data));
      localStorage.removeItem(key); // 触发storage事件
  
      // 或使用BroadcastChannel
      const channel = new BroadcastChannel('cross-tab-channel');
      channel.postMessage(event.data.data);
      channel.close();
    }
  });
  
  // 其他同源标签页侧
  window.addEventListener('storage', (event) => {
    if (event.key === 'cross-tab-message' && event.newValue) {
      const data = JSON.parse(event.newValue);
      // 处理接收到的数据
    }
  });
  
  // 或BroadcastChannel监听
  const channel = new BroadcastChannel('cross-tab-channel');
  channel.addEventListener('message', (event) => {
    // 处理接收到的数据
  });
  

2. 利用IndexedDB的版本变更事件 #

IndexedDB在同源环境下的版本变更事件不受Safari第三方iframe拦截影响，可作为替代方案：

• 步骤1：iframe通过postMessage将数据发送到主页面
• 步骤2：主页面打开IndexedDB并修改版本，触发所有同源标签页的versionchange事件，同时将数据存入IndexedDB
• 步骤3：其他同源标签页监听versionchange事件，读取IndexedDB中的数据
• 注意：此方法需要处理IndexedDB的异步逻辑，且版本号需递增

3. 服务器端中转（极端场景备选） #

若上述客户端方案均受限，可通过服务器端进行消息中转：

• iframe将数据发送到主页面，主页面通过WebSocket或XHR将数据发送到服务器
• 服务器将数据推送给所有同源的在线标签页
• 此方案依赖服务器资源，但不受浏览器拦截机制限制

关键注意事项 #

• 所有postMessage通信需严格校验event.origin，避免安全风险
• 对于IndexedDB方案，需处理多标签页并发写入的冲突问题
• 主页面作为中转时，需确保主页面处于活跃状态，若主页面被关闭则中转失效

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