啟用跨來源隔離功能的指南

跨來源隔離可讓網頁使用強大的功能，例如 SharedArrayBuffer。本文將說明如何在網站上啟用跨來源隔離。

Eiji Kitamura

本指南說明如何啟用跨來源隔離。如要使用 SharedArrayBuffer、performance.measureUserAgentSpecificMemory() 或更精準的高解析度計時器，就需要跨來源隔離。

如果您想啟用跨來源隔離，請評估這會對網站上的其他跨來源資源 (例如廣告刊登位置) 造成哪些影響。

判斷使用 SharedArrayBuffer 在網站上的位置

自 Chrome 92 版起，在沒有跨來源隔離的情況下，使用 SharedArrayBuffer 的功能將無法繼續運作。如果您是因為 SharedArrayBuffer 淘汰訊息而到達這個頁面，可能是因為您的網站或該網頁上的某個內嵌資源使用了 SharedArrayBuffer。為確保您的網站不會因淘汰而中斷運作，請先找出這項工具的使用位置。

目標：

• 如要繼續使用 SharedArrayBuffer，請開啟跨來源隔離。
• 如果您需要使用 SharedArrayBuffer 的第三方程式碼，請通知第三方供應商採取行動。

如果您不確定在網站上使用 SharedArrayBuffer 的位置，可以透過兩種方式得知：

• 使用 Chrome 開發人員工具
• (進階) 使用淘汰報表

如果您已經知道自己在何處使用 SharedArrayBuffer，請跳至「分析跨來源隔離的影響」。

使用 Chrome 開發人員工具

Chrome 開發人員工具可讓開發人員檢查網站。

