ข้อมูลอัปเดต FedCM: แสดงโดเมน iframe

ตั้งแต่ Chrome 142 เป็นต้นไป คุณสามารถเลือกแสดงโดเมนของ iframe ใน UI ของ FedCM เมื่อมีการฝัง Relying Party (RP) เป็น iframe ของบุคคลที่สามในเว็บไซต์อื่น ฟีเจอร์นี้ช่วยเพิ่มความโปร่งใสให้แก่ผู้ใช้เมื่อลงชื่อเข้าใช้บริการที่ฝังอยู่ในเว็บไซต์อื่น

ฉากหลัง

ก่อนหน้านี้ เมื่อเรียกใช้ FedCM จากภายใน iframe ข้ามต้นทาง UI ของกล่องโต้ตอบ FedCM จะแสดงเฉพาะโดเมนของเว็บไซต์ระดับบนสุด ซึ่งอาจสร้างความสับสนให้กับผู้ใช้หากบริการที่โต้ตอบด้วยแตกต่างจากเว็บไซต์ระดับบนสุด เช่น ผู้ใช้อาจอยู่ในเว็บไซต์ข่าวที่ฝังวิดเจ็ตแสดงความคิดเห็น เมื่อผู้ใช้พยายามลงชื่อเข้าใช้ในวิดเจ็ตแสดงความคิดเห็น กล่องโต้ตอบ FedCM จะแสดงเฉพาะโดเมนของเว็บไซต์ข่าว ไม่ใช่โดเมนของบริการแสดงความคิดเห็น

ชื่อกล่องโต้ตอบ FedCM มีข้อความ "ลงชื่อเข้าใช้ news-site.example ด้วย fedcm-demo-idp.dev"
เมื่อมีการเรียกใช้ FedCM จากภายใน iframe ระบบจะไม่แสดงโดเมนของ iframe ใน UI

เพื่อแก้ไขปัญหานี้ ตอนนี้ Chrome มีวิธีให้ IdP ระบุโดเมนของ iframe ที่โทเค็นจะส่งไปในกล่องโต้ตอบ FedCM นอกเหนือจากโดเมนของเว็บไซต์ระดับบนสุด ซึ่งจะช่วยให้ผู้ใช้เห็นภาพที่ชัดเจนยิ่งขึ้นเกี่ยวกับบริการของบุคคลที่สามที่เกี่ยวข้องในกระบวนการลงชื่อเข้าใช้

ชื่อกล่องโต้ตอบ FedCM มีข้อความว่า "ลงชื่อเข้าใช้ news-site.example ด้วย fedcm-demo-idp.dev news-site.example ฝังเนื้อหาจาก widget.example"
เมื่อมีการเรียกใช้ FedCM จากภายใน iframe ทาง 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 อาจเลือกที่จะแสดงเฉพาะโดเมนระดับบนสุด ซึ่งเป็นลักษณะการทำงาน เริ่มต้น หากต้องการแสดงทั้ง 2 โดเมน 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 แชร์ความคิดเห็น และรายงานปัญหาในที่เก็บ GitHub ของ FedCM

ดูข้อมูลเพิ่มเติม