同域下Iframe嵌入与独立标签页跨通信异常求助

场景说明 #

• 标签页1（xyz.com）：嵌入abc.com的iframe
• 标签页2（abc.com）：独立打开
• 标签页3（abc.com）：独立打开
• 标签页4（xyz.com）：嵌入abc.com的iframe

需求：实现所有abc.com实例间的数据共享，包括独立打开的标签页2、3，以及嵌入在其他域页面中的iframe实例（标签页1、4内的abc.com iframe）

问题现象 #

独立打开的abc.com实例间（标签页2、3）、嵌入在同域父页面的abc.com iframe实例间（标签页1、4内的iframe）均可正常通信，但独立实例与嵌入实例之间无法互通，尽管它们均属于abc.com域。

测试代码（BroadcastChannel） #

运行在abc.com页面的测试代码如下：

const channel = new BroadcastChannel("abc-channel");

channel.onmessage = (e) => {
  console.log("on message", e);
};

setInterval(() => {
  console.log(" setInterval running");
  channel.postMessage("custom message");
}, 5000);

测试环境 #

Chrome v117.0.5938.149（macOS Ventura 13.6），此前版本可正常运行，怀疑是Chrome近期更新导致该问题。

根因定位 #

问题根源为**Storage Partitioning（存储分区）**机制，该变更可能对大量Web应用产生影响。

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