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

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

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

クロスオリジン分離を有効にする場合は、ウェブサイト上の他のクロスオリジン リソース(広告プレースメントなど)への影響について評価してください。

サイト内のどの部分で 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 が使用されている場合の DevTools Console の警告
クロスオリジン分離なしで SharedArrayBuffer が使用されている場合の DevToools Console の警告。

(上級者向け)サポート終了レポートの使用

一部のブラウザには、指定したエンドポイントに 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> など)を設定して、有効にします。JavaScript フェッチ リクエストの場合は、request.modecors に設定されていることを確認します。
  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.crossOriginIsolatedtrue を返すことを確認して、ページがクロスオリジン分離されていることを確認します。

リソース