Chrome 重大更新，將限制 localhost 訪問(wèn)？

Chrome 正在計(jì)劃禁止從非安全網(wǎng)站發(fā)起的專(zhuān)用網(wǎng)絡(luò)請(qǐng)求，目的是保護(hù)用戶免受針對(duì)專(zhuān)用網(wǎng)絡(luò)上的路由器和其他設(shè)備的跨站點(diǎn)請(qǐng)求偽造 (CSRF) 攻擊：

• 從 Chrome 94 開(kāi)始阻止來(lái)自不安全公共網(wǎng)站的私有網(wǎng)絡(luò)請(qǐng)求。
• 在 Chrome 101 中結(jié)束的棄用試驗(yàn)。
• 在 Chrome 92 中引入一些 Chrome 策略，允許托管的 Chrome 部署永久繞過(guò)棄用。

啥是專(zhuān)用網(wǎng)絡(luò)？

在互聯(lián)網(wǎng)的地址架構(gòu)中，專(zhuān)用網(wǎng)絡(luò)是指遵守 RFC 1918（IPV4）和 RFC 4193（IPV6）規(guī)范，使用專(zhuān)用 IP 地址空間的網(wǎng)絡(luò)。私有 IP 無(wú)法直接連接互聯(lián)網(wǎng)，需要使用網(wǎng)絡(luò)地址轉(zhuǎn)換（Network Address Translator，NAT）或者代理服務(wù)器 （proxy server）來(lái)實(shí)現(xiàn)。

一般，我們?cè)谄髽I(yè)里搭建的局域網(wǎng)、家庭網(wǎng)絡(luò)里的局域網(wǎng)、你本地的 localhost ，都屬于專(zhuān)用網(wǎng)絡(luò)。

專(zhuān)用網(wǎng)絡(luò)訪問(wèn)規(guī)范

專(zhuān)用網(wǎng)絡(luò)訪問(wèn)規(guī)范（以前稱(chēng)為 CORS-RFC1918）會(huì)限制網(wǎng)站向?qū)Ｓ镁W(wǎng)絡(luò)上的服務(wù)器發(fā)送請(qǐng)求的能力。它只允許來(lái)自安全上下文（HTTPS）的此類(lèi)請(qǐng)求。該規(guī)范還擴(kuò)展了跨域資源共享 (CORS) 協(xié)議，因此網(wǎng)站現(xiàn)在必須要經(jīng)過(guò)專(zhuān)用網(wǎng)絡(luò)上的服務(wù)器授權(quán)會(huì)才能發(fā)送請(qǐng)求。

私有網(wǎng)絡(luò)請(qǐng)求是其目標(biāo)服務(wù)器的 IP 地址比獲取請(qǐng)求發(fā)起者的 IP 地址更私有的請(qǐng)求。例如，從公共網(wǎng)站 ( https://example.com) 到私有網(wǎng)站 (http://router.local) 的請(qǐng)求，或從私有網(wǎng)站到 localhost 的請(qǐng)求。

我們?cè)陂_(kāi)發(fā)過(guò)程中，這幾種情況實(shí)際上是比較常見(jiàn)的，所以需要開(kāi)發(fā)者提前試用并作出應(yīng)對(duì)。

訪問(wèn) localhost

如果你的網(wǎng)站需要向 localhost 發(fā)出請(qǐng)求，那么你只需要將你的網(wǎng)站升級(jí)到 HTTPS。

混合內(nèi)容不會(huì)阻止以 http://localhost（或 http://127.*.*.*、http://[::1]）為目標(biāo)的請(qǐng)求，即使是從安全上下文發(fā)出的。

請(qǐng)注意，這里有個(gè)坑，WebKit 引擎和基于它的瀏覽器（比如 Safari）這里并沒(méi)有遵循 W3C 混合內(nèi)容規(guī)范，上面這些請(qǐng)求會(huì)作為混合內(nèi)容并禁止訪問(wèn)。它們也沒(méi)有實(shí)現(xiàn)專(zhuān)用網(wǎng)絡(luò)訪問(wèn)，因此網(wǎng)站如果使用此類(lèi)瀏覽器的客戶端，需要試用 HTTP 協(xié)議，此類(lèi)瀏覽器仍允許向 localhost 發(fā)出請(qǐng)求。

訪問(wèn)私有 IP

