FedCM 更新：顯示 iframe 網域

從 Chrome 142 開始，當 Relying Party (RP) 嵌入其他網站做為第三方 iframe 時，您可以選擇在 FedCM UI 中顯示 iframe 的網域。這項功能可讓使用者在登入嵌入其他網站的服務時，更清楚瞭解相關資訊。

背景

先前從跨來源 iframe 內叫用 FedCM 時，FedCM 對話方塊 UI 只會顯示頂層網站的網域。如果使用者互動的服務與頂層網站不同，可能會造成混淆。舉例來說，使用者可能正在瀏覽內嵌留言小工具的新聞網站。使用者嘗試登入留言小工具時，FedCM 對話方塊只會顯示新聞網站的網域，不會顯示留言服務的網域：

FedCM 對話方塊標題包含「使用 fedcm-demo-idp.dev 登入 news-site.example」文字。
從 iframe 內呼叫 FedCM 時，iframe 的網域不會顯示在 UI 中。

為解決這個問題，Chrome 現在提供 IdP 指出權杖傳送目標 iframe 網域的方式，除了頂層網站網域外，還包括 FedCM 對話方塊。讓使用者更清楚瞭解登入程序涉及哪些第三方服務。

FedCM 對話方塊標題包含以下文字：「Sign in to news-site.example with fedcm-demo-idp.dev. news-site.example embeds content from widget.example」。
從 iframe 呼叫 FedCM 時，IdP 可以選擇在 UI 對話方塊中同時顯示 iframe 和嵌入網站網域。

導入作業

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，因此現有實作項目不會受到這項變更影響。

如需更多詳細資料，請參閱在識別資訊提供者上實作 FedCM 的說明文件。

立即試用

如要觀看這項功能的即時示範，請前往 fedcm-demo-rp.dev/iframe。程式碼託管於示範 GitHub 存放區。

歡迎您對這項功能和其他 FedCM 功能提供意見。歡迎在 FedCM GitHub 存放區分享想法及回報問題。

瞭解詳情