Chrome禁止了这种跨域的解决方案！！！

2022-02-15 本文已影响0人前端小白的摸爬滚打

先说结论

document.domain 将变为可读属性。

we'll show a warning in the Issues panel starting from Chrome 100, removing document.domain setter by default starting from Chrome 106.

影响

在业务中通过修改 document.domain 来实现跨域的方案将不再有效，需要马上进行改造。

document.domain 如何实现跨域访问资源

前提是：两个域名的二级域名需要是相同的

域名级数是指一个域名由多少级组成，域名的各个级别被“.”分开，最右边的那个词称为顶级域名。

顶级域名，又称一级域名，常见的有".com"、".org"、".net"、".cn"等。

"二级域名"就是在一级域名前再加一级，如"baidu.com"。

二级域名以上级别的域名，统称为子域名，不在“注册域名”的范畴中。

什么是跨域？

我们通过了一些手段，可以绕过这个同源策略的限制，让非同源的资源也能互相访问，这就是跨域。

跨域是由于浏览器的同源策略的限制，限制不同源的域名之间的以下操作：

dom 无法获取
ajax 请求无法发送
cookie、Storage、IndexDB 无法访问

同源策略

同源指的是：协议、域名、端口号需要相同

document.domain 是如何实现跨域的呢？

document.domain

默认情况下，document.domain 存放的是载入文档的服务器的主机名，可以手动设置这个属性，设置该属性有两个特点：

只能设置成当前域名，或者当前域的二级域名（比如 document.domain 为 www.baidu.com，可以设置成 baidu.com）
任何对 document.domain 的赋值操作，包括 document.domain = document.domain 都会导致端口号被重写为 null

通过这两个特点，我们就可以实现二级域名相同的不同域之间的跨域 dom 访问（就算端口不同也可以）

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

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

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

但是，当两个页面的 document.domain 都设置为 example.com 也就是二级域名的时候，浏览器就将两个来源视为同源。

这时候主页面就可以和 iframe 进行通信了（比如访问 iframe 的 document）。

另外，还有个场景，我们本地调试的时候可能经常会用到：相同域名、不同端口间的跨域。

比如，上面两个网页，在还没上线的时候，可能我们这时候要在本地调试功能，可能把它们部署在本地的不同端口上：

http://localhost:8888/
http://localhost:6666/

默认情况下它俩肯定也是不能跨域通信的，这时候我们可以把它们的 document.domain 都设置为 localhost，就可以跨过端口不同的限制了。

为什么要禁用？？

不安全

二级域名一样的域名一定属于同一个业务吗？不一定吧～～

这时候，这种跨域的方式就可能被滥用了。

所以，Chrome 决定禁用它

替代方案

不慌，还有 postMessage。

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

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

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

  if (event.data === "success") {
    // 干点别的 ...
  }
});

iframe： https://b.example.com

// 接收信息
window.addEventListener("message", event => {
  // 拒绝掉乱七八糟的信息
  if (event.origin !== "https://a.example.com") return;

  // 恢复消息
  event.source.postMessage("success", event.origin);
});

如果还是想用 document.domain 怎么办？

可能你的网站改造起来有点麻烦，或者你对 document.domain 情有独钟？

给你的网页增加下面这个 Header 就可以了：

Origin-Agent-Cluster: ?0

此时我们就可以继续使用 document.domain.