セキュリティ
上級

COOP/COEP Cross-Origin Isolation(コープコープクロスオリジンアイソレーション)

2024年Cross-Origin Isolation仕様。Cross-Origin-Opener-Policy+Cross-Origin-Embedder-Policy+SharedArrayBuffer有効化+Spectre/Meltdown対策+WebGPU高度機能解禁搭載。

0 回閲覧
0 いいね
2026/5/5 更新
関連タグ
COOP
COEP
Cross-Origin Isolation
Web Security
SharedArrayBuffer

概要

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 IsolationSite Isolation(Chrome)iframe sandboxService Worker scope
隔離LevelDocumentProcessiframeURL scope
実装Browser NativeBrowser NativeHTML attributeService Worker
SharedArrayBuffer○ 有効化×××
WebAssembly Threads○×××
Spectre対策○ Primary△△×
設定難易度高(2 Header+各 resource CORP)自動簡単簡単
副作用3rd-party iframe等が動かない透過的iframe機能制限scope外動作なし
Browser SupportBaseline 2024Chrome 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必須
この記事について
カテゴリーセキュリティ
難易度上級
作成日2026/5/5