WebOTP API สามารถรับ OTP จากภายใน iframe ได้แล้ว
WebOTP API ช่วยให้เว็บไซต์สามารถรับรหัสผ่านแบบครั้งเดียวจากข้อความ SMS โดยใช้โปรแกรม และป้อนรหัสผ่านดังกล่าวในแบบฟอร์มให้ผู้ใช้โดยอัตโนมัติด้วยการแตะเพียงครั้งเดียวโดยไม่ต้องสลับแอป SMS อยู่ในรูปแบบพิเศษและเชื่อมโยงกับต้นทาง จึงช่วยลดโอกาสที่เว็บไซต์ฟิชชิงจะขโมย OTP ได้
Use Case หนึ่งที่ WebOTP ยังไม่รองรับคือการกําหนดเป้าหมายต้นทางภายใน iframe โดยปกติแล้วจะใช้สำหรับการยืนยันการชำระเงิน โดยเฉพาะกับ 3D Secure WebOTP API มีรูปแบบทั่วไปเพื่อรองรับ iframe จากหลายแหล่งที่มา ดังนั้นตอนนี้จึงส่ง 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-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 จะไม่ใช้ WebOTP API แต่ 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