ตอนนี้ WebOTP API รับ OTP จากภายใน iframe ได้แล้ว
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เพื่อซื้อรองเท้า 1 คู่ด้วยบัตรเครดิต - หลังจากป้อนหมายเลขบัตรเครดิตแล้ว ผู้ให้บริการชำระเงินที่ผสานรวมจะแสดง
แบบฟอร์มจาก
bank.exampleภายใน iframe เพื่อขอให้ผู้ใช้ยืนยัน หมายเลขโทรศัพท์สำหรับการชำระเงินที่รวดเร็ว bank.exampleจะส่ง SMS ที่มี OTP ไปยังผู้ใช้เพื่อให้ผู้ใช้ป้อน OTP เพื่อยืนยันตัวตน
วิธีใช้ WebOTP API จาก iframe แบบข้ามต้นทาง
หากต้องการใช้ WebOTP API จากภายใน iframe ข้ามต้นทาง คุณต้องทำ 2 สิ่งต่อไปนี้
- ใส่คำอธิบายประกอบทั้งต้นทางของเฟรมบนสุดและต้นทางของ iframe ในข้อความ SMS
- กำหนดค่านโยบายสิทธิ์เพื่ออนุญาตให้ iframe ข้ามต้นทางรับ OTP จากผู้ใช้โดยตรง
คุณลองใช้เดโมได้ด้วยตนเองที่ 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 แต่ไม่รองรับการใช้ใน c.com
โปรดทราบว่าระบบไม่รองรับสถานการณ์ต่อไปนี้เนื่องจากไม่มีดีมานด์ และ UX มีความซับซ้อน
- a.com -> b.com -> a.com (เรียกใช้ WebOTP API)
ความสามารถในการทำงานร่วมกัน
แม้ว่าเครื่องมือเบราว์เซอร์อื่นๆ ที่ไม่ใช่ Chromium จะไม่ได้ใช้ API ของ WebOTP แต่ Safari ก็ใช้รูปแบบ SMS เดียวกัน
กับinput[autocomplete="one-time-code"]ที่รองรับ ใน Safari ทันทีที่ได้รับ SMS ที่มีรูปแบบรหัสแบบใช้ครั้งเดียวที่เชื่อมโยงกับต้นทางพร้อมกับต้นทางที่ตรงกัน แป้นพิมพ์จะแนะนำให้ป้อน OTP ลงในช่องป้อนข้อมูล
ตั้งแต่เดือนเมษายน 2021 เป็นต้นมา Safari รองรับ iframe ที่มีรูปแบบ SMS ที่ไม่ซ้ำกันโดยใช้
%
อย่างไรก็ตาม เมื่อการอภิปรายเกี่ยวกับข้อกำหนดได้ข้อสรุปว่าให้ใช้ @ แทน เราหวังว่าการใช้งานรูปแบบ SMS ที่รองรับจะสอดคล้องกัน
ความคิดเห็น
ความคิดเห็นของคุณมีค่ามากในการปรับปรุง WebOTP API ให้ดียิ่งขึ้น ดังนั้นโปรดลองใช้ และแจ้งให้เราทราบ ว่าคุณคิดเห็นอย่างไร
แหล่งข้อมูล
- ยืนยันหมายเลขโทรศัพท์บนเว็บด้วย Web OTP API
- แนวทางปฏิบัติแนะนำสำหรับแบบฟอร์ม OTP ทาง SMS
- WebOTP API
- รหัสแบบใช้ครั้งเดียวที่เชื่อมโยงกับต้นทางซึ่งส่งผ่าน SMS
รูปภาพโดย rupixen.com ใน Unsplash