Chrome 101 版本 document.domain 将变为可读属性 解决方案

document.domain 将变为可读属性

假如我们有这样一个场景：

我们在一个页面 https://a.conardli.com 嵌入了一个 iframe 页面 https://b.conardli.com。它们的二级域名都是 conardli.com。

这时候，因为浏览器的同源策略限制，我们主页面和 iframe 肯定是无法通信的。

假如我们还有这样一个场景：

上面两个网页，在还没上线的时候，可能我们这时候要在本地调试功能，可能把它们部署在本地的不同端口上：
http://localhost:8888/
http://localhost:6666/
默认情况下它俩肯定也是不能跨域通信的，这时候我们可以把它们的 document.domain 都设置为 localhost，就可以跨过端口不同的限制了。

替代方案一

主页面：https://a.conardli.com

// 给 https://b.conardli.com 发消息
iframe.postMessage('哈喽', 'https://b.conardli.com');

// 接收信息
iframe.addEventListener('message', (event) => {
  // 把不想要的信息过滤掉
  if (event.origin !== 'https://b.conardli.com') return;

  if (event.data === 'succeeded') {
    // 干点别的 ...
  }
});

iframe 页面：https://b.conardli.com

// 接收信息
window.addEventListener('message', (event) => {
  // 拒绝掉乱七八糟的信息
  if (event.origin !== 'https://a.conardli.com') return;
  
  // 回复消息
  event.source.postMessage('succeeded', event.origin);
});

替代方案二

Origin-Agent-Cluster http 标头（规范） 允许页面请求被源（而不是站点）隔离。如果设置为 true ( Origin-Agent-Cluster: ?1 )，则要求浏览器按来源隔离页面。如果为假，则按站点。（Agent Cluster 是隔离组的规范。由于低级隔离在 API 层不可见，规范只是粗略地触及主题。）

Origin-Agent-Cluster: ?0