WebOTP API สามารถรับ OTP จากใน iframe ได้แล้ว
WebOTP API ช่วยให้เว็บไซต์ทำงานด้านการเขียนโปรแกรมได้ รับรหัสผ่านที่สามารถใช้งานได้เพียงครั้งเดียวจากข้อความ SMS และป้อน ในแบบฟอร์มให้กับผู้ใช้ได้โดยอัตโนมัติด้วยการแตะเพียงครั้งเดียวโดยไม่ต้องเปลี่ยน แอป SMS มีการจัดรูปแบบพิเศษและผูกกับต้นทาง ดังนั้นจึงช่วยลด มีโอกาสที่เว็บไซต์ฟิชชิง จะขโมย OTP ได้ด้วยเช่นกัน
Use Case หนึ่งที่ WebOTP ยังไม่รองรับคือการกำหนดเป้าหมายต้นทาง ภายใน iframe โดยปกติจะใช้สำหรับการยืนยันการชำระเงิน โดยเฉพาะอย่างยิ่ง ด้วย 3D Secure การทำงาน รูปแบบที่จะรองรับข้ามต้นทาง iframes ตอนนี้ 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 ที่ขึ้นต้นด้วย #
เมื่อข้อความมาถึง แถบข้อมูลจะปรากฏขึ้นและแจ้งให้ผู้ใช้
ยืนยันหมายเลขโทรศัพท์ หลังจากผู้ใช้คลิกปุ่ม Verify แล้ว
เบราว์เซอร์จะส่ง OTP ไปยังเว็บไซต์โดยอัตโนมัติและแก้ไข
navigator.credentials.get() จากนั้นเว็บไซต์จะสามารถดึงข้อมูล OTP และดำเนินการ
ของกระบวนการยืนยันตัวตน
ดูข้อมูลพื้นฐานเกี่ยวกับการใช้ WebOTP ได้ที่ยืนยันหมายเลขโทรศัพท์บนเว็บด้วย WebOTP API
กรณีการใช้งาน iframe แบบข้ามต้นทาง
การป้อน OTP ในแบบฟอร์มภายใน iframe แบบข้ามต้นทางเป็นเรื่องปกติในการชำระเงิน สถานการณ์ ผู้ออกบัตรเครดิตบางรายกำหนดให้มีขั้นตอนการยืนยันเพิ่มเติมเพื่อ ตรวจสอบความถูกต้องของผู้ชำระเงิน ซึ่งเรียกว่า 3D Secure และแบบฟอร์มคือ มักถูกเปิดเผยภายใน iframe บนหน้าเดียวกันราวกับว่าส่วนขยายนั้นเป็นส่วนหนึ่งของ ขั้นตอนการชำระเงิน
เช่น
- ผู้ใช้ไปที่
shop.exampleเพื่อซื้อรองเท้าด้วยบัตรเครดิต - หลังจากป้อนหมายเลขบัตรเครดิตแล้ว ผู้ให้บริการชำระเงินที่ผสานรวมจะแสดง
จาก
bank.exampleใน iframe ที่ขอให้ผู้ใช้ยืนยัน หมายเลขโทรศัพท์สำหรับการชำระเงินที่รวดเร็ว bank.exampleส่ง SMS ที่มี 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 เพื่อหลีกเลี่ยงการดำเนินการที่ไม่ได้ตั้งใจ พฤติกรรมของคุณ โดยทั่วไป มี 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 จะไม่ใช้ WebOTP API
Safari ใช้รูปแบบ SMS เดียวกัน
ด้วยการสนับสนุน input[autocomplete="one-time-code"] ใน Safari ทันทีที่
SMS ที่มีรูปแบบรหัสแบบใช้ครั้งเดียวที่เชื่อมโยงกับต้นทางจะได้รับพร้อม
แป้นพิมพ์จะแนะนำให้ป้อน OTP ในช่องป้อนข้อมูล
ในเดือนเมษายน 2021 Safari จะรองรับ iframe ที่มีรูปแบบ SMS ที่ไม่ซ้ำกันซึ่งใช้
%
แต่จากที่ได้ข้อสรุปเกี่ยวกับข้อกำหนดจำเพาะ ให้ใช้ @ แทน เราหวังว่า
การใช้รูปแบบ SMS ที่รองรับ
จะผสานรวมกัน
ความคิดเห็น
ความคิดเห็นของคุณมีคุณค่ามากในการช่วยให้ WebOTP API ดียิ่งขึ้น ลองใช้ดูสิ และแจ้งให้เราทราบ คุณคิดอย่างไร
แหล่งข้อมูล
- ยืนยันหมายเลขโทรศัพท์บนเว็บด้วย OTP บนเว็บ API
- แนวทางปฏิบัติแนะนำสำหรับแบบฟอร์ม OTP
- WebOTP API
- รหัสแบบใช้ครั้งเดียวที่ผูกกับต้นทางซึ่งนำส่งผ่าน SMS
รูปภาพโดย rupixen.com บน Unsplash