Cross-Origin-Embedder-Policy

構文

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 プロパティで検査してください。

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

CORS による COEP の遮断の回避

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

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

仕様書

ブラウザーの互換性

関連情報

• Cross-Origin-Opener-Policy