From Chrome 142, you can opt to display the iframe's domain in the FedCM UI when the Relying Party (RP) is embedded as a third-party iframe on another site. This feature enhances transparency for users when they are signing in to a service that's embedded on a different website.

## Background

Previously, when FedCM was invoked from within a cross-origin iframe, the FedCM dialog UI would only display the top-level site's domain. This could create confusion for users if the service they were interacting with was different from the top-level site. For example, a user might be on a news website that embeds a commenting widget. When the user tries to sign in to the commenting widget, the FedCM dialog would only show the news website's domain, not the commenting service's domain:
![FedCM dialog title includes the text: 'Sign in to news-site.example with fedcm-demo-idp.dev'.](https://developer.chrome.com/static/blog/fedcm-chrome-142-updates/image/fedcm-no-iframe-origin.png)When FedCM is called from within the iframe, the iframe's domain isn't displayed in the UI.

To address this, Chrome now has a way for IdPs to indicate the iframe's domain where the token is sent to in the FedCM dialog in addition to the top-level site's domain. This provides a clearer picture to the user about which third-party services are involved in the sign-in process.
![FedCM dialog title includes the text: 'Sign in to news-site.example with fedcm-demo-idp.dev. news-site.example embeds content from widget.example'.](https://developer.chrome.com/static/blog/fedcm-chrome-142-updates/image/fedcm-with-iframe-origin.png)When FedCM is called from within the iframe, the IdP can choose to display both the iframe and the embedding site domains in the UI dialog.

## Implementation

The IdP's[client metadata endpoint](https://developer.chrome.com/docs/identity/fedcm/implement/identity-provider#client-metadata-endpoint)receives both a`client_id`and optionally a`top_frame_origin`, for example:  

    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

The IdP can then implement custom logic to determine if the RP and the top level site are the same party. If the RP owns both the top-level site and the iframe, the IdP may choose to only display the top-level domain, which is the default behavior. To display both domains, the IdP needs to include the`client_is_third_party_to_top_frame_origin`property in their[client metadata endpoint](https://developer.chrome.com/docs/identity/fedcm/implement/identity-provider#client-metadata-endpoint)response and set its value to`true`.

Here is an example of what the client metadata endpoint response would look like:  

    // 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,
    }

When this property is set to`true`and RP is embedded as an iframe on another site, the FedCM dialog will display both the top-level site's domain and the iframe's domain. This provides the user with more context about the sign-in request.

The default value for`client_is_third_party_to_top_frame_origin`is`false`, so existing implementations won't be affected by this change.

There are more details in the[documentation on implementing FedCM on an Identity Provider](https://developer.chrome.com/docs/identity/fedcm/implement/identity-provider).

## Try it out

You can see a live demo of this feature at[fedcm-demo-rp.dev/iframe](https://fedcm-demo-rp.dev/iframe). The code is hosted in the[demo GitHub repository](https://github.com/privacysandbox/privacy-sandbox-web-playbook/tree/main/fedcm).

We welcome your feedback on this and other FedCM features. Share your thoughts and report any issues on the[FedCM GitHub repository](https://github.com/fedidcg/FedCM/issues).

## Learn more

- [Stay up to date with Chrome developer announcements](https://developer.chrome.com/blog).
- [Start from here to learn about identity solutions available on Chrome](https://developer.chrome.com/docs/identity).