restricted-properties を使用してポップアップ操作を保護する

ポップアップを操作する際に、クロスオリジン分離とクロスサイト漏洩保護を実現します。

Arthur Hemery
Maud Nalpas
Maud Nalpas

クロスオリジンのオープナー ポリシー(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 では、フレームカウントやその他のクロスサイト リーク攻撃に使用できるプロパティは使用できませんが、postMessageclosed を介したウィンドウ間の基本的な通信は許可されます。

これにより、主要なユースケースを維持しながらサイトのセキュリティを強化できます。例:

  • ポップアップでサービスを提供する場合、Cross-Origin-Opener-Policy: restrict-properties を設定すると、さまざまなクロスサイト リーク攻撃からご自身を守ることができます。 これまで開けていたページは引き続き開くことができます。
  • クロスオリジンのポップアップにアクセスする必要がある場合は、Cross-Origin-Opener-Policy: restrict-properties を設定すると、iframe のカウントからサイトを保護できます。現在開くことができるポップアップと同じセットを開くことができます。
  • 開いた側と開かれた側の両方がヘッダーを設定し、ページがクロスオリジンの場合、どちらかがヘッダーを設定したときと同じように動作します。同一オリジンの場合は、完全アクセス権が付与されます。

サイトをクロスオリジン分離にする

クロスオリジン分離が必要な理由

一部のウェブ API は、Spectre などのサイドチャネル攻撃のリスクを高めます。このリスクを軽減するため、ブラウザにはクロスオリジン分離と呼ばれる、オプトイン ベースの隔離された環境が用意されています。クロスオリジン分離状態のウェブページは、SharedArrayBufferperformance.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 を設定しても、制限は発生しません。ポップアップまたはメインページにのみ設定すると、同じオリジンであっても、オープンャー全体で postMessageclosed 以外のプロパティにアクセスできなくなります。

許可されているプロパティ セットは固定されているか?

これまでのフィードバックに基づくと、window.postMessagewindow.closed はほとんどのワークフローで十分と思われますが、他のプロパティへの開放については引き続き検討中です。postMessageclosed のみを使用して解決できないユースケースがある場合は、テストに関する意向のスレッドにフィードバックを残してください。

リソース