使用 COOP 和 COEP 設定跨來源隔離環境時，可以更精準地啟用 SharedArrayBuffer、performance.measureUserAgentSpecificMemory() 和高解析度計時器等強大的功能。
更新
- 2022 年 6 月 21 日：執行跨來源隔離時，工作站指令碼也需要謹慎 已新增一些說明。
- 2021 年 8 月 5 日：我們將 JS Self-Profiling API 列為一種 API 需要跨來源隔離，但可反映近期異動 方向、 就會移除
- 2021 年 5 月 6 日：我們根據使用者的意見回饋和問題，決定調整
在未跨來源隔離網站的「
SharedArrayBuffer」用量時間軸 在 Chrome M92 中受到限制 - 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 版中使用。 在這個例子中，當document.domain處於不可變狀態時self.crossOriginIsolated會傳回true。 「performance.measureUserAgentSpecificMemory()」即將結束來源試用， 在 Chrome 第 89 版中預設為啟用。Android Chrome 上的 Shared Array Buffer 我們會從 Chrome 88 開始提供。
某些網路 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。
本文說明如何使用這些新標頭。後續追蹤 這篇文章，我會提供更多背景資訊和相關資訊。
，瞭解如何調查及移除這項存取權。部署 COOP 和 COEP，即可跨來源隔離您的網站
整合 COOP 和 COEP
1. 在頂層文件設定 Cross-Origin-Opener-Policy: same-origin 標頭
只要在頂層文件啟用「COOP: same-origin」，視窗就會保持同步
和從文件開啟的視窗，則會有獨立的瀏覽
結構定義群組，除非它們來自具有相同 COOP 設定的來源。
因此，系統會針對開啟的視窗強制執行隔離作業，並在應用程式之間進行雙向通訊
這兩個視窗都已停用
瀏覽情境群組是一組可以參照的視窗。適用對象
例如透過 <iframe> 嵌入的頂層文件及其子文件。
如果網站 (https://a.example) 開啟了彈出式視窗 (https://b.example)，
開啟器視窗和彈出式視窗會共用相同的瀏覽環境，因此
但可透過 DOM API (例如 window.opener) 存取彼此。
你可以查看視窗開啟器和開啟者是否在獨立瀏覽中 開發人員工具中的結構定義群組。
2. 確保資源已啟用 CORP 或 CORS
確認網頁中的所有資源均以 CORP 或 CORS HTTP 的形式載入 標題。此為步驟四，啟用 COEP 的必要步驟。
根據資源性質，您需採取以下行動：
- 如果預期僅從相同來源載入資源，請設定
Cross-Origin-Resource-Policy: same-origin標頭。 - 如果資源預期只會從同一個網站載入，但會跨越不同網站
origin，設定
Cross-Origin-Resource-Policy: same-site標頭。 - 如果資源是從您控管的跨來源載入，請設定
Cross-Origin-Resource-Policy: cross-origin標頭。 - 對於您無法控管的跨來源資源：
- 如果資源，請使用載入 HTML 標記中的
crossorigin屬性 透過 CORS 放送例如<img src="***" crossorigin>。 - 請要求資源擁有者支援 CORS 或 CORP。
- 如果資源，請使用載入 HTML 標記中的
- 針對 iframe，請遵循上述原則，並設定
Cross-Origin-Resource-Policy: cross-origin(或same-site，same-origin) 則視情境而定)。 - 使用
WebWorker載入的指令碼必須由相同來源提供。 因此不需要 CORP 或 CORS 標頭 - 適用於透過
COEP: require-corp處理的文件或 worker，跨來源 在沒有 CORS 的情況下載入的子資源必須設定Cross-Origin-Resource-Policy: cross-origin標頭，才能選擇嵌入。舉例來說<script>、importScripts、<link>、<video>、<iframe>等。
3. 使用 COEP Report-Only HTTP 標頭評估內嵌資源
在完全啟用 COEP 之前，您可以使用
檢查政策的 Cross-Origin-Embedder-Policy-Report-Only 標頭
以及實際可行的。您會收到報告，但不會封鎖嵌入的內容。
以遞迴方式將這項設定套用至「所有」文件，包括頂層文件、 iframe 和工作站指令碼。如需進一步瞭解「報表專用 HTTP」標頭，請參閱 使用報表觀察問題 API。
4. 啟用 COEP
確定一切運作正常之後
已成功載入，請切換 Cross-Origin-Embedder-Policy-Report-Only
設為 Cross-Origin-Embedder-Policy 標頭，且所有屬性的值都相同
文件，包括透過 iframe 和工作站指令碼嵌入的文件。
利用 self.crossOriginIsolated 判斷隔離作業是否成功
self.crossOriginIsolated 屬性會傳回 true，如果網頁位於
跨來源隔離狀態，且所有資源和視窗都隔離在
相同的瀏覽情境群組您可以使用這個 API 判斷
已成功區隔瀏覽情境群組並存取
強大的功能，例如 performance.measureUserAgentSpecificMemory()。
使用 Chrome 開發人員工具偵錯問題
您可以輕鬆對畫面上顯示的資源 (例如圖片)
要求封鎖 COEP 問題，因為要求遭到封鎖，且網頁會
表示缺少圖片不過，對於程式碼
可能引發視覺影響 (例如腳本或樣式) 或 COEP 問題
讓您毫無頭緒如要使用這項工具，請使用開發人員工具「Network」面板。如果
COEP 有問題：
狀態中的 (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)
。
您只要按一下這些項目，就能查看更多詳細資料。
您也可以透過 「Application」面板。前往「頁框」找到左側的小部分 展開「頂端」查看資源結構細目。
您可以查看 iframe 的狀態，例如 SharedArrayBuffer 的可用性、
依此類推
你也可以檢查彈出式視窗的狀態，例如是否為跨來源 而且系統互不相關
使用 Reporting API 觀察問題
Reporting API 是另一種機制，您可以 偵測各種問題您可以設定 Reporting API 使用者瀏覽器傳送報告給瀏覽器，在 COEP 阻止資源載入時傳送報告 或 COOP 隔離彈出式視窗Chrome 現已支援 Reporting API，從現在開始 第 69 版適用於多種用途，包括 COEP 和 COOP。
瞭解如何設定 Reporting API 及設定要接收的伺服器 請前往「使用報表 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"
}]
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