跨域嵌入策略 (COEP) 標頭

語法

Cross-Origin-Embedder-Policy: unsafe-none | require-corp | credentialless

指令

unsafe-none

允許文件載入跨域資源，而無需透過 CORS 協議或 Cross-Origin-Resource-Policy 標頭授予明確許可權。這是預設值。

require-corp

文件只能載入同源資源，或明確標記為可從其他源載入的資源。

除非滿足以下條件，否則 COEP 將阻止跨域資源載入：

• 資源以 no-cors 模式請求，並且響應包含一個 Cross-Origin-Resource-Policy 標頭，允許它載入到文件源中。
• 資源以 cors 模式請求，並且資源支援並允許 CORS。例如，在 HTML 中可以使用 crossorigin 屬性，或者在 JavaScript 中使用 {mode="cors"} 發出請求。

credentialless

文件可以載入以 no-cors 模式 請求的跨域資源，而無需透過 Cross-Origin-Resource-Policy 標頭明確許可。在這種情況下，請求在沒有憑據的情況下發送：請求中省略 cookie，響應中忽略 cookie。

其他 請求模式 的跨域載入行為與 require-corp 相同。例如，以 cors 模式請求的跨域資源必須支援 (並允許) CORS。

示例

依賴於跨域隔離的特性

某些特性，例如訪問 SharedArrayBuffer 物件或使用 Performance.now() 配合不限速計時器，僅在您的文件是 跨域隔離 時才可用。

要在文件中使用這些特性，您需要將 COEP 標頭設定為 require-corp 或 credentialless，並將 Cross-Origin-Opener-Policy 標頭設定為 same-origin。此外，該特性不能被 Permissions-Policy: cross-origin-isolated 阻止。

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

您可以使用 Window.crossOriginIsolated 和 WorkerGlobalScope.crossOriginIsolated 屬性分別檢查視窗和 Worker 上下文中這些特性是否受限。

const myWorker = new Worker("worker.js");

if (crossOriginIsolated) {
  const buffer = new SharedArrayBuffer(16);
  myWorker.postMessage(buffer);
} else {
  const buffer = new ArrayBuffer(16);
  myWorker.postMessage(buffer);
}

使用 CORS 避免 COEP 阻塞

如果您使用 require-corp 啟用 COEP，並希望嵌入支援 CORS 的跨域資源，則需要明確指定以 cors 模式請求它。

例如，要從支援 CORS 的第三方站點獲取 HTML 中宣告的影像，您可以使用 crossorigin 屬性，以便以 cors 模式請求它。

<img src="https://thirdparty.com/img.png" crossorigin />

您也可以類似地使用 HTMLScriptElement.crossOrigin 屬性或使用 { mode: 'cors' } 來透過 JavaScript 以 CORS 模式請求檔案。

如果某些影像不支援 CORS，則可以使用 credentialless 的 COEP 值作為替代方案，在不需要跨源伺服器明確選擇加入的情況下載入影像，代價是請求時不帶 cookie。

規範

瀏覽器相容性

另見

• Cross-Origin-Opener-Policy
• Window.crossOriginIsolated 和 WorkerGlobalScope.crossOriginIsolated
• Why you need "cross-origin isolated" for powerful features 在 web.dev 上的跨域開啟策略 (2020)
• COOP 和 COEP 解釋：Artur Janc、Charlie Reis、Anne van Kesteren (2020)