COOP と COEP を使用してウェブサイトを「クロスオリジン分離」を実現

COOP と COEP を使用して、クロスオリジン分離環境をセットアップし、SharedArrayBuffer、performance.measureUserAgentSpecificMemory()、精度の高い高解像度タイマーなどの強力な機能を利用できます。

Eiji Kitamura

注意: Chrome デスクトップの SharedArrayBuffer では、Chrome 92 以降でクロスオリジン分離が必要になります。詳しくは、Android Chrome 88 とパソコン版 Chrome 92 での SharedArrayBuffer の更新をご覧ください。

更新

• 2022 年 6 月 21 日: クロスオリジン分離の場合、ワーカー スクリプトにも注意が必要です。 有効になります。いくつかの説明を追加しました。
• 2021 年 8 月 5 日: JS Self-Profiling API が、 クロスオリジン分離が必要ですが、クロスオリジン分離が 方向 削除されます。
• 2021 年 5 月 6 日: フィードバックと報告された問題に基づき、調整することを決定しました。 クロスオリジンで隔離されていないサイトにおける SharedArrayBuffer の使用のタイムライン 制限されます。
• 2021 年 4 月 16 日: 新しい COEP の認証情報レス機能について注記を追加しました。 モードとCOOP same-origin-allowpopups を緩和 クロスオリジンの条件 分離します
• 2021 年 3 月 5 日: SharedArrayBuffer の制限事項を削除しました。 performance.measureUserAgentSpecificMemory()、デバッグ機能 Chrome 89 ではこの機能が全面的に利用可能になりました今後提供予定の機能 performance.now() と performance.timeOrigin: できます。
• 2021 年 2 月 19 日: 機能ポリシーに関する注記を追加しました。 DevTools の allow="cross-origin-isolated" とデバッグ機能。
• 2020 年 10 月 15 日: self.crossOriginIsolated が Chrome 87 から利用可能になります。 その結果、次の場合、document.domain は不変です。 self.crossOriginIsolated は true を返します。 performance.measureUserAgentSpecificMemory() はオリジン トライアルを終了しています。 Chrome 89 ではデフォルトで有効になっています。Android Chrome の共有配列バッファは Chrome 88 以降でご利用いただけます。

一部のウェブ API では、Spectre のようなサイドチャネル攻撃のリスクが高まります。宛先 そのリスクを軽減するために、ブラウザにはオプトイン型の隔離環境が用意されています。 分離されていますクロスオリジン分離状態では、ウェブページは 次のような特権機能を使用できる

で確認できます。

クロスオリジン分離内で利用可能になる機能 説明します

API	説明
SharedArrayBuffer	WebAssembly スレッドでは必須です。この機能は Android から利用できます。 Chrome 88。現在、デフォルトで PC 版が有効になっており、 <ph type="x-smartling-placeholder"></ph>のヘルプ サイト分離。ただし、クロスオリジン分離状態が必要になります。 および<ph type="x-smartling-placeholder"></ph> デフォルトで無効になります。
performance.measureUserAgentSpecificMemory()	Chrome 89 以降で利用できます。
<ph type="x-smartling-placeholder"></ph> performance.now()、performance.timeOrigin	現在、多くのブラウザでご利用いただけますが、解像度は以下に制限されています。 100 マイクロ秒以上。クロスオリジン分離を使用すると 5 マイクロ秒以上です。

また、クロスオリジン分離状態により、 document.domain。（document.domain を変更できると、通信を許可するときに の抜け穴と考えられてきましたが、 同一オリジン ポリシーが適用されます）。

クロスオリジン分離状態をオプトインするには、以下を送信する必要があります。 メイン ドキュメントの HTTP ヘッダー:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

これらのヘッダーにより、ブラウザはリソースや iframe の読み込みをブロックします。 クロスオリジン ドキュメントによる読み込みがオプトインされていない ドキュメントを直接操作しないよう設定できます。また、 クロスオリジンで読み込まれるリソースにはオプトインが必要です。

ウェブページがクロスオリジン分離状態にあるかどうかは、次の方法で判断できます。 調査 self.crossOriginIsolated。

この記事では、これらの新しいヘッダーの使用方法について説明します。フォローアップで 記事の背景と背景情報をお伝えします。

注: この記事は、さまざまなブラウザ プラットフォームにおいて、SharedArrayBuffer、WebAssembly スレッド、performance.measureUserAgentSpecificMemory()、高解像度タイマーをより正確に、かつ正確にウェブサイトで使用できるようにしたいと考えているお客様を対象としています。

で確認できます。

重要な用語: この記事では、同じように聞こえる用語を多く使用します。説明を明確にするために、まず以下を定義します。* COEP: クロスオリジン エンべディング ポリシー * COOP: クロスオリジン オープナー ポリシー * コープ: クロスオリジン リソース ポリシー * CORS: クロスオリジン リソース シェアリング * CORB: クロスオリジン読み取りブロック

