กรอกแบบฟอร์ม OTP ภายใน iframe แบบข้ามต้นทางด้วย WebOTP API

WebOTP API รับ OTP จากภายใน iframe ได้แล้ว

Eiji Kitamura
Yi Gu
SMS OTP (รหัสผ่านที่สามารถใช้งานได้เพียงครั้งเดียว) มักจะใช้เพื่อยืนยันหมายเลขโทรศัพท์ เช่น ใช้เป็นขั้นตอนที่ 2 ในการตรวจสอบสิทธิ์หรือเพื่อยืนยันการชำระเงินบนเว็บ อย่างไรก็ตาม การสลับระหว่างเบราว์เซอร์และแอป SMS เพื่อคัดลอกและวางหรือป้อน OTP ด้วยตนเองจะช่วยทำให้เกิดข้อผิดพลาดได้ง่ายและเพิ่มความราบรื่นให้กับประสบการณ์ของผู้ใช้

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

กรณีการใช้งานหนึ่งที่ WebOTP ยังไม่รองรับคือการกำหนดเป้าหมายต้นทางภายใน iframe โดยทั่วไปจะใช้เพื่อยืนยันการชำระเงิน โดยเฉพาะกับ 3D Secure มีรูปแบบทั่วไปที่รองรับ iframe แบบข้ามต้นทาง ตอนนี้ WebOTP API ส่ง OTP ที่ผูกกับต้นทางที่ซ้อนกันตั้งแต่ Chrome 91 เป็นต้นไป

วิธีการทำงานของ WebOTP API

WebOTP API เองก็ใช้งานง่ายมาก ดังนี้

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
…

ข้อความ SMS ต้องจัดรูปแบบด้วยรหัสแบบครั้งเดียวที่เชื่อมโยงกับต้นทาง

Your OTP is: 123456.

@web-otp.glitch.me #12345

โปรดสังเกตว่าในบรรทัดสุดท้ายจะมีต้นทางที่นำไปนำหน้าด้วย @ ตามด้วย OTP นำหน้าด้วย #

เมื่อได้รับ SMS แถบข้อมูลจะปรากฏขึ้นและแจ้งให้ผู้ใช้ยืนยันหมายเลขโทรศัพท์ หลังจากผู้ใช้คลิกปุ่ม Verify เบราว์เซอร์จะส่งต่อ OTP ไปยังเว็บไซต์โดยอัตโนมัติและแก้ไข navigator.credentials.get() เว็บไซต์จะสามารถดึงข้อมูล OTP และดำเนินการยืนยันให้เสร็จสมบูรณ์

ดูข้อมูลพื้นฐานเกี่ยวกับการใช้ WebOTP ที่หัวข้อยืนยันหมายเลขโทรศัพท์บนเว็บด้วย WebOTP API

กรณีการใช้งาน iframe แบบข้ามต้นทาง

การป้อน OTP ในแบบฟอร์มภายใน iframe แบบข้ามต้นทางนั้นพบได้ทั่วไปในการชำระเงิน ผู้ออกบัตรเครดิตบางรายกำหนดให้มีขั้นตอนการยืนยันเพิ่มเติม เพื่อตรวจสอบความถูกต้องของผู้ชำระเงิน วิธีนี้เรียกว่า 3D Secure และแบบฟอร์มดังกล่าวจะแสดงอยู่ ภายใน iframe บนหน้าเดียวกันราวกับว่าเป็นส่วนหนึ่งของขั้นตอนการชำระเงิน

เช่น

  • ผู้ใช้ไปที่ shop.example เพื่อซื้อรองเท้าด้วยบัตรเครดิต
  • หลังจากป้อนหมายเลขบัตรเครดิตแล้ว ผู้ให้บริการชำระเงินที่ผสานรวมจะแสดงแบบฟอร์มจาก bank.example ใน iframe เพื่อขอให้ผู้ใช้ยืนยันหมายเลขโทรศัพท์เพื่อชำระเงินอย่างรวดเร็ว
  • bank.example จะส่ง SMS ที่มี OTP ให้กับผู้ใช้เพื่อให้ผู้ใช้ป้อน OTP เพื่อยืนยันตัวตนได้

