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

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

Arthur Hemery
GitHub
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 を使用すると、フレーム カウントやその他のクロスサイト漏洩攻撃に使用できるプロパティは使用できませんが、postMessage と closed を介したウィンドウ間の基本的な通信は許可されます。

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

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

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

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

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 のみでは解決できないユースケースがある場合は、Intent to Experiment スレッドでフィードバックをお寄せください。

リソース