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

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

Eiji Kitamura
Yi Gu
โดยทั่วไปแล้ว SMS OTP (รหัสผ่านที่สามารถใช้งานได้เพียงครั้งเดียว) จะใช้เพื่อยืนยันหมายเลขโทรศัพท์ เช่น ใช้เป็นขั้นตอนที่ 2 ในการตรวจสอบสิทธิ์ หรือเพื่อยืนยันการชำระเงินในเว็บ แต่การสลับระหว่างเบราว์เซอร์และแอป SMS เพื่อคัดลอกและวาง หรือทำการคัดลอกด้วยตนเอง การป้อน OTP จะช่วยให้เกิดข้อผิดพลาดได้ง่ายและเพิ่มอุปสรรคในประสบการณ์การใช้งานของผู้ใช้

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 จากผู้ใช้โดยตรง
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 เพื่อหลีกเลี่ยงการดำเนินการที่ไม่ได้ตั้งใจ พฤติกรรมของคุณ โดยทั่วไป มี 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 ดีขึ้น ดังนั้นโปรดลองใช้งานดู และแจ้งให้เราทราบ คุณคิดอย่างไร

แหล่งข้อมูล

รูปภาพโดย rupixen.com บน Unsplash