COOP/COEP/CORP ヘッダービルダーとは
クロスオリジン分離はページがクロスオリジンのウィンドウやリソースとどのようにやり取りするかを制御するHTTPヘッダーのセットです。COOPはこのページが他のオリジンからwindow.openerを介してアクセスできるかどうかを制御します。COEPはクロスオリジンのリソース（画像、フォント、スクリプト）を読み込めるかどうかを制御します。CORPはこのリソースを他のオリジンが読み込めるかどうかを制御します。これらを組み合わせることでSharedArrayBufferや高解像度タイマーなどの強力な機能が有効になります。
クイックアンサー
SharedArrayBufferとオープナーセキュリティのためのクロスオリジン分離ヘッダーを構築します。COOPはwindow.openerアクセスを制御しCOEPはクロスオリジンリソースの読み込みを制御しCORPは他のオリジンがリソースを読み込めるかどうかを制御します。サードパーティの埋め込みをサポートしながら分離が必要なほとんどのサイトには中程度のプリセットを使用してください。
Last updated: 2026-05-28
制限事項
- クロスオリジン分離は強力な制限でありサードパーティの埋め込み、CDNリソース、アナリティクス、フォントを静かに壊す可能性があります。すべてのページタイプで適用前に徹底的にテストしてください。
- COEP credentiallessはChrome 113以上、Edge 113以上、Firefox 128以上でサポートされています。古いブラウザやSafariはサポートしておらずクロスオリジンリソースが失敗する原因になります。
- 一部のホスティングプラットフォーム（GitHub Pagesを含む）はカスタムCOOP/COEP/CORPヘッダーの設定をサポートしていません。前段にCDNやリバースプロキシ（Cloudflare、Netlify）を追加してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 分離目標のプリセットを選択するかカスタムを選択して各ヘッダーを個別に設定します。
- ヘッダー値を確認します。より厳格な分離はより多くの機能を有効にしますがサードパーティの埋め込みを壊す可能性があります。
- ヘッダーをコピーしてサーバーまたはCDN設定に追加します。
- デプロイ後にデバッグチェックリストを使用して壊れたリソースを特定します。
主な用途
- 計算集約型のウェブアプリでSharedArrayBufferと高度なWebAssembly機能を有効にします。
- CDN画像やサードパーティフォントを読み込みながらクロスオリジン攻撃を防ぐためにページのオープナー関係を分離します。
- オープナーアクセスを防ぐが埋め込みリソースの読み込みは制限しない最小限の分離を設定します。