如果你的網(wǎng)站需要向私有 IP 地址上的目標(biāo)服務(wù)器發(fā)出請(qǐng)求，那么簡(jiǎn)單地將發(fā)起方網(wǎng)站升級(jí)到 HTTPS是行不通的?；旌蟽?nèi)容會(huì)阻止安全上下文通過(guò)明文 HTTP 發(fā)出請(qǐng)求，因此新獲得安全保護(hù)的網(wǎng)站仍會(huì)發(fā)現(xiàn)自己無(wú)法發(fā)出請(qǐng)求。有幾種方法可以解決這個(gè)問(wèn)題：

將兩端都升級(jí)為HTTPS

這個(gè)方案難度有點(diǎn)大，因?yàn)?HTTPS 只會(huì)面向公共域名辦法，你需要先給你的私有 IP 注冊(cè)一個(gè)公共域名，然后配置 DNS 解析把公共域名指向這個(gè)私有 IP，最后再給域名配置 TLS 證書(shū)。

使用 WebTransport

這個(gè)方案不需要自己控制 DNS 解析，你需要在私有網(wǎng)絡(luò)上自己搭建一個(gè) WebTransport 服務(wù)器。

WebTransport 是 WebRTC 體系下的一套瀏覽器API ，提供低延遲，client 和 server之間雙向通信的能力。

• WebTransport 提供基于 QUIC 和 HTTP3 實(shí)現(xiàn)的API ，自動(dòng)獲得 QUIC 和 HTTP3本身的特性，比如應(yīng)用層的擁塞，避免隊(duì)頭阻塞。
• 雙向通信的能力，多個(gè)傳輸通道復(fù)用一個(gè)連接的能力，能夠很好的替代 WebSocket。
• 提供發(fā)送/接受不可靠 UDP 的能力，這個(gè)是瀏覽器一直欠缺的能力。

重要的是，通過(guò)使用 WebTransport 的證書(shū)鎖定機(jī)制，你可以繞過(guò)缺少由受信任 CA 簽署的有效 TLS 證書(shū)的問(wèn)題。

反向嵌入。

網(wǎng)站的框架可以從私有服務(wù)器獲取，然后從公共服務(wù)器(如CDN)獲取它的所有子資源(如 script 或 image)。這樣生成的網(wǎng)站可以向私有服務(wù)器發(fā)出請(qǐng)求，因?yàn)檫@些請(qǐng)求是同源的，它甚至可以向其他使用私有 ip 發(fā)出請(qǐng)求。

這個(gè)方案可以臨時(shí)用，官網(wǎng)所可能以后對(duì)這種情況也會(huì)有所限制。

CORS 預(yù)檢請(qǐng)求的變化

CORS 預(yù)檢請(qǐng)求是一個(gè) HTTP OPTIONS 請(qǐng)求，它帶有一些 Access-Control-Request-* 標(biāo)頭，表明后續(xù)請(qǐng)求的性質(zhì)，例如是否允許跨域訪問(wèn)。

專(zhuān)用網(wǎng)絡(luò)訪問(wèn)規(guī)范 的第二部分是使用 CORS 預(yù)檢請(qǐng)求 來(lái)控制從安全上下文發(fā)起的專(zhuān)用網(wǎng)絡(luò)請(qǐng)求。即使請(qǐng)求是從安全上下文發(fā)起的，目標(biāo)服務(wù)器也會(huì)被要求向發(fā)起者提供明確的授權(quán)，只有在授權(quán)成功時(shí)才會(huì)發(fā)送請(qǐng)求。

最后

大家趕快檢查一下自己負(fù)責(zé)的網(wǎng)站是否有專(zhuān)有網(wǎng)絡(luò)訪問(wèn)的情況，有的話趕快處理起來(lái)吧～

螞蟻前端正急缺人才，如果你想加入我們，歡迎加我微信和我聯(lián)系。另外如果你想加入前端、面試、理財(cái)?shù)冉涣魅海蛘吣阌腥魏纹渌虑橄牒臀医涣饕部梢蕴砑游业膫€(gè)人微信 1076629390 。

文中如有錯(cuò)誤，歡迎在后臺(tái)和我留言，如果這篇文章幫助到了你，歡迎點(diǎn)贊、在看和關(guān)注。你的點(diǎn)贊、在看和關(guān)注是對(duì)我最大的支持！

點(diǎn)贊、在看支持作者??