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

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

Dominik Mengelt
Dominik Mengelt
X GitHub Mastodon
Sam Dutton

เรามีข้อเสนอในการอนุญาตให้ป้อนข้อความอัตโนมัติใน 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>

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

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

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

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

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

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