このページは Cloud Translation API によって翻訳されました。

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

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

Eiji Kitamura

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

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

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

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

サイト内のどの部分で SharedArrayBuffer が使用されているかを確認するには、次の 2 つの方法があります。

Chrome DevTools の使用
（上級者向け）サポート終了レポートの使用

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

Chrome DevTools の使用

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

SharedArrayBuffer を使用していると思われるページで Chrome DevTools を開きます。
[Console] パネルを選択します。

ページで 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

ファイル名とメッセージの末尾の行番号（common-bundle.js:535 など）は、SharedArrayBuffer の発生元を示します。サードパーティ製ライブラリの場合は、デベロッパーに連絡して問題を解決してください。ウェブサイトの一部として実装されている場合は、以下のガイドに沿ってクロスオリジン分離を有効にします。

クロスオリジン分離なしで SharedArrayBuffer が使用されている場合の DevTools Console の警告 — クロスオリジン分離なしで SharedArrayBuffer が使用されている場合の DevToools Console の警告。

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

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

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

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

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

実際に何も壊さずに、クロスオリジン分離を有効にした場合のサイトへの影響を評価できたら便利だと思いませんか？Cross-Origin-Opener-Policy-Report-Only および Cross-Origin-Embedder-Policy-Report-Only HTTP ヘッダーを使用すると、この操作を行うことができます。

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

注意: クロスオリジンアイソレーションを有効にすると、明示的にオプトインしていないクロスオリジンリソースの読み込みがブロックされ、最上位ドキュメントがポップアップウィンドウと通信できなくなります。クロスオリジン分離ではすべてのサブリソースを明示的にオプトインする必要があるため、Google は Cross-Origin-Resource-Policy を大規模にデプロイする方法を検討しています。そこで、その逆の方向に進むアイデアが浮かびました。新しい COEP の「認証情報なし」モードです。このモードでは、すべての認証情報を削除することで、CORP ヘッダーなしでリソースを読み込むことができます。これにより、サブリソースが Cross-Origin-Resource-Policy ヘッダーを送信していることを確認する負担が軽減されることを願っています。credentialless モードは Chrome バージョン 96 以降で利用可能ですが、他のブラウザではまだサポートされていません。そのため、この段階では COOP や COEP をデプロイするのが難しいと感じるデベロッパーもいるかもしれません。また、Cross-Origin-Opener-Policy: same-origin ヘッダーを使用すると、OAuth や支払いなど、クロスオリジンウィンドウの操作を必要とする統合が中断されることが知られています。この問題を軽減するため、条件を緩和して Cross-Origin-Opener-Policy: same-origin-allow-popups へのクロスオリジン分離を有効にすることを検討しています。これにより、自動的に開いたウィンドウとの通信が可能になります。クロスオリジン分離を有効にしたいものの、これらの課題によってブロックされている場合は、オリジントライアルに登録して、新しいモードが利用可能になるまで待つことをおすすめします。これらの新しいモードが利用可能になるまで、オリジントライアルを終了する予定はありません。

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

クロスオリジン分離の影響を受けるリソースを特定したら、次に、それらのクロスオリジンリソースを実際に有効にする方法の一般的なガイドラインを示します。

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

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

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

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

単純なサーバーはヘッダーの送信をサポートしていないため、ローカルサーバーでクロスオリジン分離を有効にするのは面倒な作業になる可能性があります。コマンドラインフラグ --enable-features=SharedArrayBuffer を使用して Chrome を起動すると、クロスオリジン分離を有効にせずに SharedArrayBuffer を有効にできます。各プラットフォームでコマンドラインフラグを使用して Chrome を実行する方法をご覧ください。