使用 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)
。
![「網路」面板「狀態」欄中的 COEP 問題。](https://web.dev/static/articles/coop-coep/image/coep-issues-the-status-c-9f8040461053.jpg?authuser=0&hl=zh-tw)
您只要按一下這些項目,就能查看更多詳細資料。
![只要在網路面板中點選網路資源,「標頭」分頁就會顯示 COEP 問題的詳細資料。](https://web.dev/static/articles/coop-coep/image/details-the-coep-issue-a-7483b46211d45.jpg?authuser=0&hl=zh-tw)
您也可以透過 「Application」面板。前往「頁框」找到左側的小部分 展開「頂端」查看資源結構細目。
您可以查看 iframe 的狀態,例如 SharedArrayBuffer
的可用性、
依此類推
![Chrome 開發人員工具 iframe 檢查器](https://web.dev/static/articles/coop-coep/image/chrome-devtools-iframe-in-7b22ff613fbeb.png?authuser=0&hl=zh-tw)
你也可以檢查彈出式視窗的狀態,例如是否為跨來源 而且系統互不相關
![Chrome 開發人員工具彈出式視窗檢查器](https://web.dev/static/articles/coop-coep/image/chrome-devtools-popup-win-191023386b4a8.png?authuser=0&hl=zh-tw)
使用 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