COOP と COEP をデプロイして、ウェブサイトのクロスオリジン分離を行う

注: クロスオリジン分離を有効にする実践的な手順については、クロスオリジン分離を有効にするためのガイドをご覧ください。

COOP と COEP を統合する

1. 最上位のドキュメントに Cross-Origin-Opener-Policy: same-origin ヘッダーを設定する

最上位のドキュメントで COOP: same-origin を有効にすると、同じ オリジン、ドキュメントから開かれたウィンドウに、それぞれ異なるブラウジング コンテキスト グループのみです。 したがって、開いているウィンドウとウィンドウ間の相互通信には分離が強制的に適用されます。 両方のウィンドウが無効になります。

注意: これにより、OAuth や支払いなど、クロスオリジンのウィンドウ操作を必要とする統合が中断されます。この問題を軽減するために、Cross-Origin-Opener-Policy: same-origin-allow-popups へのクロスオリジン分離を有効にする条件の緩和を検討しています。これにより、単独で開いているウィンドウとの通信が可能になります。クロスオリジン分離を有効にしようとしても、この問題によってブロックされる場合は、オリジン トライアルに登録し、新しい条件が利用可能になるまで待つことをおすすめします。この問題を安全に解決するまで、オリジン トライアルを終了する予定はありません。

ブラウジング コンテキスト グループは、互いに参照できる一連のウィンドウです。対象 たとえば、<iframe> を介して埋め込まれた最上位ドキュメントとその子ドキュメントなどです。 ウェブサイト（https://a.example）でポップアップ ウィンドウ（https://b.example）が開く場合、 オープナー ウィンドウとポップアップ ウィンドウでは同じブラウジング コンテキストが使用されるため、 window.opener などの DOM API を介して互いにアクセスできます。

ウィンドウの開始元と閲覧先が別々のブラウジングになっているかどうかを確認できます DevTools のコンテキスト グループ。

試してみる: さまざまな COOP パラメータの影響を確認してください。

2. リソースで CORP または CORS が有効になっていることを確認してください

ページ上のすべてのリソースが CORP または CORS HTTP で読み込まれていることを確認する 使用します。この手順は、ステップ 4（COEP を有効にする）で必要です。

リソースの性質に応じて、次のことを行う必要があります。

• リソースが同じ生成元からのみ読み込まれるようにする場合は、次のように設定します。 Cross-Origin-Resource-Policy: same-origin ヘッダー。
• リソースが同じサイトからのみ読み込まれるが、 origin には、Cross-Origin-Resource-Policy: same-site ヘッダーを設定します。
• リソースが自分の管理下にあるクロスオリジンから読み込まれる場合は、 可能であれば Cross-Origin-Resource-Policy: cross-origin ヘッダーを使用します。
• お客様が制御できないクロスオリジン リソースの場合: <ph type="x-smartling-placeholder">
  </ph>
  • リソースが次の場合は、読み込み中の HTML タグで crossorigin 属性を使用します。 いくつかあります。（例: <img src="***" crossorigin>。）
  • リソースのオーナーに、CORS または CORP をサポートするよう依頼してください。
• iframe の場合は、上記と同じ原則に従い、 Cross-Origin-Resource-Policy: cross-origin（または same-site、same-origin） あります）。
• WebWorker で読み込まれたスクリプトは、同一オリジンから提供する必要があります。 CORP や CORS ヘッダーは不要です
• COEP: require-corp で配信されるドキュメントまたはワーカーの場合、クロスオリジン CORS なしで読み込まれるサブリソースには、埋め込みを有効にするよう Cross-Origin-Resource-Policy: cross-origin ヘッダーを設定する必要があります。たとえば <script>、importScripts、<link>、<video>、<iframe> など

で確認できます。

iframe 内に埋め込まれたドキュメントでクロスオリジン分離を有効にするには、allow="cross-origin-isolated" 権限ポリシーを <iframe> タグに適用し、このドキュメントで説明しているのと同じ条件を満たしている必要があります。親フレームと子フレームを含むドキュメントのチェーン全体もクロスオリジンで分離する必要があります。

で確認できます。

重要な用語: 「同一サイト」と「same-origin」です。違いについて詳しくは、同一サイトと同一オリジンについてをご覧ください。

3. COEP のレポート専用 HTTP ヘッダーを使用して埋め込みリソースを評価する

COEP を完全に有効にする前に、 Cross-Origin-Embedder-Policy-Report-Only ヘッダーを使用して、ポリシーが 確認します埋め込みコンテンツをブロックせずにレポートを受け取ることができます。

最上位ドキュメントを含むすべてのドキュメントに再帰的に適用します。 使用できますレポート専用 HTTP ヘッダーの詳細については、以下をご覧ください。 レポートを使用して問題を監視する API。

4. COEP を有効にする