1. 在您認為可能使用 SharedArrayBuffer 的頁面上，開啟 Chrome 開發人員工具。
2. 選取「Console」面板。
3. 如果該網頁使用 SharedArrayBuffer，系統會顯示以下訊息：

   [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
   

4. 訊息結尾的檔案名稱和行號 (例如 common-bundle.js:535) 表示 SharedArrayBuffer 的來源。如果是第三方程式庫，請與開發人員聯絡來修正問題。如果在網站中導入這項功能，請按照下方指南的說明啟用跨來源隔離功能。

在未跨來源隔離的情況下使用 SharedArrayBuffer 時，DevToools 控制台警告。

(進階) 使用淘汰報表

部分瀏覽器具有淘汰 API 至指定端點的回報功能。

1. 設定淘汰報表伺服器並取得報表網址。您可以使用公用服務，或是自行建立服務來達成。
2. 使用網址，將下列 HTTP 標頭設為可能提供 SharedArrayBuffer 的網頁。

   Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
   

3. 標頭開始生效後，您註冊的端點應會開始收集淘汰報表。

如需實作範例，請前往：https://cross-origin-isolation.glitch.me。

分析跨來源隔離的影響

如果您可以評估啟用跨來源隔離對網站的影響，而不會實際破壞任何項目，那該有多好？方法是使用 Cross-Origin-Opener-Policy-Report-Only 和 Cross-Origin-Embedder-Policy-Report-Only HTTP 標頭。

1. 在頂層文件上設定 Cross-Origin-Opener-Policy-Report-Only: same-origin。顧名思義，這個標頭只會傳送 COOP: same-origin「對」網站影響的報告，實際上並不會停用與彈出式視窗的通訊。
2. 設定報告並設定網路伺服器，藉此接收及儲存報表。
3. 在頂層文件上設定 Cross-Origin-Embedder-Policy-Report-Only: require-corp。同樣地，這個標頭可讓您查看啟用 COEP: require-corp 的影響，而不會實際影響網站的運作。您可以設定這個標頭，將報表傳送至您在上一個步驟中設定的報表伺服器。

注意： 您還可以在 Chrome 開發人員工具的「網路」面板中啟用「網域」欄，大致瞭解哪些資源會受到影響。

注意： 啟用跨來源隔離功能後，系統會禁止載入未明確選擇加入的跨來源資源，同時會造成頂層文件無法與彈出式視窗通訊。我們一直在探索如何大規模部署 Cross-Origin-Resource-Policy，因為跨來源隔離要求必須明確選擇啟用所有子資源。而我們之後想到的是相反的方向：一種是 COEP「無憑證」模式，這種模式會移除所有憑證，在沒有 CORP 標頭的情況下載入資源。希望以上說明能夠減輕您確保子資源傳送 Cross-Origin-Resource-Policy 標頭的負擔。雖然 Chrome 第 96 版起支援 credentialless 模式，但其他瀏覽器尚未支援這個模式，但部分開發人員在這個階段部署 COOP 或 COEP 可能並非易事。此外，這也是 Cross-Origin-Opener-Policy: same-origin 標頭會中斷需要跨來源視窗互動 (例如 OAuth 和付款) 的整合。為緩解這個問題，我們正試圖放寬條件，為 Cross-Origin-Opener-Policy: same-origin-allow-popups 啟用跨來源隔離。這樣系統就能與自行開啟的視窗通訊。如果您想啟用跨來源隔離，但遭到這些挑戰封鎖，建議註冊來源試用，並等待新模式開放使用。我們預計在推出這些新模式前終止來源試用，

減少跨來源隔離的影響

確定哪些資源會受到跨來源隔離的影響後，您可以參考以下通用指南，瞭解如何實際啟用這些跨來源資源：

1. 在圖片、指令碼、樣式表和 iframe 等跨來源資源上，設定 Cross-Origin-Resource-Policy: cross-origin 標頭。在相同網站資源上設定 Cross-Origin-Resource-Policy: same-site 標頭。
2. 如果是可使用 CORS 載入的資源，請在 HTML 標記 (例如 <img src="example.jpg" crossorigin>) 中設定 crossorigin 屬性，確保已啟用該函式。對於 JavaScript 擷取要求，請務必將 request.mode 設為 cors。
3. 如果您想在已載入的 iframe 中使用 SharedArrayBuffer 等強大功能，請將 allow="cross-origin-isolated" 附加至 <iframe>。
4. 如果載入 iframe 或工作站指令碼的跨來源資源涉及另一層 iframe 或工作站指令碼，請在繼續之前以遞迴方式套用本節所述的步驟。
5. 確認已選擇採用所有跨來源資源後，請在 iframe 和工作站指令碼上設定 Cross-Origin-Embedder-Policy: require-corp 標頭 (無論相同來源或跨來源為何，此為必要步驟)。
6. 確認沒有跨來源彈出式視窗，需要透過 postMessage() 通訊。無法在啟用跨來源隔離的情況下保持這些模組的運作。您可以將通訊移至未跨來源隔離的其他文件，或使用其他通訊方法 (例如 HTTP 要求)。

啟用跨來源隔離

在受到跨來源隔離的影響緩解後，以下是啟用跨來源隔離功能的一般準則：

1. 請在頂層文件上設定 Cross-Origin-Opener-Policy: same-origin 標頭。如果有設定 Cross-Origin-Opener-Policy-Report-Only: same-origin，請替換。這樣做會封鎖頂層文件及其彈出式視窗之間的通訊。
2. 請在頂層文件上設定 Cross-Origin-Embedder-Policy: require-corp 標頭。如果有設定 Cross-Origin-Embedder-Policy-Report-Only: require-corp，請替換。如此一來，系統就不會載入未啟用的跨來源資源。
3. 確認 self.crossOriginIsolated 在主控台中傳回 true，以確認您的網頁已跨來源隔離。

如想在本機伺服器上啟用跨來源隔離功能，可能會因為簡易伺服器不支援傳送標頭而感到麻煩。您可以在不啟用跨來源隔離功能的情況下，使用指令列標記 --enable-features=SharedArrayBuffer 啟動 Chrome 以啟用 SharedArrayBuffer。瞭解如何在個別平台上使用指令列旗標執行 Chrome。

資源

• 使用 COOP 和 COEP 讓網站「跨來源隔離」
• Android Chrome 88 和 Chrome 電腦版的 SharedArrayBuffer 更新 92