Mengisi formulir OTP dalam iframe lintas origin dengan WebOTP API

WebOTP API kini dapat menerima OTP dari dalam iframe.

Eiji Kitamura
Yi Gu
OTP ({i>password<i} sekali pakai) SMS biasanya digunakan untuk memverifikasi nomor telepon, sebagai langkah kedua dalam autentikasi, atau untuk memverifikasi pembayaran di web. Namun, beralih antara browser dan aplikasi SMS, untuk menyalin-tempel atau secara manual memasukkan OTP sehingga memudahkan untuk melakukan kesalahan dan menambah hambatan pada pengalaman pengguna.

WebOTP API memberi situs kemampuan untuk melakukan mendapatkan {i>password<i} sekali pakai dari pesan SMS dan masukkan secara otomatis dan mudah diakses oleh pengguna, hanya dengan sekali ketuk tanpa mengalihkan tombol . SMS diformat secara khusus dan terikat dengan asalnya, sehingga mengurangi situs web {i>phishing <i}juga bisa mencuri OTP.

Satu kasus penggunaan yang belum didukung di WebOTP adalah menargetkan origin di dalam iframe. Ini biasanya digunakan untuk konfirmasi pembayaran, terutama dengan 3D Secure. Memiliki kesamaan format untuk mendukung lintas origin iframe, WebOTP API kini menayangkan OTP yang terikat dengan origin bertingkat mulai Chrome 91.

Cara kerja WebOTP API

WebOTP API sendiri cukup sederhana:

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

Pesan SMS harus diformat dengan satu kali yang terikat dengan asal kode tersebut.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Perhatikan bahwa pada baris terakhir berisi tempat asal yang akan didahului dengan @ yang diikuti dengan OTP yang diawali dengan #.

Saat pesan teks masuk, bilah info muncul dan meminta pengguna untuk memverifikasi nomor telepon mereka. Setelah pengguna mengklik tombol Verify, browser secara otomatis meneruskan OTP ke situs dan mengatasi navigator.credentials.get(). Situs kemudian bisa 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 dalam iframe lintas origin adalah hal yang umum dalam pembayaran yang signifikan. Beberapa penerbit kartu kredit mewajibkan langkah verifikasi tambahan untuk memeriksa keaslian pembayar. Ini disebut 3D Secure dan bentuknya biasanya diekspos dalam iframe di halaman yang sama seolah-olah merupakan bagian dari alur pembayaran.

Contoh:

  • Pengguna mengunjungi shop.example untuk membeli sepasang sepatu dengan kartu kredit.
  • Setelah memasukkan nomor kartu kredit, penyedia jasa pembayaran terintegrasi akan menampilkan formulir dari bank.example dalam iframe yang meminta pengguna memverifikasi nomor telepon Anda untuk checkout yang cepat.
  • bank.example mengirim SMS yang berisi OTP kepada pengguna sehingga dia dapat masukkan 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 hal:

  • Beri anotasi pada asal frame bagian atas dan asal iframe di teks SMS untuk membuat pesan email baru.
  • Konfigurasikan kebijakan izin untuk mengizinkan iframe lintas origin menerima OTP langsung dari pengguna.
Cara kerja WebOTP API dalam iframe.

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

Menganotasi origin terikat ke pesan teks SMS

Ketika WebOTP API dipanggil dari dalam iframe, pesan teks SMS harus menyertakan asal frame teratas yang diawali dengan @ diikuti dengan OTP yang diawali dengan # diikuti dengan asal iframe yang diawali dengan @.

@shop.example #123456 @bank.exmple

Mengonfigurasi Kebijakan Izin

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

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

Lihat contoh lain tentang cara menentukan kebijakan izin .

Peringatan

Tingkatan bertingkat

Saat ini Chrome hanya mendukung panggilan WebOTP API dari iframe lintas origin yang tidak lebih dari satu origin unik dalam rantai ancestornya. Di kolom skenario berikut:

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

menggunakan WebOTP di b.com didukung tetapi menggunakannya di c.com tidak.

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 mengimplementasikan API WebOTP, Safari memiliki format SMS yang sama dengan dukungan input[autocomplete="one-time-code"]. Di Safari, segera setelah SMS yang berisi format kode sekali pakai yang terikat asal tiba dengan keyboard akan menyarankan untuk memasukkan OTP ke kolom {i>input<i}.

Mulai April 2021, Safari mendukung iframe dengan format SMS unik menggunakan %. Namun, karena diskusi spesifikasi berakhir dengan @, kami berharap implementasi format SMS yang didukung akan dikonvergensi.

Masukan

Masukan Anda sangat berharga untuk meningkatkan kualitas WebOTP API, jadi lanjutkan dan cobalah dan beri tahu kami apa yang Anda pikirkan.

Resource

Foto oleh rupixen.com di Unsplash