วิธีใช้ WebOTP API จาก iframe แบบข้ามต้นทาง

หากต้องการใช้ WebOTP API จากใน iframe แบบข้ามต้นทาง คุณจะต้องทำ 2 อย่างดังนี้

  • ใส่คำอธิบายประกอบทั้งต้นทางของเฟรมด้านบนและต้นทางของ iframe ในข้อความ SMS
  • กำหนดค่านโยบายสิทธิ์เพื่ออนุญาตให้ iframe แบบข้ามต้นทางรับ OTP จากผู้ใช้โดยตรง
WebOTP API ภายใน iframe ในการดำเนินการ

คุณลองใช้การสาธิตด้วยตัวเองได้ที่ https://web-otp-iframe-demo.stackblitz.io

ใส่คำอธิบายประกอบต้นทางที่ผูกมัดกับข้อความ SMS

เมื่อมีการเรียก WebOTP API จากภายใน iframe ข้อความ SMS ต้องมีต้นทางของเฟรมด้านบนซึ่งขึ้นต้นด้วย @ ตามด้วย OTP ที่อยู่ก่อนหน้าด้วย # ตามด้วยต้นทางของ iframe ที่นำหน้าด้วย @

@shop.example #123456 @bank.exmple

กำหนดค่านโยบายสิทธิ์

หากต้องการใช้ WebOTP ใน iframe แบบข้ามต้นทาง ผู้ฝังต้องให้สิทธิ์เข้าถึง API นี้ผ่านนโยบายสิทธิ์ของข้อมูลเข้าสู่ระบบ otp-credentials เพื่อหลีกเลี่ยงลักษณะการทำงานที่ไม่ตั้งใจ โดยทั่วไปแล้ว มี 2 วิธีในการบรรลุเป้าหมายนี้ ได้แก่

  • ผ่านส่วนหัว HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • ผ่านแอตทริบิวต์ allow ของ iframe:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

ดูตัวอย่างเพิ่มเติมเกี่ยวกับวิธีระบุนโยบายสิทธิ์

คำเตือน

ระดับของการฝัง

ขณะนี้ Chrome รองรับเฉพาะการเรียก WebOTP API จาก iframe แบบข้ามต้นทางที่มีต้นทางที่ไม่ซ้ำกันไม่เกิน 1 แห่งในเชนระดับบน ในสถานการณ์ต่อไปนี้

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

ระบบรองรับการใช้ WebOTP ใน b.com แต่จะไม่รองรับการใช้ WebOTP ใน c.com

โปรดทราบว่าสถานการณ์ต่อไปนี้ไม่ได้รับการรองรับด้วยเนื่องจากไม่มีดีมานด์และ UX ที่ซับซ้อน

  • a.com -> b.com -> a.com (เรียก WebOTP API)

ความสามารถในการทำงานร่วมกัน

แม้ว่าเครื่องมือของเบราว์เซอร์ที่ไม่ใช่ Chromium จะไม่ใช้ WebOTP API แต่ Safari จะใช้รูปแบบ SMS เดียวกันโดยมีการรองรับ input[autocomplete="one-time-code"] ใน Safari ทันทีที่ SMS มีรูปแบบรหัสแบบใช้ครั้งเดียวจากต้นทางมาถึงต้นทางที่ตรงกัน แป้นพิมพ์จะแนะนำให้ป้อน OTP ลงในช่องป้อนข้อมูล

ตั้งแต่เดือนเมษายน 2021 เป็นต้นไป Safari จะรองรับ iframe ที่มีรูปแบบ SMS ที่ไม่ซ้ำกันซึ่งใช้ % อย่างไรก็ตาม เมื่อการพูดคุยเกี่ยวกับข้อกำหนดได้ข้อสรุปไปกับ @ แทนแล้ว เราหวังว่าการใช้งานรูปแบบ SMS ที่รองรับจะค่อยๆ มาบรรจบกัน

ความคิดเห็น

ความคิดเห็นของคุณมีคุณค่าอย่างมากในการปรับปรุง WebOTP API ให้ดียิ่งขึ้น ดังนั้นลองใช้งานและบอกให้เราทราบว่าคุณคิดอย่างไร

แหล่งข้อมูล

รูปภาพโดย rupixen.com ใน Unsplash