建站
咨詢
售后
建站咨詢
新聞中心
可組合性是 Web 的非常強(qiáng)大的一項(xiàng)能力，你可以輕而易舉的加載來(lái)自不同來(lái)源的資源來(lái)增強(qiáng)網(wǎng)頁(yè)的功能，例如：font、image、video 等等。
這些服務(wù)非常強(qiáng)大，也很方便，但是這樣的策略同樣會(huì)加大信息泄漏的風(fēng)險(xiǎn)，攻擊者可以利用某些手段泄漏你的用戶信息。
瀏覽器在阻止這些攻擊上做的也很好。同源策略我們已經(jīng)很熟悉了，它用于限制不同源的站點(diǎn)的資源訪問(wèn)。詳細(xì)可以戳瀏覽器的同源策略，這里不再過(guò)多介紹。
但是同源策略也有一些例外，任何網(wǎng)站都可以不受限制的加載下面的資源：
- 嵌入跨域 iframe
- image、script 等資源
- 使用 DOM 打開(kāi)跨域彈出窗口
對(duì)于這些資源，瀏覽器可以將各個(gè)站點(diǎn)的跨域資源分隔在不同的 Context Group 下，不同的 Context Group 下資源無(wú)法相互訪問(wèn)。
瀏覽器 Context Group 是一組共享相同上下文的 tab、window或iframe。例如，如果網(wǎng)站（https://a.example）打開(kāi)彈出窗口（https://b.example），則打開(kāi)器窗口和彈出窗口共享相同的瀏覽上下文，并且它們可以通過(guò) DOM API相互訪問(wèn)，例如 window.opener。
Spectre 漏洞
長(zhǎng)久以來(lái)，這些安全策略一直保護(hù)著網(wǎng)站的隱私數(shù)據(jù)，直到 Spectre 漏洞出現(xiàn)。
Spectre 是一個(gè)在 CPU 中被發(fā)現(xiàn)的漏洞，利用 Spectre ，攻擊者可以讀取到在統(tǒng)一瀏覽器下任意 Context Group 下的資源。
特別是在使用一些需要和計(jì)算機(jī)硬件進(jìn)行交互的 API 時(shí)：
- SharedArrayBuffer (required for WebAssembly Threads)
- performance.measureMemory()
- JS Self-Profiling API
為此，瀏覽器一度禁用了 SharedArrayBuffer 等高風(fēng)險(xiǎn)的 API。
跨域隔離
為了能夠使用這些強(qiáng)大的功能，并且保證我們的網(wǎng)站資源更加安全，我們需要為瀏覽器創(chuàng)建一個(gè)跨域隔離環(huán)境。
下文會(huì)提到很多專有術(shù)語(yǔ)，我們先把所有跨域相關(guān)的名詞列出來(lái)，以防后面搞混：
- COEP: Cross Origin Embedder Policy：跨源嵌入程序策略
- COOP: Cross Origin Opener Policy：跨源開(kāi)放者政策
- CORP: Cross Origin Resource Policy：跨源資源策略
- CORS: Cross Origin Resource Sharing：跨源資源共享
- CORB: Cross Origin Read Blocking：跨源讀取阻止
我們可以通過(guò) COOP、COEP 來(lái)創(chuàng)建隔離環(huán)境。
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
下面我們來(lái)看一下，這兩個(gè) Hedaer 的意義，以及如何進(jìn)行配置。
COOP：Cross Origin Resource Policy
COOP：跨源開(kāi)放者政策，對(duì)應(yīng)的 HTTP Header 是 Cross-Origin-Opener-Policy。
通過(guò)將 COOP 設(shè)置為 Cross-Origin-Opener-Policy: same-origin，將把從該網(wǎng)站打開(kāi)的其他不同源的窗口隔離在不同的瀏覽器 Context Group，這樣就創(chuàng)建的資源的隔離環(huán)境。
例如，如果帶有 COOP 的網(wǎng)站打開(kāi)一個(gè)新的跨域彈出頁(yè)面，則其 window.opener 屬性將為 null 。
除了 same-origin 、 COOP 還有另外兩個(gè)不同的值：
Cross-Origin-Opener-Policy: same-origin-allow-popups
帶有 same-origin-allow-popups 的頂級(jí)頁(yè)面會(huì)保留一些彈出窗口的引用，這些彈出窗口要么沒(méi)有設(shè)置 COOP ，要么通過(guò)將 COOP 設(shè)置為 unsafe-none 來(lái)選擇脫離隔離。
Cross-Origin-Opener-Policy: unsafe-none
unsafe-none 是默認(rèn)設(shè)置，允許當(dāng)前頁(yè)面和彈出頁(yè)面共享 Context Group。
CORP、CORS
要啟用跨域隔離，你還首先需要明確所有跨域資源明確被允許加載。這有兩種實(shí)現(xiàn)方式，一種是CORP，另一種是 CORS。
CORS(跨域資源共享)在我么日常解決跨域問(wèn)題時(shí)經(jīng)常會(huì)使用，這個(gè)我們已經(jīng)非常熟悉了，我們?cè)賮?lái)看看 CORP：
Cross-Origin-Resource-Policy: same-site
標(biāo)記 same-site 的資源只能從同一站點(diǎn)加載。
Cross-Origin-Resource-Policy: same-origin
標(biāo)記 same-origin 的資源只能從相同的來(lái)源加載。
Cross-Origin-Resource-Policy: cross-origin
標(biāo)記 cross-origin 的資源可以由任何網(wǎng)站加載。
注意，如果是一些通用的 CDN 資源，例如 image、font、video、等，一定要設(shè)置成 cross-origin ，否則可能會(huì)導(dǎo)致資源無(wú)法被正常加載。
- 對(duì)于你無(wú)法控制的跨域資源，可以手動(dòng)在 html 標(biāo)簽中添加 crossorigin 屬性。
COEP：Cross Origin Embedder Policy
COOP：跨源嵌入程序政策，對(duì)應(yīng)的 HTTP Header 是 Cross-Origin-Embedder -Policy。
啟用 Cross-Origin-Embedder-Policy: require-corp，你可以讓你的站點(diǎn)僅加載明確標(biāo)記為可共享的跨域資源，也就是我們上面剛剛提到的配置，或者是同域資源。
例如，上面的圖片資源如果沒(méi)有設(shè)置 Cross-Origin-Resource-Policy 將會(huì)被阻止加載。
在完全啟用 COEP 之前，可以通過(guò)使用 Cross-Origin-Embedder-Policy-Report-Only 檢查策略是否能夠正常運(yùn)行。如果有不符合規(guī)范的資源，將不會(huì)被禁止加載，而是上報(bào)到你的服務(wù)器日志中。
測(cè)試跨域隔離是否正常
當(dāng)你的 COOP、COEP 都配置完成之后，現(xiàn)在你的站點(diǎn)應(yīng)該處于跨域隔離狀態(tài)了，你可以通過(guò)使用 self.crossOriginIsolated 來(lái)判斷隔離狀態(tài)是否正常。
if(self.crossOriginIsolated){
// 跨域隔離成功
}好了，你現(xiàn)在可以愉快的使用 haredArrayBuffer, performance.measureMemory 或者 JS Self-Profiling API 這些強(qiáng)大的 API 了～
本文名稱：新的跨域策略：使用COOP、COEP為瀏覽器創(chuàng)建更安全的環(huán)境
網(wǎng)頁(yè)網(wǎng)址：http://m.5511xx.com/article/djphhcd.html
