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 Standard
# coep

ブラウザーの互換性

BCD tables only load in the browser

関連情報