クロスオリジンアイソレーションを有効にするためのガイド

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

— 更新済み
Available in: Deutsch、English、Español、Français、Português、Русский、中文、한국어
えーじ
えーじ
TwitterGitHubHomepage
このページ内

このガイドでは、Cross-Origin Isolation (クロスオリジンアイソレーション) を有効にする方法を説明します。クロスオリジンアイソレーションは、SharedArrayBuffer や performance.measureUserAgentSpecificMemory()、高精度の高解像度タイマーを使用する場合に必要となります。

クロスオリジンアイソレーションを有効にする場合は、広告の配置など、ウェブサイト上の他のクロスオリジンリソースに与える影響を評価してください。

SharedArrayBuffer がウェブサイト上のどこで使用されているかを判断します。

Chrome 92 以降、SharedArrayBuffer を使用する機能は、クロスオリジンアイソレーションがないと動作しなくなります。SharedArrayBuffer が非推奨となったことを告げるメッセージを見てこのページにたどり着いたのであれば、お使いのウェブサイトまたはそのウェブサイトに埋め込まれているリソースの 1 つが SharedArrayBuffer を使用している可能性があります。これが非推奨となったためにウェブサイトサイトで問題が発生するということがないように、まずは使用されている場所を特定します。

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

  • ChromeDevTools を使う
  • (高度) 非推奨のレポート機能を使う

SharedArrayBufferを使用している場所がすでにわかっている場合は、クロスオリジンアイソレーションの影響を分析するにスキップしてください。

ChromeDevTools を使う #

Chrome DevTools を使用すると、開発者はウェブサイトを検査できます。

  1. SharedArrayBuffer を使用していると思われるページで Chrome DevTools を開きます。
  2. コンソールパネルを選択します。
  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 がどこから取得されているのかを示しています。サードパーティのライブラリの場合は、開発者に連絡して問題を修正してください。ウェブサイトの一部として実装されている場合は、以下のガイドに従って、クロスオリジンアイソレーションを有効にしてください。
DevToools Console warning when SharedArrayBuffer is used without cross-origin isolation
DevToools Console warning when SharedArrayBuffer is used without cross-origin isolation.

(高度) 非推奨のレポート機能を使う #

一部のブラウザには、非推奨になる 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。

クロスオリジンアイソレーションの影響を分析する{：#analysis} #

クロスオリジンアイソレーションを有効にすることがサイトに与える影響を何も破損せずに評価できたら非常に便利だと思いませんか？Cross-Origin-Opener-Policy-Report-Only および Cross-Origin-Embedder-Policy-Report-Only ヘッダーを使用すると、それを実際に行うことができます。

  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> のようにする)。
  3. iframe にロードされたクロスオリジンリソースに iframe の別のレイヤーが含まれる場合は、このセクションで説明している手順を再帰的に適用してから続行してください。
  4. すべてのクロスオリジンリソースがオプトインされていることを確認したら、iframe にロードされたクロスオリジンリソースに対して Cross-Origin-Embedder-Policy: require-corp ヘッダーを設定します。
  5. 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 を返すことを確認して、ページのクロスオリジンアイソレーションが有効であることを確認します。

リソース #

最終更新: — 記事を改善する
Return to all articles
共有する
By Chrome DevRel