ポップアップを操作する際に、クロスオリジン分離とクロスサイト漏洩保護を実現します。
クロスオリジンのオープナー ポリシー(COOP)の新しい値 restrict-properties
が利用可能になりました。これにより、セキュリティ上のメリットがもたらされ、クロスオリジン分離を簡単に導入できるようになります。また、支払いや認証などのユースケースで、サイトがサードパーティのポップアップとやり取りできるようにもなります。
restrict-properties
のテストを開始するには、Chrome 116 以降のオリジン トライアルに参加してください。
restrict-properties
を使用する理由
restrict-properties
の主なユースケースは次の 2 つです。
- 破損することなくクロスサイト リークを防止する。
- サイトをクロスオリジン分離する。
中断なしでクロスサイト漏洩を防ぐ
デフォルトでは、どのウェブサイトでもアプリをポップアップで開き、そのアプリケーションへの参照を取得できます。
悪意のあるウェブサイトは、このことを悪用してクロスサイト リークなどの攻撃を実行する可能性があります。このリスクを軽減するには、Cross-Origin-Opener-Policy
(COOP)ヘッダーを使用します。
これまで、Cross-Origin-Opener-Policy
のオプションは限られていました。次のいずれかを行います。
same-origin,
を設定して、ポップアップとのクロスオリジン インタラクションをすべてブロックします。same-origin-allow-popups
を設定すると、サイトをポップアップで開くすべてのクロスオリジン インタラクションがブロックされます。unsafe-none
を設定すると、ポップアップとのすべてのクロスオリジン インタラクションが許可されます。
これにより、ウェブサイトがポップアップで開き、オープナーを操作して COOP を強制適用できなくなりました。これにより、シングル ログインや支払いなどの重要なユースケースが、クロスサイト漏洩から保護されなくなりました。
Cross-Origin-Opener-Policy: restrict-properties
はこれを解決します。
restrict-properties
では、フレームカウントやその他のクロスサイト リーク攻撃に使用できるプロパティは使用できませんが、postMessage
と closed
を介したウィンドウ間の基本的な通信は許可されます。
これにより、主要なユースケースを維持しながらサイトのセキュリティを強化できます。例:
- ポップアップでサービスを提供する場合、
Cross-Origin-Opener-Policy: restrict-properties
を設定すると、さまざまなクロスサイト リーク攻撃からご自身を守ることができます。 これまで開けていたページは引き続き開くことができます。 - クロスオリジンのポップアップにアクセスする必要がある場合は、
Cross-Origin-Opener-Policy: restrict-properties
を設定すると、iframe のカウントからサイトを保護できます。現在開くことができるポップアップと同じセットを開くことができます。 - 開いた側と開かれた側の両方がヘッダーを設定し、ページがクロスオリジンの場合、どちらかがヘッダーを設定したときと同じように動作します。同一オリジンの場合は、完全アクセス権が付与されます。
サイトをクロスオリジン分離にする
クロスオリジン分離が必要な理由
一部のウェブ API は、Spectre などのサイドチャネル攻撃のリスクを高めます。このリスクを軽減するため、ブラウザにはクロスオリジン分離と呼ばれる、オプトイン ベースの隔離された環境が用意されています。クロスオリジン分離状態のウェブページは、SharedArrayBuffer、performance.measureUserAgentSpecificMemory()、高精度タイマーなどの特権機能を、より高い解像度で使用できます。また、オプトインされていない限り、オリジンを他のオリジンから分離できます。
これまで、これらの API を使用するには、Cross-Origin-Opener-Policy:
same-origin
を設定する必要がありました。ただし、これにより、シングル サインオンや支払いなど、必要なクロスオリジン ポップアップ フローが破棄されます。
Cross-Origin-Opener-Policy: same-origin
の代わりに Cross-Origin-Opener-Policy: restrict-properties
を使用して、クロスオリジン分離を有効にできるようになりました。オープン リレーションシップを切断するのではなく、window.postMessage()
と window.closed
の最小通信サブセットに制限するだけです。
次の 2 つのヘッダーを使用して、クロスオリジン分離を有効にできます。
Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp
または
Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless
credentialless
の詳細については、COEP: credentialless
を使用して CORP ヘッダーのないクロスオリジン リソースを読み込むをご覧ください。
デモ
クロスオリジン分離デモで、さまざまなヘッダー オプションをお試しください。
オリジン トライアルをテストする
Cross-Origin-Opener-Policy: restrict-properties
をテストするには、オリジン トライアルを有効にします。
ブラウザ サポート
Cross-Origin-Opener-Policy: restrict-properties
は現在、Chrome でのみサポートされています。他のブラウザも標準化の議論に積極的に関与しています。
よくある質問
ウェブサイトが同一オリジンのポップアップと通信する必要がある場合、COOP: restrict-properties
を使用してクロスオリジン分離を有効にすべきですか?
ポップアップとメインページの両方で COOP: restrict-properties
を設定しても、制限は発生しません。ポップアップまたはメインページにのみ設定すると、同じオリジンであっても、オープンャー全体で postMessage
と closed
以外のプロパティにアクセスできなくなります。
許可されているプロパティ セットは固定されているか?
これまでのフィードバックに基づくと、window.postMessage
と window.closed
はほとんどのワークフローで十分と思われますが、他のプロパティへの開放については引き続き検討中です。postMessage
と closed
のみを使用して解決できないユースケースがある場合は、テストに関する意向のスレッドにフィードバックを残してください。