すべてが問題なく動作し、すべてのリソースを 正常に読み込まれました。Cross-Origin-Embedder-Policy-Report-Only を切り替えます すべてのヘッダーで同じ値を持つ Cross-Origin-Embedder-Policy ヘッダーを ドキュメント（iframe やワーカー スクリプトによって埋め込まれているドキュメントも含む）

試してみる: さまざまな COEP / CORP パラメータの影響を確認してください。

で確認できます。

注: Squoosh（画像最適化 PWA）は現在、COOP / COEP を使用して、Android Chrome 上で Wasm スレッド（および共有配列バッファ）にアクセスできるようにしています。

で確認できます。

注意: クロスオリジン分離を実現するには、すべてのサブリソースで明示的にオプトインする必要があるため、Google は Cross-Origin-Resource-Policy を大規模にデプロイする方法を検討してきました。そして、その逆の考え方、新しい COEP「認証情報不要」を考案しました。モードを使用すると、CORP ヘッダーなしでリソースを読み込むことができます。これにより、サブリソースが Cross-Origin-Resource-Policy ヘッダーを送信していることを確認する負担が軽減されることを願っています。ただし、credentialless モードは Chrome バージョン 96 から利用できますが、他のブラウザではまだサポートされていないため、デベロッパーによっては COOP または COEP のデプロイが難しいと感じることがあります。クロスオリジン分離をまだ有効にしない場合は、オリジン トライアルに登録し、他のブラウザで credentialless が利用可能になるまで待つことをおすすめします。

self.crossOriginIsolated で分離が成功したかどうかを判断する

self.crossOriginIsolated プロパティは、ウェブページが URL 内にある場合、true を返します。 クロスオリジン分離状態を維持し、すべてのリソースとウィンドウが 同じブラウジング コンテキスト グループにフィルタを適用できます。この API を使用すると、 ブラウザ コンテキスト グループを分離し、 performance.measureUserAgentSpecificMemory() などのパワフルな機能。

Chrome DevTools を使用して問題をデバッグする

画像など、画面に表示されるリソースについては、 リクエストがブロックされ、ページが 表示されます。ただし、サービス アカウントを スクリプトやスタイルなどの視覚的な影響が大きい場合、COEP の問題が 見過ごされてしまいます。その場合は、DevTools の [Network] パネルを使用します。条件 COEP に問題がある場合、 Status の (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) 選択します。

エントリをクリックすると、詳細が表示されます。

また、 [Application] パネル。[フレーム] に移動します。セクションに移動し 「上部」を開くリソース構造の内訳を確認できます。

<ph type="x-smartling-placeholder"></ph> SharedArrayBuffer の可用性など、iframe のステータスを確認できます。 その他

<ph type="x-smartling-placeholder"></ph> クロスオリジンかどうかなど、ポップアップ ウィンドウのステータスを確認することもできます。 できます。

Reporting API を使用して問題を監視する

Reporting API というメカニズムを使用して、 検出するためです。Reporting API を設定すると、 ユーザーCOEP がリソースの読み込みをブロックするたびにブラウザがレポートを送信できる ポップアップウィンドウを隔離しますChrome では、Reporting API をサポートしてきました。 バージョン 69 にアップグレードする必要があります。

注: Report-To ヘッダーで Reporting API をすでに使用していますか？Chrome は、新しいバージョンの Reporting API に移行しています。このバージョンでは Report-To が Reporting-Endpoints に置き換えられます。新しいバージョンへの移行を検討してください。詳しくは、Reporting API v1 に移行するをご覧ください。

Reporting API を設定する方法と、受信するサーバーを設定する方法 詳しくは、レポート API。

COEP レポートの例

COEP の例 報告 次のようなペイロードが返されます。

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

注意: blocked-url は下位互換性を確保するためにのみ用意されており、最終的に削除される予定です。

COOP レポートの例

COOP の例 report ペイロード ポップアップ ウィンドウを隔離して開くと、次のようになります。

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

異なるブラウジング コンテキスト グループが互いにアクセスしようとした場合（ 「レポート専用」モードの場合、COOP はレポートも送信します。たとえば postMessage() が試行された場合は次のようになります。

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

まとめ

COOP と COEP の HTTP ヘッダーを組み合わせて使用し、ウェブページを特別な HTTP ヘッダーに クロスオリジン分離状態を維持します。このコースでは self.crossOriginIsolated: ウェブページがクロスオリジンかどうかを判別します。 分離された状態にします。

新機能がリリースされ次第、この投稿をお知らせします。 クロスオリジン分離状態をサポートし、DevTools にさらなる改善が加えられます。 COEP や COEP の周辺地域の情報です

リソース

• 「クロスオリジン分離」が必要な理由パワフルな機能のために
• クロスオリジン分離を有効にするためのガイド
• Android Chrome 88 とパソコン版 Chrome の SharedArrayBuffer の更新 半角 92 文字（全角 45 文字）
• Google Cloud コンソールを使用すると、 measureUserAgentSpecificMemory()