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
プロパティで検査してください。
if (crossOriginIsolated) {
// Post SharedArrayBuffer
} else {
// Do something else
}
CORS による COEP の遮断の回避
require-corp
を使用して COEP を有効にし、読み込む必要があるクロスオリジンリソースがある場合、それは CORS に対応する必要があり、 COEP によるブロックを回避するには、他のオリジンからロード可能であると明示的にマークする必要があります。例えば、サードパーティーサイトから読み込むこの画像には、crossorigin
属性を使用することができます。
<img src="https://thirdparty.com/img.png" crossorigin />
仕様書
Specification |
---|
HTML Standard # coep |
ブラウザーの互換性
BCD tables only load in the browser