Cross-Origin-Embedder-Policy

HTTP の Cross-Origin-Embedder-Policy (COEP) レスポンスヘッダーは、(CORP または CORS を使用して)文書に明示的に許可を与えていない外部オリジンのリソースが、文書に読み込まれることを防止するものです。

ヘッダー種別 レスポンスヘッダー
禁止ヘッダー名 いいえ

構文

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

ディレクティブ

unsafe-none

これが既定値です。 CORS プロトコルや Cross-Origin-Resource-Policy ヘッダーで明示的に許可していなくても、文書が外部オリジンのリソースを取得することを許可します。

require-corp

文書は、同じオリジンからのリソース、または他のオリジンからロード可能であると明示的にマークされたリソースのみをロードすることができます。 外部オリジンのリソースが CORS に対応している場合、 COEP でブロックされずに読み込むには、crossorigin 属性や Cross-Origin-Resource-Policy ヘッダーを使用する必要があります。

一部の機能はクロスオリジン分離に依存する

SharedArrayBuffer オブジェクトや Performance.now() のような特定の機能には、文書に require-corp 値を設定した COEP ヘッダーがある場合のみ、スロットルなしタイマーを使用してアクセスすることができます。

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

また、 Cross-Origin-Opener-Policy ヘッダーも同様に設定する必要がありますので、参照してください。

クロスオリジンの分離に成功したかどうかを確認するには、ウィンドウとワーカーのコンテキストで利用可能な crossOriginIsolated プロパティで検査してください。

js
if (crossOriginIsolated) {
  // Post SharedArrayBuffer
} else {
  // Do something else
}

CORS による COEP の遮断の回避

require-corp を使用して COEP を有効にし、読み込む必要があるクロスオリジンリソースがある場合、それは CORS に対応する必要があり、 COEP によるブロックを回避するには、他のオリジンからロード可能であると明示的にマークする必要があります。例えば、サードパーティーサイトから読み込むこの画像には、crossorigin 属性を使用することができます。

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

仕様書

Specification
HTML
# coep

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Cross-Origin-Embedder-Policy
credentialless

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報