パーティショニング ポップイン: デベロッパー トライアルのウェブポップアップの新しいアプローチ

Natalia Markoborodova
Natalia Markoborodova
X GitHub LinkedIn

Chrome 132 以降、デベロッパーは、ウェブ ポップアップの新しいアプローチであるパーティション化されたポップインのデベロッパー トライアルに参加できます。このデベロッパー トライアルはパソコンでのみご利用いただけます。この機能は Android ではまだご利用いただけません。

分割ポップインは、ログインや簡単な確認など、短時間の操作を目的とした新しいタイプのポップアップです。このブラウザは、次の 2 つの独自の機能を備えたウェブ コンテンツを読み込みます。

パーティション分割されたポップアップが必要な理由

パーティション分割されたポップインは、パーティション分割された iframe のプライバシー プロパティとポップアップのセキュリティ プロパティを維持するように設計されています。

サードパーティの Cookie を使用しないブラウジングをオプトインするユーザーが増えるにつれて、後でサードパーティのコンテキストで取得するためにポップアップにデータを保存するフロー（サイト間でユーザー セッションを維持するなど）が中断される可能性があります。パーティション分割されたポップインは、この問題に対処することを目的としています。

パーティション分割されたポップアップの仕組み

パーティション分割されたポップインのストレージは、そのオープナーにパーティション分割されます。ストレージ パーティショニングにより、クロスサイト データへのアクセスが制限され、トラッキング リスクとスクリプト挿入攻撃が軽減されます。ストレージ パーティショニングの仕組みについては、ドキュメントをご覧ください。

third-party.example のコンテンツを埋め込んでいる opener.example ウェブサイトについて考えてみましょう。opener.example にパーソナライズされたコンテンツを表示するには、ユーザーが third-party.example にログインする必要があります。ユーザーのブラウザでサードパーティ Cookie がブロックされている場合、現在のポップアップ フローは次のようになります。

  1. ユーザーがログイン ボタンをクリックします。
  2. ダイアログが開きます。
  3. ユーザーが third-party.example の最上位コンテキストからログインし、パーティショニングされていない認証 Cookie が書き込まれます。
  4. opener.example に埋め込まれた third-party.example コンテンツは、ファーストパーティ コンテキストで表示されたときに、third-party.example に書き込まれた独自のトップレベル Cookie にアクセスできません。これは、認証 Cookie がパーティション化されておらず、サードパーティ Cookie であるためです。
「third-party.example」の iframe が「opener.example」に埋め込まれ、「third-party.example」がポップアップで開かれるポップアップ ユーザー認証フロー。この iframe は、'third-party.example' ポップアップのトップレベル コンテキストで Cookie が設定されたため、独自のパーティション分割されていない Cookie にアクセスできません。
ポップアップ フロー: opener.example に埋め込まれた third-party.example iframe は、third-party.example ポップアップの最上位コンテキストで設定された独自のパーティション化されていない Cookie セットにアクセスできません。

パーティション分割されたポップアップのストレージは、オープナーにパーティション分割されます。これにより、フローのステップ 3 ～ 4 が変更されます。

  1. ユーザーが third-party.example のトップレベル コンテキストからログインします。パーティション分割されたポップインで開いているため、ストレージは opener.example でパーティション分割されます。

  2. opener.example に埋め込まれた third-party.example コンテンツは、同じパーティション ストレージを共有しているため、ポップインで設定された独自の Cookie にアクセスできます。

パーティショニングされたポップイン ユーザー認証フロー。「third-party.example」のポップイン ウィンドウが「opener.example」で開かれています。このポップイン内の iframe は、「third-party.example」のトップレベル コンテキストで設定された Cookie にアクセスできます
パーティション化されたポップイン フロー: opener.example に埋め込まれた third-party.example iframe は、third-party.example ポップインのトップレベル コンテキストで設定された独自のパーティション化された Cookie セットにアクセスできます。これは、Cookie が opener.example によってパーティション化されているためです。

パーティション分割されたポップインは、ポップアップの表示元とポップインが関連していることをユーザーに理解してもらうことを目的としています。

  • ユーザーが別のタブに切り替えると、モーダルがオープナー タブがアクティブな場合にのみ表示されるのと同じように、ポップインは自動的に非表示になり、アクセスできなくなります。
  • ユーザーがオープナー タブに戻ると、ポップインが再び表示されます。
  • ユーザーはポップインのブラウザのアドレスバーで変更を行うことはできません。
パーティション分割されたポップインによるストレージのパーティショニング: ポップイン内に設定されたストレージに、オープナー ページに埋め込まれた iframe からアクセスできます。

試してみる

Chrome 132 では、パーティション分割されたポップイン機能のデベロッパー トライアルが導入されます。つまり、この機能はフラグの背後で利用可能になります。パーティション分割されたポップインを試す方法は次のとおりです。

  1. Chrome 132 以降を使用していることを確認します。
  2. chrome://flags#partitioned-popins に移動して、フィーチャー トグルを有効にします。
  3. Chrome を再起動します。
  4. デモをお試しください。

ウェブサイトでパーティション分割されたポップインを使用する

ウェブサイトで分割されたポップインを使用するには、popin パラメータを渡して window.open() メソッドを呼び出します。

window.open("third-party-popin.example", "_blank", "popin");

フィードバックをお寄せください

Google では、パーティション分割されたポップインを検討しており、デベロッパーの皆様からのフィードバックを求めています。考えられるユースケース シナリオは次のとおりです。

  • ユーザー認証フロー。カスタム認証フローが実装されていて、認証がサイトとは異なるドメインで行われる場合（たとえば、site.example ユーザーが auth-site.example にログインする場合）、ポップインで認証ページを開いて、オープナー ページのセッション Cookie を使用してみてください。
  • 埋め込みコンテンツ。パーティション分割されたポップインを試して、設定ダイアログ、画像、PDF などのサードパーティ ウィジェットの追加コンテンツ（通常はポップアップで読み込まれるその他のコンテンツ）を、より大きなウィンドウでレンダリングして表示します。この場合、パーティション分割されたポップインは、サードパーティ ウィジェットとサイトの間でユーザー セッションの状態を保持することを目的としています。

ソリューションにこれらのシナリオがある場合、他のユースケースを検討している場合、またはこの機能の将来を形作ることに貢献したい場合は、ぜひお試しください。

  • 問題は発生しましたか？
  • ユーザー エクスペリエンスを向上させるためのご提案はありますか？
  • UI を改善するための提案はありますか？具体的には、オープナーとポップインが関連していることが UI で明確に示されていると思いますか？
  • この機能はどの程度役に立っていますか？
  • パーティション分割されたポップインを使用したい他のユースケースはありますか？

ご意見を GitHub で問題として報告してください。