クロスオリジンアイソレーションを有効にするためのガイド
クロスオリジンアイソレーションを使用すると、ウェブページで SharedArrayBuffer のような強力な機能を使用できるようになります。この記事では、ウェブサイトでクロスオリジンアイソレーションを有効にする方法について説明します。
このガイドでは、Cross-Origin Isolation (クロスオリジンアイソレーション) を有効にする方法を説明します。クロスオリジンアイソレーションは、SharedArrayBuffer や performance.measureUserAgentSpecificMemory()、高精度の高解像度タイマーを使用する場合に必要となります。
クロスオリジンアイソレーションを有効にする場合は、広告の配置など、ウェブサイト上の他のクロスオリジンリソースに与える影響を評価してください。 Chrome 92 以降、 Chrome DevTools を使用すると、開発者はウェブサイトを検査できます。 一部のブラウザには、非推奨になる API を指定されたエンドポイントに報告する機能があります。 こちらの実装例を参照してください： https://first-party-test.glitch.me。SharedArrayBuffer がウェブサイト上のどこで使用されているかを判断します。 SharedArrayBuffer を使用する機能は、クロスオリジンアイソレーションがないと動作しなくなります。SharedArrayBuffer が非推奨となったことを告げるメッセージを見てこのページにたどり着いたのであれば、お使いのウェブサイトまたはそのウェブサイトに埋め込まれているリソースの 1 つが SharedArrayBuffer を使用している可能性があります。これが非推奨となったためにウェブサイトサイトで問題が発生するということがないように、まずは使用されている場所を特定します。SharedArrayBuffer がサイトのどこで使用されているかわからない場合は、次の 2 つの方法で確認できます。SharedArrayBufferを使用している場所がすでにわかっている場合は、クロスオリジンアイソレーションの影響を分析するにスキップしてください。ChromeDevTools を使う #
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:535common-bundle.js:535) は、 SharedArrayBuffer がどこから取得されているのかを示しています。サードパーティのライブラリの場合は、開発者に連絡して問題を修正してください。ウェブサイトの一部として実装されている場合は、以下のガイドに従って、クロスオリジンアイソレーションを有効にしてください。
(高度) 非推奨のレポート機能を使う #
SharedArrayBuffer を提供している可能性のあるページに次の HTTP ヘッダーを設定します。Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
クロスオリジンアイソレーションの影響を分析する{：#analysis} #
クロスオリジンアイソレーションを有効にすることがサイトに与える影響を何も破損せずに評価できたら非常に便利だと思いませんか？Cross-Origin-Opener-Policy-Report-Only および Cross-Origin-Embedder-Policy-Report-Only ヘッダーを使用すると、それを実際に行うことができます。
- トップレベルドキュメントで
Cross-Origin-Opener-Policy-Report-Only: same-originを設定します。名前から分かるように、このヘッダーは、COOP: same-originがサイトに与えると思われる影響に関するレポートのみを送信します。ポップアップウィンドウとの通信が無効化されることはありません。 - レポートを設定し、レポートを受信して保存するようにウェブサーバーを設定します。
- トップレベルのドキュメントで
Cross-Origin-Embedder-Policy-Report-Only: require-corpを設定します。ここでも、COEP: require-corpを有効化することのインパクトをサイトに影響を与えずに確認することができます。このヘッダーは、前のステップでセットアップした同じレポートサーバーにレポートを送信するように設定できます。
クロスオリジンアイソレーションの影響を軽減する #
以下は、どのリソースがクロスオリジンアイソレーションの影響を受けるのかを判断した後に、そうしたクロスオリジンリソースを実際にオプトインする際のガイドラインです。
- 画像、スクリプト、スタイルシート、iframe などのクロスオリジンリソースに対して、
Cross-Origin-Resource-Policy: cross-originヘッダーを設定します。同じサイトのリソースには、Cross-Origin-Resource-Policy: same-siteヘッダーを設定します。 - リソースが CORS で提供される場合は、トップレベルドキュメントの HTML タグに
crossorigin属性を設定します (<img src="example.jpg" crossorigin>のようにする)。 - 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を返すことを確認して、ページのクロスオリジンアイソレーションが有効であることを確認します。
リソース #
- COOP と COEP を使用してウェブサイトのクロスオリジンアイソレーションを有効化する
- Android Chrome88 および DesktopChrome92 における SharedArrayBuffer の更新