使用 COOP 和 COEP 建立網站 "跨來源隔離

使用 COOP 和 COEP 設定跨來源的隔離環境，並啟用 SharedArrayBuffer、performance.measureUserAgentSpecificMemory() 和高解析度計時器等強大功能，準確度更高。

Eiji Kitamura

注意： Chrome 電腦版的 SharedArrayBuffer 必須從 Chrome 92 開始，才能使用跨來源隔離功能。詳情請參閱 Android Chrome 88 和電腦版 Chrome 92 的 SharedArrayBuffer 更新。

更新

• 2022 年 6 月 21 日：啟用跨來源隔離時，工作站指令碼也需要留意。新增一些說明。
• 2021 年 8 月 5 日：我們曾提及 JS Self-Profiling API，因為此 API 需要跨來源隔離，但是反映近期方向的變更，現已移除。
• 2021 年 5 月 6 日：根據意見回饋和回報的問題，我們已決定針對沒有任何跨來源隔離網站在 Chrome M92 中限制使用 SharedArrayBuffer 的時間表。
• 2021 年 4 月 16 日：新增有關無憑證模式的全新 COEP 無憑證模式和 COOP same-origin-allow-popups 是跨來源隔離的放鬆條件的附註。
• 2021 年 3 月 5 日：移除 SharedArrayBuffer、performance.measureUserAgentSpecificMemory() 和偵錯功能的限制，而 Chrome 第 89 版現已完全啟用這些功能。新增了 performance.now() 和 performance.timeOrigin 等即將推出的功能，可提高準確度。
• 2021 年 2 月 19 日：新增有關功能政策 allow="cross-origin-isolated" 和開發人員工具功能的附註。
• 2020 年 10 月 15 日：self.crossOriginIsolated 從 Chrome 第 87 版開始提供。 反映這種情況，當 self.crossOriginIsolated 傳回 true 時，document.domain 無法變更。performance.measureUserAgentSpecificMemory() 即將結束來源試用，在 Chrome 第 89 版中預設為啟用。我們將在 Chrome 第 88 版提供 Android Chrome 的共用陣列緩衝區。

有些網路 API 會增加 Spectre 等旁路攻擊的風險。為減輕風險，瀏覽器提供選擇啟用的隔離環境，稱為跨來源隔離。使用跨來源隔離狀態，網頁就能使用特殊權限功能，包括：

這類功能會在跨來源隔離狀態後方使用。

API	說明
SharedArrayBuffer	對 WebAssembly 執行緒來說為必要項目。這項設定適用於 Android Chrome 88。在 網站隔離功能的協助下，電腦版目前預設為啟用，但需要使用跨來源隔離狀態， Chrome 92 版則會預設為停用。
performance.measureUserAgentSpecificMemory()	適用於 Chrome 89。
performance.now()、performance.timeOrigin	目前適用於解析度上限為 100 微秒或更高解析度的多種瀏覽器。在跨來源隔離的情況下，解析度可以是 5 微秒以上。

跨來源隔離狀態也會禁止修改 document.domain。(能夠修改 document.domain 即允許相同網站文件之間的通訊，並已被視為相同來源政策中的漏洞)。

如要選擇採用跨來源隔離狀態，您必須在主要文件上傳送以下 HTTP 標頭：

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

這些標頭會指示瀏覽器禁止載入尚未由跨來源文件載入的資源或 iframe，並防止跨來源視窗直接與您的文件互動。這也表示要跨來源載入的資源需要選擇啟用。

您可以檢查 self.crossOriginIsolated，判斷網頁是否處於跨來源的獨立狀態。

本文說明如何使用這些新標頭。我們會在後續文章中提供更多背景資訊。

注意： 本文旨在協助準備網站使用 SharedArrayBuffer、WebAssembly 執行緒、performance.measureUserAgentSpecificMemory() 或高解析度計時器，以更精準的方式跨瀏覽器平台使用更精準的計時器。

重要詞彙： 本文使用許多類似意思的術語。為了更清楚起見，我們先定義這些原則：* COEP：跨來源嵌入工具政策 * COOP：跨源開啟工具政策 * CORP：跨源資源政策 * CORS：跨源資源共享 * CORB：跨來源讀取封鎖

部署 COOP 和 COEP，讓網站跨來源獨立

