Chrome 在Iframe中打开的域与在具有sharedworker、广播通道等的新选项卡中独立打开的域之间进行交叉通信时出现问题

f1tvaqid  于 12个月前  发布在  Go
关注(0)|答案(1)|浏览(194)

我正面临着一个问题,而在一个Iframe中打开的域之间的交叉通信,并在一个新的选项卡与sharedworker,广播通道和本地存储独立打开。

例如,看看下面的设置。
Tab 1(xyz.com)有一个内嵌的iframe abc.com
标签2(abc.com)
Tab 3(abc.com)
Tab 4(xyz.com)嵌入了iframe abc.com

我想要的是在abc.com的所有示例之间共享数据
我将把选项卡2和3称为独立选项卡,把选项卡1和4称为嵌入式示例。
问题是我无法让独立和嵌入式示例与sharedworker或广播通道通信,甚至无法与浏览器存储通信。
这里另一个有趣的事情是独立的标签可以在彼此之间进行适当的通信,嵌入式标签也可以,即标签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);

字符串
我试图在文图拉macOS 13.6的Chromev117.0.5938.149中运行此操作
我怀疑这是Chrome最近更新的一个问题,因为我让它在早期版本上工作,因为它应该。
任何帮助将不胜感激。

更新
我部署了两个网站来演示上述内容。
带广播频道代码的网站(https://github.com/prateekinfi/broadcast-demo-1https://broadcastdemo-1.netlify.app/
App 1 screenshot
嵌入式应用程序的网站1(https://github.com/prateekinfi/broadcast-demo-2https://broadcastdemo-2.netlify.app/
App 2 screenshot

更新
找到一个有类似问题的线程:Are browsers now blocking access to localStorage inside of cross origin iframes?
正如这篇文章所建议的,如果我将cookie阻止设置为“跨站跟踪cookie”而不是“跨站跟踪cookie,并隔离其他跨站cookie”(在about:preferences#privacy下),我也可以在firefox中工作。

更新
我找到了根本原因-存储分区https://developer.chrome.com/en/docs/privacy-sandbox/storage-partitioning/
真的很失望,这可能是一个突破性的变化,为许多网络应用程序。

2hh7jdfx

2hh7jdfx1#

考虑Storage Access API
我们正在努力将SAA扩展到存储和通信API。
简而言之,其思想是允许在用户操作时安全地对分区API进行未分区访问。
有关第三方上下文是否未分区的完整说明,请访问:https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API#how_it_works
如果您已经决定要尝试一下,则应该注册Origin Trial:https://developer.chrome.com/origintrials/#/view_trial/577023702256844801
localStorage可从Chrome 120获得,BroadcastChannel可从Chrome 121获得。我们不保证此解决方案中将包括SharedWorker。
如果你不熟悉起源审判,我强烈建议你通过我上面分享的链接阅读。
请查看以下包含代码示例的说明:https://arichiv.github.io/saa-non-cookie-storage/#use-cases

相关问题