Mengisi formulir OTP dalam iframe lintas origin dengan WebOTP API

WebOTP API kini dapat menerima OTP dari dalam iframe.

Eiji Kitamura
Yi Gu
OTP (sandi sekali pakai) SMS umumnya digunakan untuk memverifikasi nomor telepon, misalnya sebagai langkah kedua dalam autentikasi, atau untuk memverifikasi pembayaran di web. Namun, beralih antara browser dan aplikasi SMS, untuk menyalin-menempel atau memasukkan OTP secara manual, akan memudahkan terjadinya kesalahan dan menambah gesekan pada pengalaman pengguna.

WebOTP API memberi situs kemampuan untuk mendapatkan sandi sekali pakai dari pesan SMS secara terprogram dan memasukkannya secara otomatis dalam formulir untuk pengguna hanya dengan sekali ketuk tanpa beralih aplikasi. SMS diformat secara khusus dan terikat ke origin, sehingga mengurangi kemungkinan situs phishing mencuri OTP.

Salah satu kasus penggunaan yang belum didukung di WebOTP adalah menargetkan origin di dalam iframe. Biasanya digunakan untuk konfirmasi pembayaran, terutama dengan 3D Secure. Dengan format umum untuk mendukung iframe lintas origin, WebOTP API kini mengirimkan OTP yang terikat ke origin bertingkat mulai Chrome 91.

Cara kerja WebOTP API

WebOTP API itu sendiri cukup sederhana:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
…

Pesan SMS harus diformat dengan kode sekali pakai terikat asal.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Perhatikan bahwa di baris terakhir, terdapat asal yang akan diikat yang diawali dengan @, diikuti dengan OTP yang diawali dengan #.

Saat pesan teks tiba, bilah info akan muncul dan meminta pengguna untuk memverifikasi nomor telepon mereka. Setelah pengguna mengklik tombol Verify, browser akan otomatis meneruskan OTP ke situs dan menyelesaikan navigator.credentials.get(). Kemudian, situs dapat mengekstrak OTP dan menyelesaikan proses verifikasi.

Pelajari dasar-dasar penggunaan WebOTP di Memverifikasi nomor telepon di web dengan WebOTP API.

Kasus penggunaan iframe lintas origin

Memasukkan OTP dalam formulir di dalam iframe lintas origin adalah hal yang umum dalam skenario pembayaran. Beberapa penerbit kartu kredit memerlukan langkah verifikasi tambahan untuk memeriksa keaslian pembayar. Proses ini disebut 3D Secure dan formulirnya biasanya ditampilkan dalam iframe di halaman yang sama seolah-olah merupakan bagian dari alur pembayaran.

Contoh:

  • Pengguna membuka shop.example untuk membeli sepasang sepatu dengan kartu kredit.
  • Setelah memasukkan nomor kartu kredit, penyedia pembayaran terintegrasi akan menampilkan formulir dari bank.example dalam iframe yang meminta pengguna memverifikasi nomor telepon mereka untuk checkout cepat.
  • bank.example mengirim SMS yang berisi OTP kepada pengguna agar mereka dapat memasukkannya untuk memverifikasi identitas mereka.

Cara menggunakan WebOTP API dari iframe lintas origin

Untuk menggunakan WebOTP API dari dalam iframe lintas origin, Anda perlu melakukan dua hal:

  • Anotasikan asal frame atas dan asal iframe dalam pesan teks SMS.
  • Konfigurasi kebijakan izin untuk mengizinkan iframe lintas origin menerima OTP langsung dari pengguna.
WebOTP API dalam iframe sedang digunakan.

Anda dapat mencoba demo sendiri di https://web-otp-iframe-demo.stackblitz.io.

Anotasikan asal terikat ke pesan teks SMS

Saat WebOTP API dipanggil dari dalam iframe, pesan teks SMS harus mencakup origin frame teratas yang diawali dengan @, diikuti dengan OTP yang diawali dengan # dan diikuti dengan origin iframe yang diawali dengan @.

@shop.example #123456 @bank.exmple

Mengonfigurasi Kebijakan Izin

Untuk menggunakan WebOTP dalam iframe lintas origin, penyemat harus memberikan akses ke API ini melalui kebijakan izin otp-credentials untuk menghindari perilaku yang tidak diinginkan. Secara umum, ada dua cara untuk mencapai sasaran ini:

  • melalui Header HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • melalui atribut iframe allow:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Lihat contoh lainnya tentang cara menentukan kebijakan izin .

Peringatan

Tingkat berjenjang

Saat ini, Chrome hanya mendukung panggilan WebOTP API dari iframe lintas origin yang memiliki tidak lebih dari satu origin unik dalam rantai ancestor-nya. Dalam skenario berikut:

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

Penggunaan WebOTP di b.com didukung, tetapi penggunaannya di c.com tidak didukung.

Perhatikan bahwa skenario berikut juga tidak didukung karena kurangnya permintaan dan kompleksitas UX.

  • a.com -> b.com -> a.com (memanggil WebOTP API)

Interoperabilitas

Meskipun mesin browser selain Chromium tidak menerapkan WebOTP API, Safari menggunakan format SMS yang sama dengan dukungan input[autocomplete="one-time-code"]-nya. Di Safari, segera setelah SMS yang berisi format kode sekali pakai terikat asal tiba dengan asal yang cocok, keyboard akan menyarankan untuk memasukkan OTP ke kolom input.

Mulai April 2021, Safari mendukung iframe dengan format SMS unik menggunakan %. Namun, karena diskusi spesifikasi menyimpulkan untuk menggunakan @, kami berharap penerapan format SMS yang didukung akan konvergen.

Masukan

Masukan Anda sangat berharga untuk meningkatkan kualitas WebOTP API, jadi coba gunakan dan beri tahu kami pendapat Anda.

Resource

Foto oleh rupixen.com di Unsplash