注意： 如要瞭解啟用跨來源隔離功能的實用步驟，請參閱「啟用跨來源隔離功能的指南」。

整合 COOP 和 COEP

1. 在頂層文件設定 Cross-Origin-Opener-Policy: same-origin 標頭

在頂層文件啟用 COOP: same-origin 後，具有相同來源的視窗以及從文件開啟的視窗，就會有不同的瀏覽內容群組，除非兩者位於相同的來源並具有相同的 COOP 設定。因此，系統會強制執行已開啟的視窗隔離，並停用兩個視窗之間的雙向通訊。

注意： 這會中斷需要跨來源視窗互動 (例如 OAuth 和付款) 的整合作業。為緩解這個問題，我們正在探索放寬條件，藉此啟用跨來源隔離功能為 Cross-Origin-Opener-Policy: same-origin-allow-popups。這樣系統就能與自行開啟的視窗通訊。如果您想啟用跨來源隔離，但受到這個問題封鎖，建議註冊來源試用，並等待新條件可供使用。在安全解決之前，我們不打算終止來源試用。

瀏覽內容群組是一組可參照彼此的視窗。例如，透過 <iframe> 嵌入的頂層文件及其子文件。如果網站 (https://a.example) 會開啟彈出式視窗 (https://b.example)，則開啟程式視窗和彈出式視窗會共用相同的瀏覽情境，因此他們可以透過 window.opener 等 DOM API 存取彼此。

您可以透過開發人員工具檢查視窗開啟工具及其開啟對像是否位於不同的瀏覽內容群組。

試用： 查看不同 COOP 參數的影響。

2. 確保資源已啟用 CORP 或 CORS

確認透過 CORP 或 CORS HTTP 標頭載入頁面中的所有資源。步驟 4：啟用 COEP 時必須執行這個步驟。

根據資源性質，您必須採取以下動作：

• 如果預期需要從同一個來源載入資源，請設定 Cross-Origin-Resource-Policy: same-origin 標頭。
• 如果預計只會從相同網站但跨來源載入資源，請設定 Cross-Origin-Resource-Policy: same-site 標頭。
• 如果資源是從您控制的跨來源載入，請盡可能設定 Cross-Origin-Resource-Policy: cross-origin 標頭。
• 如果是您無法控管的跨來源資源：
  • 如果透過 CORS 提供資源，請在載入的 HTML 標記中使用 crossorigin 屬性。例如 <img src="***" crossorigin>。
  • 請要求資源擁有者支援 CORS 或 CORP。
• 至於 iframe，請遵守上述原則，並依照上述原則設定 Cross-Origin-Resource-Policy: cross-origin (或 same-site，same-origin視情境而定)。
• 使用 WebWorker 載入的指令碼必須從相同來源提供，因此您不需要使用 CORP 或 CORS 標頭。
• 針對使用 COEP: require-corp 提供的文件或工作站，在沒有 CORS 的情況下載入的跨來源子資源必須設定 Cross-Origin-Resource-Policy: cross-origin 標頭以選擇嵌入。例如，這適用於 <script>、importScripts、<link>、<video>、<iframe> 等。

如要針對內嵌於 iframe 的文件啟用跨來源隔離功能，請將 allow="cross-origin-isolated" 權限政策套用至 <iframe> 標記，並符合本文件所述的相同條件。請注意，整個文件 (包括父項框架和子框架) 也必須跨來源隔離。

重要字詞： 請務必瞭解「相同網站」和「相同來源」的差異，如要瞭解兩者的差異，請參閱瞭解相同網站與相同來源。

3. 使用 COEP Report-Only HTTP 標頭評估嵌入的資源

在完全啟用 COEP 之前，您可以使用 Cross-Origin-Embedder-Policy-Report-Only 標頭檢查政策是否實際運作，以進行模擬測試。接收報表但不會封鎖嵌入的內容。

遞迴性會套用至「所有」文件，包括頂層文件、iframe 和工作站指令碼。如需報表專用 HTTP 標頭的相關資訊，請參閱「使用 Reporting API 觀察問題」。

4. 啟用 COEP

確認一切運作正常且所有資源都能順利載入後，請將 Cross-Origin-Embedder-Policy-Report-Only 標頭切換為 Cross-Origin-Embedder-Policy 標頭 (包括透過 iframe 和工作站指令碼嵌入的文件)，以及具有相同值的 Cross-Origin-Embedder-Policy 標頭。

馬上試試： 查看不同 COEP / CORP 參數的影響。

注意： Squoosh (圖片最佳化 PWA) 現在透過 COOP / COEP 存取 Wasm Threads (以及共用陣列緩衝區) 以及 Android Chrome。

注意： 我們一直在探索如何大規模部署 Cross-Origin-Resource-Policy，因為跨來源隔離需要明確選擇啟用所有子資源。而我們之後想到的是相反的方向：一種是 COEP「無憑證」模式，這種模式會移除所有憑證，在沒有 CORP 標頭的情況下載入資源。希望以上說明能夠減輕您確保子資源傳送 Cross-Origin-Resource-Policy 標頭的負擔。不過，由於 Chrome 96 版支援 credentialless 模式，但其他瀏覽器尚未支援，因此部分開發人員可能會覺得部署 COOP 或 COEP 是一大挑戰。如果您不想啟用跨來源隔離，建議您註冊來源試用，並等到 credentialless 可在更多瀏覽器中推出。

判斷是否成功透過 self.crossOriginIsolated 執行隔離

如果網頁處於跨來源的獨立狀態，且所有資源和視窗都屬於同一個瀏覽內容群組，self.crossOriginIsolated 屬性會傳回 true。您可以使用這個 API 判斷是否已成功區隔瀏覽結構定義群組，並取得 performance.measureUserAgentSpecificMemory() 等強大功能的存取權。

使用 Chrome 開發人員工具偵錯

如果資源 (例如圖片) 顯示於螢幕上，很容易偵測到 COEP 問題，因為要求將會遭到封鎖，而頁面也會指出缺少圖片。但是，對於那些不需要造成視覺影響的資源 (例如指令碼或樣式)，COEP 問題可能會不易察覺。如果是這種情況，請使用開發人員工具網路面板。如果 COEP 發生問題，你應該會在「Status」欄中看到 (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)。

按一下該項目即可查看詳細資料。

您也可以透過「Application」(應用程式) 面板，判斷 iframe 和彈出式視窗的狀態。前往左側的「Frames」(頁框) 部分，展開「頂部」，查看資源結構的細目。

您可以檢查 iframe 的狀態，例如 SharedArrayBuffer 的可用性等。

您也可以檢查彈出式視窗的狀態，例如是否為跨來源隔離。

使用 Reporting API 觀察問題

Reporting API 是另一種可讓您偵測各種問題的機制。您可以設定 Reporting API，指示使用者的瀏覽器在每次 COEP 封鎖資源載入，或是 COOP 隔離彈出式視窗時傳送報表。Chrome 自 69 版起開始支援 Reporting API，適用於 COEP 和 COOP 等各種用途。

注意： 您是否已透過 Report-To 標頭使用 Reporting API？Chrome 即將轉換至新版 Reporting API，這個版本會將 Report-To 替換為 Reporting-Endpoints；建議您遷移至新版本。詳情請參閱「遷移至 Reporting API v1」。

如要瞭解如何設定 Reporting API 及設定伺服器來接收報表，請參閱使用 Reporting API。

COEP 報告範例

跨來源資源遭到封鎖時的 COEP 報表酬載範例如下：

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

注意： blocked-url 僅適用於具有回溯相容性，且最終會移除。

COOP 報表範例

彈出式視窗隔離開啟時，範例 COOP 報表酬載如下所示：

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

當不同的瀏覽環境群組嘗試存取彼此 (僅在「僅限報表」模式) 時，COOP 也會傳送報表。舉例來說，系統嘗試 postMessage() 時在報表中看起來會像這樣：

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

結論

結合 COOP 和 COEP HTTP 標頭，將網頁選擇採用特殊的跨來源隔離狀態。您將能查看 self.crossOriginIsolated，判斷網頁是否處於跨來源隔離狀態。

隨著這項跨來源隔離狀態推出新功能，我們也將持續更新本文，並針對 COOP 和 COEP 改善開發人員工具。

資源

• 為什麼需要「跨來源隔離」才能使用強大功能
• 跨來源隔離啟用指南
• Android Chrome 88 和 Chrome 電腦版的 SharedArrayBuffer 更新 92
• 使用 measureUserAgentSpecificMemory() 監控網頁的記憶體總用量