11-01 07:13 阅读 226

关注

chrome 更新跨域规则，将对网站造成影响

在 chrome v94 之后，之前没有问题的网站接口请求现在出现了错误：

Access to Css stylesheet at 'http:xx' from origin 'http://xx' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-prevate adddress space local

看到 CORS 这个让人有种跨域既视感，那么问题来了，之前能跨域现在不能了？是 chrome 增加了新的跨域规则了吗？如果是，好家伙，奇怪的知识又增加了！

为什么更新此功能

它是根据专用网络访问规范所述并进行实现的, 目的是为了防止网站对本地服务进行攻击.

怎么理解呢？假设我本地内网环境有一个 http 服务，可能是为了方便都开启了跨域访问。例如直接访问 http://127.0.0.1:8080/images 即可获取大量个人实战总结的高清无码学习资料(你品，你细品)。然后我访问了某个不怀好意的在线网站，页面中类似代码：

// 获取本地资源并上传到服务器 fetch('http://127.0.0.1:8080/images').then((res) => {   res.arrayBuffer().then(buf=> {     // Upload data to the server....     // Upload data to the server....     // Upload data to the server....   }) }); 复制代码

让我们来看看哪些地址会受到此类攻击：

以上这些都是 非公共 IP 地址块，从公共页面请求私有服务的数据，或者从私有服务请求本地数据，都会触发上述错误。

由上图可知道，以下情况都是不允许的：

• 从公共服务访问私有服务

• 从公共服务访问本地服务

• 从私有服务访问本地服务

如何解决此问题

• 访问本地数据，即访问 http://localhost (或 http://127.*.*.*, http://[::1]) 则只需要把浏览的页面升级为 https 即可

• 访问私有IP，升级目标地址和访问的页面都为 https

• 从公共服务器(例如CDN)引用本地资源

• 在试验阶段, 可以设置 chrome 浏览器 chrome://flags/#block-insecure-private-network-requests 值为 disabled, 但这预计会在 chrome v101 失效

另外，chrome目前还没有完全实现规范中的所有内容。例如除了上面的解决方案，还可能可以使用 cors 预请求进行授权。

如果使用预请求的方式，那个我们只需要在 options 响应头中设置 Access-Control-Allow-Private-Network:true 即可, 这是一种较为简单的方案。

作者：wll8
链接：https://juejin.cn/post/7025485128436547615