การป้อนข้อความอัตโนมัติที่แชร์ใน iframe: ข้อเสนอเริ่มต้น

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

โดมินิก เมนเกลต์
โดมินิก เมนเกลต์
Twitter GitHub Mastodon
แซม ดัตตัน

ข้อเสนอในการอนุญาตให้ป้อนข้อความอัตโนมัติใน iframe แบบข้ามต้นทางพร้อมให้ใช้งานสำหรับการทดสอบ ฟีเจอร์นี้ช่วยให้เฟรมหลักกำหนดเฟรมที่ควรป้อนข้อมูลอัตโนมัติได้ วิธีนี้เป็นประโยชน์อย่างยิ่งสำหรับรูปแบบการชำระเงิน ซึ่งโดยทั่วไปแล้วจะมีการโหลดช่องที่ละเอียดอ่อน (สำหรับการปฏิบัติตามข้อกำหนดของ PCI DSS) จากต้นทางของบุคคลที่สาม เช่น ผู้ให้บริการชำระเงิน (PSP)

ในตัวอย่างต่อไปนี้ ชื่อผู้ถือบัตรและวันที่หมดอายุจะอยู่ในหน้าระดับบนสุด (หรือเมนเฟรม) แต่หมายเลขบัตรเครดิตและรหัสยืนยันอยู่ใน iframe จาก PSP

<!-- Top-level document URL: https://merchant.com/... -->
<form>
  Cardholder name:    <input id="name">
  Credit card number: <iframe src="https://psp.com/..."><input id="num"></iframe>
  Expiration date:    <input id="exp">
  CVC:                <iframe src="https://psp.com/..."><input id="cvc"></iframe>
</form>

แผนภาพต่อไปนี้แสดงโครงสร้างของแบบฟอร์ม

แผนภูมิต้นไม้แสดงให้เห็นว่าช่องต่างๆ ในเฟรมต่างๆ ในแบบฟอร์มการชำระเงินเป็นอย่างไร

สำหรับผู้ขาย การออกแบบนี้ผสมผสานความปลอดภัยและความยืดหยุ่นดังนี้

  • iframe แบบข้ามต้นทางจะแยกข้อมูลการชำระเงินที่ละเอียดอ่อนออกจากโครงสร้างพื้นฐานของผู้ขาย ซึ่งช่วยให้เป็นไปตามข้อกำหนด PCI DSS
  • ช่องแบบฟอร์มในเฟรมต่างๆ สามารถจัดเรียงและจัดรูปแบบให้เข้ากับรูปลักษณ์ของเว็บไซต์ผู้ขายได้

จากมุมมองของเบราว์เซอร์ นี่หมายความว่ามีกรณีการใช้งานทั่วไปและถูกต้องตามกฎหมายสำหรับฟอร์มหลายเฟรม ซึ่งทำให้เกิดคำถามเกี่ยวกับโมเดลความปลอดภัยสำหรับฟอร์ม สำหรับผู้ใช้ แบบฟอร์มหลายเฟรมอาจทำให้การป้อนข้อความอัตโนมัติมีคุณภาพไม่ดี ดังตัวอย่างต่อไปนี้

นโยบายต้นทางเดียวกันเป็นเกณฑ์พื้นฐานที่มั่นคงสำหรับการป้อนข้อความอัตโนมัติข้ามเฟรม แต่ไม่ให้รายละเอียดเพียงพอให้เบราว์เซอร์แยกความแตกต่างระหว่างเฟรมที่เชื่อถือได้กับเฟรมที่ไม่น่าเชื่อถือสำหรับการป้อนข้อความอัตโนมัติ

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

<!-- Top-level document URL: https://merchant.com/... -->
<form>
  Cardholder name:    <input id="name">
  Credit card number: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="num"></iframe>
  Expiration date:    <input id="exp">
  CVC:                <iframe src="https://psp.com/..." allow="shared-autofill"><input id="cvc"></iframe>
</form>

ซึ่งอาจส่งผลให้ประสบการณ์การป้อนข้อความอัตโนมัติดีขึ้นสำหรับผู้ใช้

ลองใช้การป้อนอัตโนมัติที่แชร์ภายในเครื่อง

คุณทดสอบการป้อนข้อความอัตโนมัติที่แชร์สำหรับผู้ใช้รายเดียวใน Chrome 93.0.4577.0 ขึ้นไปบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ได้โดยการตั้งค่าแฟล็กจากบรรทัดคำสั่ง

--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill

ตรวจหาการรองรับฟีเจอร์

ใช้รหัสต่อไปนี้เพื่อตรวจหาว่าพร็อพเพอร์ตี้ shared-autofill พร้อมใช้งานหรือไม่

if (document.featurePolicy && document.featurePolicy
      .features().includes('shared-autofill')) {
  console.log('shared-autofill available!');
}

ขั้นตอนถัดไปคือ

การป้อนข้อความอัตโนมัติที่แชร์เป็นข้อเสนอเริ่มต้นที่จะเพิ่มฟีเจอร์ป้อนข้อความอัตโนมัติลงในนโยบายสิทธิ์ ขณะนี้ทีม Chrome กำลังทำงานร่วมกับ ผู้ให้บริการเบราว์เซอร์อื่นๆ เพื่อตรวจสอบข้อเสนอ นอกจากนี้ เรายังมีข้อเสนอเพิ่มเติมเกี่ยวกับวิธีเพิ่มประสบการณ์ของผู้ใช้ สำหรับการป้อนข้อความอัตโนมัติใน iframe ที่อยู่ระหว่างการพิจารณาด้วย

เราจะคอยแจ้งความคืบหน้าในขณะที่เราดำเนินการกับข้อเสนอนี้ ในระหว่างนี้ หากคุณมีหน้าชำระเงินที่มีการฝังช่อง <input> ที่ละเอียดอ่อน (หมายเลขบัตรเครดิต, Cvc) จากผู้ให้บริการบุคคลที่สาม โปรดติดต่อเรา เรายินดีรับฟังว่าการป้อนข้อความอัตโนมัติที่แชร์ใน iframe จะช่วยปรับปรุงประสบการณ์การป้อนอัตโนมัติของผู้ใช้ในระหว่างกระบวนการชำระเงินได้ไหม

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

รูปภาพโดย Jessica Ruscello ใน Unsplash