Cross-Origin-Embedder-Policy (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 を対応しており、CORS によって許可されている。 例えば、HTML では crossorigin 属性を使用したり、JavaScript で {mode="cors"} でリクエストを行うことで実現できます。

credentialless

文書は、no-cors モードでリクエストされた別なオリジンからのリソースを、Cross-Origin-Resource-Policy ヘッダーを介した明示的な許可を必要とせずに読み込むことができます。 この場合、リクエストは資格情報なしで送信されます。リクエストではクッキーが省略され、レスポンスでは無視されます。

他のリクエストモードにおける別なオリジンからの読み込み動作は、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 プロパティを使用すると、この機能がウィンドウまたはワーカーコンテキストでそれぞれ制限されているかどうかをチェックすることができます。

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 を使用して CORS に対応している別オリジンのリソースを埋め込みたい場合、明示的に cors モードでリクエストを行うことを指定する必要があります。

例えば、HTML で宣言された画像を CORS に対応しているサードパーティサイトから取得する場合、crossorigin 属性を使用することで、cors モードでリクエストされます。

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

また、HTMLScriptElement.crossOrigin 属性を使用するか、fetch 使用時に { mode: 'cors' } を指定することで、JavaScript で CORS モードでファイルをリクエストすることができます。

一部の画像で CORS が対応していない場合、別なオリジンのサーバーからの明示的な許可なしに画像を読み込む代替手段として、COEP に credentialless の値を使用する方法があります。ただし、クッキーなしでリクエストを行うという代償を伴います。

仕様書

ブラウザーの互換性

関連情報

• Cross-Origin-Opener-Policy
• Window.crossOriginIsolated および WorkerGlobalScope.crossOriginIsolated
• Cross Origin Opener Policy - Why you need "cross-origin isolated" for powerful features, web.dev (2020)
• COOP and COEP explained: Artur Janc, Charlie Reis, Anne van Kesteren (2020)