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