クロスオリジン分離を有効にするためのガイド

クロスオリジン分離により、ウェブページで SharedArrayBuffer などの強力な機能を使用できるようになります。この記事では、ウェブサイトでクロスオリジン分離を有効にする方法について説明します。

Eiji Kitamura

このガイドでは、クロスオリジン分離を有効にする方法について説明します。SharedArrayBuffer、performance.measureUserAgentSpecificMemory()、または高精度タイマーを使用する場合は、クロスオリジン分離が必要です。

クロスオリジン分離を有効にする場合は、広告の配置など、ウェブサイト上の他のクロスオリジン リソースに与える影響を評価します。

ウェブサイトのどこで SharedArrayBuffer が使用されているかを特定する

Chrome 92 以降、SharedArrayBuffer を使用する機能は、クロスオリジン分離を構成しないと機能しなくなります。SharedArrayBuffer の非推奨メッセージが表示されてこのページにアクセスした場合は、ウェブサイトまたはウェブサイトに埋め込まれたリソースのいずれかで SharedArrayBuffer が使用されている可能性があります。非推奨化によってウェブサイトが破損しないようにするには、まず、どこで使用されているかを特定します。

サイトのどこで SharedArrayBuffer が使用されているかわからない場合は、次の 2 つの方法で確認できます。

  • Chrome DevTools の使用
  • （上級）非推奨のレポートの使用

SharedArrayBuffer を使用している場所がすでにわかっている場合は、クロスオリジン分離の影響を分析するに進んでください。

Chrome DevTools の使用

Chrome DevTools を使用すると、デベロッパーはウェブサイトを検査できます。

  1. SharedArrayBuffer を使用している可能性があると思われるページで Chrome DevTools を開きます。
  2. [コンソール] パネルを選択します。
  3. ページで SharedArrayBuffer が使用されている場合は、次のメッセージが表示されます。
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See  for more details. common-bundle.js:535
  4. メッセージの末尾にあるファイル名と行番号（common-bundle.js:535 など）は、SharedArrayBuffer の発生元を示します。サードパーティのライブラリの場合は、デベロッパーに連絡して問題を修正してください。ウェブサイトの一部として実装されている場合は、以下のガイドに沿ってクロスオリジン分離を有効にします。
クロスオリジン分離なしで SharedArrayBuffer が使用された場合の DevTools Console の警告。
クロスオリジン分離なしで SharedArrayBuffer が使用された場合の DevTools Console の警告。

（上級）非推奨のレポートの使用

一部のブラウザには、指定されたエンドポイントに非推奨の API をレポートする機能があります。

  1. 非推奨レポート サーバーをセットアップして、レポート URL を取得します。これは、公開サービスを使用するか、自分で構築することで実現できます。
  2. URL を使用して、SharedArrayBuffer を提供する可能性のあるページに次の HTTP ヘッダーを設定します。
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. ヘッダーの伝播が開始されると、登録したエンドポイントで非推奨レポートの収集が開始されます。

実装例をご覧ください。

クロスオリジン分離の影響を分析する

クロスオリジン分離を有効にした場合、サイトにどのような影響があるかを、実際にサイトを壊すことなく評価できたら便利だと思いませんか？Cross-Origin-Opener-Policy-Report-Only と Cross-Origin-Embedder-Policy-Report-Only の HTTP ヘッダーを使用すると、まさにそのことが可能になります。

  1. 最上位のドキュメントで Cross-Origin-Opener-Policy-Report-Only: same-origin を設定します。名前のとおり、このヘッダーは COOP: same-origin がサイトに与える影響に関するレポートのみを送信します。ポップアップ ウィンドウとの通信を実際に無効にすることはありません。
  2. レポートを設定し、レポートを受信して保存するようにウェブサーバーを構成します。
  3. 最上位のドキュメントで Cross-Origin-Embedder-Policy-Report-Only: require-corp を設定します。このヘッダーを使用すると、サイトの機能に影響を与えることなく、COEP: require-corp を有効にした場合の影響を確認できます。このヘッダーを構成して、前の手順で設定したレポート サーバーにレポートを送信できます。

クロスオリジン分離の影響を軽減する

クロスオリジン分離の影響を受けるリソースを特定したら、クロスオリジン リソースを実際にオプトインするための一般的なガイドラインは次のとおりです。

  1. 画像、スクリプト、スタイルシート、iframe などのクロスオリジン リソースで、Cross-Origin-Resource-Policy:cross-origin ヘッダーを設定します。同じサイトのリソースで、Cross-Origin-Resource-Policy:same-site ヘッダーを設定します。
  2. CORS を使用して読み込み可能なリソースについては、HTML タグで crossorigin 属性（<img src="example.jpg" crossorigin> など）を設定して、CORS が有効になっていることを確認してください。JavaScript の fetch リクエストについては、request.mode が cors に設定されていることを確認してください。
  3. 読み込まれた iframe 内で SharedArrayBuffer などの強力な機能を使用する場合は、<iframe> に allow="cross-origin-isolated" を追加します。
  4. iframe またはワーカー スクリプトに読み込まれたクロスオリジン リソースに、別のレイヤの iframe またはワーカー スクリプトが含まれている場合は、このセクションで説明した手順を再帰的に適用してから次に進みます。
  5. すべてのクロスオリジン リソースがオプトインされていることを確認したら、iframe とワーカー スクリプトで Cross-Origin-Embedder-Policy: require-corp ヘッダーをオンにします（これは同一オリジンかクロスオリジンかに関係なく必要です）。
  6. postMessage() を介した通信を必要とするクロスオリジン ポップアップ ウィンドウがないことを確認します。クロスオリジン分離が有効になっている場合、それらを動作させ続ける方法はありません。通信をクロスオリジン分離されていない別のドキュメントに移動するか、別の通信方法（HTTP リクエストなど）を使用します。

クロスオリジン分離を有効にする

クロスオリジン分離によって影響を軽減した後、クロスオリジン分離を有効にするための一般的なガイドラインは次のとおりです。

  1. 最上位のドキュメントに Cross-Origin-Opener-Policy: same-origin ヘッダーを設定します。Cross-Origin-Opener-Policy-Report-Only: same-origin を設定していた場合は、置き換えます。これにより、トップレベル ドキュメントとポップアップ ウィンドウ間の通信がブロックされます。
  2. 最上位のドキュメントに Cross-Origin-Embedder-Policy: require-corp ヘッダーを設定します。Cross-Origin-Embedder-Policy-Report-Only: require-corp を設定していた場合は、置き換えます。これにより、オプトインされていないクロスオリジン リソースの読み込みがブロックされます。
  3. コンソールで self.crossOriginIsolated が true を返すことを確認して、ページがクロスオリジン分離されていることを確認します。

リソース