可組合性是 Web 的非常強大的一項能力，你可以輕而易舉的載入來自不同來源的資源來增強網頁的功能，例如：font、image、video等等。

這些服務非常強大，也很方便，但是這樣的策略同樣會加大資訊洩漏的風險，攻擊者可以利用某些手段洩漏你的使用者資訊。

瀏覽器在阻止這些攻擊上做的也很好。同源策略我們已經很熟悉了，它用於限制不同源的站點的資源訪問。詳細可以戳瀏覽器的同源策略，這裡不再過多介紹。

但是同源策略也有一些例外，任何網站都可以不受限制的載入下面的資源：

• 嵌入跨域iframe
• image、script等資源
• 使用 DOM 開啟跨域彈出視窗

對於這些資源，瀏覽器可以將各個站點的跨域資源分隔在不同的Context Group

瀏覽器Context Group是一組共享相同上下文的 tab、window或iframe。例如，如果網站（https://a.example）開啟彈出視窗（https://b.example），則開啟器視窗和彈出視窗共享相同的瀏覽上下文，並且它們可以通過DOM API相互訪問，例如window.opener。

Spectre 漏洞

長久以來，這些安全策略一直保護著網站的隱私資料，直到Spectre漏洞出現。

Spectre是一個在CPU中被發現的漏洞，利用Spectre，攻擊者可以讀取到在統一瀏覽器下任意Context Group下的資源。

特別是在使用一些需要和計算機硬體進行互動的API

• SharedArrayBuffer (required for WebAssembly Threads)
• performance.measureMemory()
• JS Self-Profiling API

為此，瀏覽器一度禁用了SharedArrayBuffer等高風險的API。

跨域隔離

為了能夠使用這些強大的功能，並且保證我們的網站資源更加安全，我們需要為瀏覽器建立一個跨域隔離環境。

下文會提到很多專有術語，我們先把所有跨域相關的名詞列出來，以防後面搞混：

• COEP: Cross Origin Embedder Policy：跨源嵌入程式策略
• COOP: Cross Origin Opener Policy
  ：跨源開放者政策
• CORP: Cross Origin Resource Policy：跨源資源策略
• CORS: Cross Origin Resource Sharing：跨源資源共享
• CORB: Cross Origin Read Blocking：跨源讀取阻止

我們可以通過COOP、COEP來建立隔離環境。

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

下面我們來看一下，這兩個Hedaer的意義，以及如何進行配置。

COOP：Cross Origin Resource Policy

COOP：跨源開放者政策，對應的HTTP Header是Cross-Origin-Opener-Policy。

通過將COOP設定為Cross-Origin-Opener-Policy: same-origin，將把從該網站開啟的其他不同源的視窗隔離在不同的瀏覽器Context Group，這樣就建立的資源的隔離環境。

例如，如果帶有COOP的網站開啟一個新的跨域彈出頁面，則其window.opener屬性將為null。

除了same-origin、COOP還有另外兩個不同的值：

Cross-Origin-Opener-Policy: same-origin-allow-popups

帶有same-origin-allow-popups的頂級頁面會保留一些彈出視窗的引用，這些彈出視窗要麼沒有設定COOP，要麼通過將COOP設定為unsafe-none來選擇脫離隔離。

Cross-Origin-Opener-Policy: unsafe-none

unsafe-none是預設設定，允許當前頁面和彈出頁面共享Context Group。

CORP、CORS

要啟用跨域隔離，你還首先需要明確所有跨域資源明確被允許載入。這有兩種實現方式，一種是CORP，另一種是CORS。

CORS(跨域資源共享)在我麼日常解決跨域問題時經常會使用，這個我們已經非常熟悉了，我們再來看看CORP：

Cross-Origin-Resource-Policy: same-site

標記same-site的資源只能從同一站點載入。

Cross-Origin-Resource-Policy: same-origin

標記same-origin的資源只能從相同的來源載入。

Cross-Origin-Resource-Policy: cross-origin

標記cross-origin的資源可以由任何網站載入。

注意，如果是一些通用的CDN資源，例如image、font、video、等，一定要設定成cross-origin，否則可能會導致資源無法被正常載入。

對於你無法控制的跨域資源，可以手動在 html 標籤中新增crossorigin屬性。

COEP：Cross Origin Embedder Policy

COOP：跨源嵌入程式政策，對應的HTTP Header是Cross-Origin-Embedder -Policy。

啟用Cross-Origin-Embedder-Policy: require-corp，你可以讓你的站點僅載入明確標記為可共享的跨域資源，也就是我們上面剛剛提到的配置，或者是同域資源。

如果沒有設定Cross-Origin-Resource-Policy將會被阻止載入。

在完全啟用COEP之前，可以通過使用Cross-Origin-Embedder-Policy-Report-Only檢查策略是否能夠正常執行。如果有不符合規範的資源，將不會被禁止載入，而是上報到你的伺服器日誌中。

測試跨域隔離是否正常

當你的COOP、COEP都配置完成之後，現在你的站點應該處於跨域隔離狀態了，你可以通過使用self.crossOriginIsolated來判斷隔離狀態是否正常。

if(self.crossOriginIsolated){
  // 跨域隔離成功
}

現在就可以愉快的使用haredArrayBuffer,performance.measureMemory或者JS Self-Profiling API這些強大的 API 了～