在 Iframe 中打开的域与在带有共享工作者、广播频道等的新选项卡中独立打开的域之间存在交叉通信问题

Question

我在 Iframe 中打开的域与在带有共享工作者、广播通道和本地存储的新选项卡中独立打开的域之间进行交叉通信时遇到问题。

============================

例如，看看下面的设置。

选项卡 1 (xyz.com) 有一个嵌入 abc.com 的 iframe

选项卡 2 (abc.com)

选项卡 3 (abc.com)

选项卡 4 (xyz.com) 有一个嵌入 abc.com 的 iframe

============================

我想要的是在 abc.com 的所有实例之间共享数据

我将选项卡 2 和 3 称为独立实例，将选项卡 1 和 4 称为嵌入式实例。

问题是，由于某种原因，我无法让独立实例和嵌入式实例与共享工作人员或广播通道进行通信，甚至无法与浏览器存储进行通信。但它们是同一个域！

这里另一个有趣的事情是独立选项卡可以在彼此之间正确通信，因此嵌入式选项卡（即选项卡 1 和选项卡 4）可以相互通信，类似地选项卡 3 和选项卡 4 也可以相互通信。

我有一个非常简单的广播频道代码，可以在 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);

我正在尝试在 Ventura macOs 13.6 的 chrome v117.0.5938.149 中运行此程序

我怀疑这是 chrome 最近更新的问题，因为我让它在早期版本上正常工作。

如有任何帮助，我们将不胜感激。

======================================

更新

我部署了两个网站来演示上述内容。

带有广播频道代码的网站 (https://github.com/prateekinfi/broadcast-demo-1) https://broadcastdemo-1.netlify.app/

带有嵌入式 app1 的网站 (https://github.com/prateekinfi/broadcast-demo-2) https://broadcastdemo-2.netlify.app/

======================================

更新

发现一个有类似问题的线程：浏览器现在是否阻止访问跨源 iframe 内的 localStorage？

正如这篇文章所建议的，如果我将 cookie 阻止设置为仅“跨站点跟踪 cookie”而不是“跨站点跟踪 cookie，并隔离其他跨站点 cookie”（在关于：偏好#隐私）

======================================

更新

我找到了根本原因——存储分区 https://developer.chrome.com/en/docs/privacy-sandbox/storage-partitioning/

对此真的很失望，这对于许多网络应用程序来说可能是一个突破性的改变。 :(

Answer 1

考虑

Storage Access API

。

正在努力将

SAA

扩展到存储和通信 API。

简而言之，这个想法是允许根据用户手势安全地对分区 API 进行未分区访问。

您可以在此处找到有关第三方上下文是否取消分区的完整说明：https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API#how_it_works

鉴于您决定有兴趣尝试，您应该注册 Origin 试用版：https://developer.chrome.com/origintorials/#/view_trial/577023702256844801

localStorage

可从 Chrome 120 获得，

BroadcastChannel

可从 Chrome 121 获得。 不承诺 SharedWorker 将包含在此解决方案中。

如果您不熟悉 Origin Trials，我强烈建议您阅读我上面分享的链接。

查看以下包含代码示例的解释器：https://arichiv.github.io/saa-non-cookie-storage/#use-cases