Chrome 安全策略更新-网站访问本地localhost的限制

5,116 阅读3分钟

「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

背景:由于公司业务的原因,需要在本地环境打开一个服务去获取相关的资源,前几个月还是可以正常使用。但最近测试回归,出现了在线网址访问本地localhost提示跨域的问题。经过仔细的排查发现chrome安全策略发生了更新。

chrome安全策略更新内容

Chrome 正在计划禁止从非安全网站发起的专用网络请求,目的是保护用户免受针对专用网络上的路由器和其他设备的跨站点请求伪造 (CSRF) 攻击:

  • 从 Chrome 94 开始阻止来自不安全公共网站的私有网络请求。
  • 在 Chrome 101 中结束的弃用试验。
  • 在 Chrome 92 中引入一些 Chrome 策略,允许托管的 Chrome 部署永久绕过弃用。

简而言之,就是你在线部署的网站(以http协议开头的),现在都是无法正常访问本地的开启服务资源的。

解决方法

  • 治标不治本

打开浏览器,进入chrome://flags

搜索Block insecure private network requests

image.png

设置为Disabled,Relaunch就好了。

  • 治本不根治

如果你的网站需要向 localhost 发出请求,那么你只需要将你的网站升级到 HTTPS

混合内容不会阻止以 http://localhost(或 http://127.*.*.*、http://[::1])为目标的请求,即使是从安全上下文发出的。

请注意,这里有个坑,WebKit 引擎和基于它的浏览器(比如 Safari)这里并没有遵循 W3C 混合内容规范,上面这些请求会作为混合内容并禁止访问。它们也没有实现专用网络访问,因此网站如果使用此类浏览器的客户端,需要使用 HTTP 协议,此类浏览器仍允许向 localhost 发出请求。请注意,这里有个坑,WebKit 引擎和基于它的浏览器(比如 Safari)这里并没有遵循 W3C 混合内容规范,上面这些请求会作为混合内容并禁止访问。它们也没有实现专用网络访问,因此网站如果使用此类浏览器的客户端,需要使用 HTTP 协议,此类浏览器仍允许向 localhost 发出请求。

存在的问题

如果你的网站需要向私有 IP 地址上的目标服务器发出请求,那么简单地将发起方网站升级到 HTTPS是行不通的。混合内容会阻止安全上下文通过明文 HTTP 发出请求,因此新获得安全保护的网站仍会发现自己无法发出请求。

  • 药到病除

HTTPS 只会面向公共域名办法,你需要先给你的私有 IP 注册一个公共域名,然后配置 DNS 解析把公共域名指向这个私有 IP,最后再给域名配置 TLS 证书。

除此之外,还有搭建webTransport在私有服务器和cors预检等方式,但由于业务原因笔者采用的是两端升级https协议一劳永逸。