COOP/COEP Cross-Origin Isolation(コープコープクロスオリジンアイソレーション)
2024年Cross-Origin Isolation仕様。Cross-Origin-Opener-Policy+Cross-Origin-Embedder-Policy+SharedArrayBuffer有効化+Spectre/Meltdown対策+WebGPU高度機能解禁搭載。
概要
COOP/COEP Cross-Origin Isolationは2024年に主要ブラウザ全Baseline対応となったCross-Origin Isolation仕様で、Cross-Origin-Opener-Policy(COOP)+Cross-Origin-Embedder-Policy(COEP)の2つのHTTP HeaderでDocumentを完全独立した実行環境に隔離する仕組み。2018年Spectre/Meltdown攻撃の発覚以降、ブラウザは安全のためSharedArrayBuffer/performance.measureUserAgentSpecificMemory()等の強力APIを非対応化していたが、Cross-Origin Isolation有効化することでこれらAPIが再び利用可能になる。WebAssembly Threads・WebGPU・Web Codecs等の最新Web機能は実質Cross-Origin Isolation必須の状況で、ハイパフォーマンスWebアプリ(クラウドゲーミング・動画編集・3DCG・AI推論等)の基盤技術。Chrome 92+(2021年7月)・Firefox 79+(2020年7月)・Safari 15.2+(2021年12月)で対応、2024年Baseline Newly available到達。
主な特徴・仕組み
- Cross-Origin-Opener-Policy(COOP):
same-origin/same-origin-allow-popups/unsafe-none - Cross-Origin-Embedder-Policy(COEP):
require-corp/credentialless/unsafe-none - window.crossOriginIsolated: JavaScript で Isolation状態確認
- SharedArrayBuffer有効化: Cross-Origin Isolation有効時のみ利用可能
- performance.measureUserAgentSpecificMemory: メモリ使用量精密測定
- WebAssembly Threads: SharedArrayBuffer依存、並列処理可能
- WebGPU高度機能: 一部機能はCross-Origin Isolation必須
- Web Codecs: 動画/音声フレーム単位処理、Cross-Origin Isolation推奨
- CORP Header:
Cross-Origin-Resource-Policy: cross-origin/same-origin/same-siteで個別resource許可 - Browser Support: Chrome 92+/Firefox 79+/Safari 15.2+/Edge 92+ Baseline 2024
- HSTS連携: HSTS+Cross-Origin Isolationで完全なTransport Security
スペック比較表
| 項目 | COOP/COEP Cross-Origin Isolation | Site Isolation(Chrome) | iframe sandbox | Service Worker scope |
|---|---|---|---|---|
| 隔離Level | Document | Process | iframe | URL scope |
| 実装 | Browser Native | Browser Native | HTML attribute | Service Worker |
| SharedArrayBuffer | ○ 有効化 | × | × | × |
| WebAssembly Threads | ○ | × | × | × |
| Spectre対策 | ○ Primary | △ | △ | × |
| 設定難易度 | 高(2 Header+各 resource CORP) | 自動 | 簡単 | 簡単 |
| 副作用 | 3rd-party iframe等が動かない | 透過的 | iframe機能制限 | scope外動作なし |
| Browser Support | Baseline 2024 | Chrome 67+ | 全ブラウザ | 全ブラウザ |
具体例・対応製品
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
# 個別 resource 許可(CORP)
Cross-Origin-Resource-Policy: cross-origin
// Cross-Origin Isolation 状態確認
if (window.crossOriginIsolated) {
console.log('Cross-Origin Isolated, SharedArrayBuffer available');
// SharedArrayBuffer + Atomics で並列処理
const sab = new SharedArrayBuffer(1024);
const view = new Int32Array(sab);
Atomics.store(view, 0, 42);
// WebAssembly Threads
const memory = new WebAssembly.Memory({
initial: 10,
maximum: 100,
shared: true
});
}
- Google Earth/Photos: Cross-Origin Isolation本格採用、3D Rendering高速化
- Figma: WebAssembly+SharedArrayBuffer活用、Vector編集パフォーマンス向上
- Cloud Gaming(GeForce NOW等): WebGPU+Cross-Origin Isolation必須
- AI推論Webアプリ: WebGPU/WebAssembly Threadsで高速ML推論
- 競合機種: 通常Web(Cross-Origin非Isolated)、Service Worker scope、iframe sandbox、Site Isolation(Chrome)
自作PCでの選び方・注意点
COOP/COEP Cross-Origin IsolationはWeb開発者向けの高度なセキュリティ+パフォーマンス仕様で、jisaku.com の通常コンテンツ配信には不要だが、Web Application(自作PC構成提案ツール・3D 視覚化・AI推奨)の領域では将来的に重要技術。Cross-Origin Isolation有効化のメリットは「SharedArrayBuffer・WebAssembly Threads・WebGPU高度機能利用可能」で、ハイパフォーマンスWeb Appに必須。一方、デメリットは「3rd-party iframe(YouTube/Twitter/Stripe Checkout等)が動かなくなる」「画像/フォント等のCross-Origin Resource読込にCORP Header必要」等の運用負荷。実装手順は、1) 全Cross-Origin Resource(画像・フォント・スクリプト・フォント)に Cross-Origin-Resource-Policy: cross-origin Header追加、2) Cross-Origin-Opener-Policy: same-origin で window.opener切断、3) Cross-Origin-Embedder-Policy: require-corp でCross-Origin リソース許可制限、4) crossOriginIsolated チェックで動作確認。Service Worker でCOEP credentialless モード(Credentials なしfetchのみCross-Origin許可)を使うとMore柔軟だが、対応Browser限定。Vercel/Cloudflare/Netlify等のEdge Functionで簡単設定可能。jisaku.com で本格採用するなら、まず Web App エリア(管理 SPA等)から段階的に有効化推奨。
関連用語との違い
Site Isolation(Chrome)との違い: Site IsolationはChrome独自のProcess-level隔離(全Webサイト自動)、Cross-Origin IsolationはDocument-level Opt-in仕様(個別Webサイトが選択)。両者補完関係、Chrome ではSite Isolation+Cross-Origin Isolationで2層隔離。 iframe sandboxとの違い: sandboxは古いHTML5仕様で機能制限、Cross-Origin Isolationは新Web Standard で機能解放(SharedArrayBuffer等)。Approach正反対だが両者組合せでiframe内の隔離強化可能。
よくある質問(FAQ)
Q1: なぜCross-Origin Isolation必要? A: Spectre/Meltdown攻撃対策のためブラウザがSharedArrayBuffer等を非対応化(2018年)、Cross-Origin Isolationで安全性確保された環境のみ再有効化される。WebAssembly Threads・WebGPU高度機能・パフォーマンスメトリクス精密測定等のためのcondition。
Q2: 3rd-party iframe(YouTube embed等)が動かない場合は?
A: COEP credentialless モード使用、または iframe個別Cross-Origin Resource Policy指定。例: YouTube は CORP対応せず、別解として iframe内コンテンツのCDN中継(Self proxy)や Cross-Origin Isolation不要のセクションで読込が現実的。
Q3: パフォーマンスメリットは? A: WebAssembly Threadsで CPU 並列処理 4-8倍高速化(Figma事例)、WebGPU高度機能で GPU 処理 10倍高速化(Google Earth事例)。SharedArrayBuffer+Atomicsで JavaScript Multi-thread実装、AI 推論・動画 編集・3D レンダリング等で必須レベル。
まとめ
- COOP/COEP Cross-Origin Isolation = 2024年Baseline Newly available
- 2 Header(COOP+COEP)でDocument完全独立隔離
- SharedArrayBuffer/WebAssembly Threads/WebGPU高度機能解禁
- Chrome 92+/Firefox 79+/Safari 15.2+/Edge 92+ Baseline
- Figma/Google Earth/Cloud Gaming等のハイパフォーマンスWeb App必須