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

ตอนนี้ WebOTP API สามารถรับ OTP จากภายใน iframe ได้แล้ว

Eiji Kitamura
Yi Gu
โดยทั่วไปแล้ว OTP (รหัสผ่านแบบใช้ครั้งเดียว) ทาง SMS จะใช้เพื่อยืนยันหมายเลขโทรศัพท์ เช่น เป็นขั้นตอนที่ 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.example.com #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 ไปยังผู้ใช้เพื่อให้ผู้ใช้ป้อนรหัสดังกล่าวเพื่อยืนยันตัวตน

วิธีใช้ 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 รองรับเฉพาะการเรียก API WebOTP จาก 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 ให้ดียิ่งขึ้น ดังนั้นโปรดลองใช้และแจ้งให้เราทราบว่าคุณคิดอย่างไร

แหล่งข้อมูล