FedCM の更新: iframe ドメインを表示

Chrome 142 以降では、RP が別のサイトのサードパーティ iframe として埋め込まれている場合に、iframe のドメインを FedCM UI に表示するかどうかを選択できます。この機能により、別のウェブサイトに埋め込まれたサービスにログインする際のユーザーの透明性が向上します。

背景

以前は、クロスオリジン iframe 内から FedCM が呼び出されると、FedCM ダイアログ UI にはトップレベル サイトのドメインのみが表示されていました。ユーザーが操作していたサービスがトップレベル サイトと異なる場合、ユーザーに混乱が生じる可能性があります。たとえば、ユーザーがコメント ウィジェットが埋め込まれたニュース ウェブサイトにアクセスしているとします。ユーザーがコメント ウィジェットにログインしようとすると、FedCM ダイアログにはコメント サービスのドメインではなく、ニュース ウェブサイトのドメインのみが表示されます。

FedCM ダイアログのタイトルに「fedcm-demo-idp.dev で news-site.example にログイン」というテキストが含まれています。
iframe 内から FedCM が呼び出されると、iframe のドメインは UI に表示されません。

この問題を解決するため、Chrome では、IdP が FedCM ダイアログで、最上位サイトのドメインに加えて、トークンの送信先となる iframe のドメインを指定できるようになりました。これにより、ログイン プロセスに関与しているサードパーティ サービスをユーザーがより明確に把握できるようになります。

FedCM ダイアログのタイトルに「fedcm-demo-idp.dev を使用して news-site.example にログインします。news-site.example には widget.example のコンテンツが埋め込まれています」というテキストが含まれています。
iframe 内から FedCM が呼び出されると、IdP は iframe と埋め込みサイトの両方のドメインを UI ダイアログに表示することを選択できます。

実装

IdP のクライアント メタデータ エンドポイントは、client_id とオプションの top_frame_origin の両方を受け取ります。次に例を示します。

GET /client_metadata_endpoint?client_id=1234&top_frame_origin=https%3A%2F%2Ftop-frame.example HTTP/1.1
Host: idp.example
Origin: https://iframe.example/
Accept: application/json
Sec-Fetch-Dest: webidentity

IdP は、RP とトップレベル サイトが同じパーティであるかどうかを判断するカスタム ロジックを実装できます。RP が最上位サイトと iframe の両方を所有している場合、IdP は最上位ドメインのみを表示することを選択できます。これがデフォルトの動作です。両方のドメインを表示するには、IdP が クライアント メタデータ エンドポイントのレスポンスに client_is_third_party_to_top_frame_origin プロパティを含め、その値を true に設定する必要があります。

クライアント メタデータ エンドポイントのレスポンスの例を次に示します。

// In the client metadata endpoint
const clientIsThirdParty = isClientOriginDifferentFromTopFrame();
responseData = {
  privacy_policy_url: "..."
  terms_of_service_url: "...",
  client_is_third_party_to_top_frame_origin: clientIsThirdParty,
}

このプロパティが true に設定され、RP が別のサイトの iframe として埋め込まれている場合、FedCM ダイアログにはトップレベル サイトのドメインと iframe のドメインの両方が表示されます。これにより、ユーザーはログイン リクエストに関するより多くのコンテキスト情報を得ることができます。

client_is_third_party_to_top_frame_origin のデフォルト値は false であるため、既存の実装はこの変更の影響を受けません。

詳しくは、ID プロバイダで FedCM を実装する際のドキュメントをご覧ください。

試してみる

この機能のライブデモは、fedcm-demo-rp.dev/iframe でご覧いただけます。コードは デモの GitHub リポジトリでホストされています。

この機能やその他の FedCM 機能に関するフィードバックをお待ちしております。ご意見や問題のご報告は、FedCM GitHub リポジトリからお寄せください。

その他の情報