Chrome 142부터 서드 파티 iframe으로 다른 사이트에 삽입된 신뢰 당사자 (RP)가 있는 경우 FedCM UI에 iframe의 도메인을 표시할 수 있습니다. 이 기능은 사용자가 다른 웹사이트에 삽입된 서비스에 로그인할 때 투명성을 향상합니다.
배경
이전에는 교차 출처 iframe 내에서 FedCM이 호출되면 FedCM 대화상자 UI에 최상위 사이트의 도메인만 표시되었습니다. 상호작용하는 서비스가 최상위 사이트와 다른 경우 사용자에게 혼동을 줄 수 있습니다. 예를 들어 사용자가 댓글 위젯이 삽입된 뉴스 웹사이트에 있을 수 있습니다. 사용자가 댓글 위젯에 로그인하려고 하면 FedCM 대화상자에 댓글 서비스의 도메인이 아닌 뉴스 웹사이트의 도메인만 표시됩니다.
이 문제를 해결하기 위해 Chrome에는 이제 IdP가 최상위 사이트 도메인 외에 FedCM 대화상자에서 토큰이 전송되는 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이므로 기존 구현은 이 변경사항의 영향을 받지 않습니다.
자세한 내용은 ID 공급업체에서 FedCM 구현에 관한 문서를 참고하세요.
사용해 보기
fedcm-demo-rp.dev/iframe에서 이 기능의 라이브 데모를 확인할 수 있습니다. 이 코드는 데모 GitHub 저장소에서 호스팅됩니다.
이 기능 및 기타 FedCM 기능에 대한 의견을 보내주세요. FedCM GitHub 저장소에서 의견을 공유하고 문제를 신고하세요.