ポップアップを操作する際に、クロスオリジン分離とクロスサイト漏洩保護を実現します。
クロスオリジンのオープナー ポリシー（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 のみを使用して解決できないユースケースがある場合は、テストに関する意向のスレッドにフィードバックを残してください。