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

クロスオリジン分離により、ウェブページで 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. [Console] パネルを選択します。
  3. ページで SharedArrayBuffer が使用されている場合は、次のメッセージが表示されます。
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
  4. メッセージの末尾にあるファイル名と行番号（例: common-bundle.js:535）は、SharedArrayBuffer の取得元を示しています。サードパーティ ライブラリの場合は、デベロッパーに連絡して問題を解決してください。ウェブサイトの一部として実装されている場合は、以下のガイドに従ってクロスオリジン分離を有効にします。
クロスオリジン分離なしで SharedArrayBuffer が使用されている場合の DevToools コンソール警告
SharedArrayBuffer をクロスオリジン分離なしで使用した場合の DevToools コンソールの警告

（上級）サポート終了レポートの使用

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

  1. サポート終了レポート サーバーを設定し、レポート URL を取得します。そのためには、公開サービスを使用するか、独自のサービスを構築します。
  2. URL を使用して、SharedArrayBuffer を配信する可能性のあるページに次の HTTP ヘッダーを設定します。
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. ヘッダーの反映が始まると、登録したエンドポイントで非推奨レポートの収集が開始されるはずです。

実装例については、https://cross-origin-isolation.glitch.me をご覧ください。

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

クロスオリジン分離を有効にすることで、実際に何も破損することなく、サイトに与える影響を評価できると素晴らしいと思いませんか？これは、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 の取得リクエストの場合は、request.mode が cors に設定されていることを確認してください。
  3. 読み込まれる iframe 内で SharedArrayBuffer などの強力な機能を使用するには、allow="cross-origin-isolated" を <iframe> に追加します。
  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 を返していることを確認して、ページがクロスオリジン分離されていることを確認します。

リソース