Compila i moduli OTP all'interno di iframe multiorigine con l'API WebOTP

L'API WebOTP ora può ricevere OTP dall'interno degli iframe.

Eiji Kitamura
Yi Gu
Le OTP (password monouso) via SMS vengono comunemente utilizzate per verificare i numeri di telefono, ad esempio come secondo passaggio dell'autenticazione o per verificare i pagamenti sul web. Tuttavia, passare dal browser all'app per SMS per copiare e incollare o inserire manualmente l'OTP aumenta il rischio di errori e rende l'esperienza utente più complessa.

L'API WebOTP consente ai siti web di ottenere in modo programmatico la password monouso da un SMS e di inserirla automaticamente nel modulo per gli utenti con un solo tocco, senza cambiare app. L'SMS è formattato in modo speciale e associato all'origine, quindi riduce anche le possibilità che i siti web di phishing rubino la password monouso.

Un caso d'uso che non è ancora supportato in WebOTP è il targeting di un'origine all'interno di un iframe. In genere, viene utilizzato per la conferma del pagamento, in particolare con 3D Secure. Con il formato comune per supportare gli iframe multiorigine, l'API WebOTP ora fornisce OTP associati a origini nidificate a partire da Chrome 91.

Come funziona l'API WebOTP

L'API WebOTP è abbastanza semplice:

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

Il messaggio SMS deve essere formattato con i codici monouso associati all'origine.

Your OTP is: 123456.

@web-otp.example.com #12345

Tieni presente che l'ultima riga contiene l'origine da associare preceduta da @, seguita dalla OTP preceduta da #.

Quando arriva il messaggio, viene visualizzata una barra informativa che invita l'utente a verificare il proprio numero di telefono. Dopo che l'utente ha fatto clic sul pulsante Verify, il browser inoltra automaticamente l'OTP al sito e risolve la navigator.credentials.get(). Il sito web può quindi estrarre l'OTP e completare la procedura di verifica.

Scopri le nozioni di base sull'utilizzo di WebOTP in Verifica i numeri di telefono sul web con l'API WebOTP.

Casi d'uso degli iframe multiorigine

L'inserimento di una OTP in un modulo all'interno di un iframe multiorigine è comune negli scenari di pagamento. Alcuni emittenti di carte di credito richiedono un passaggio di verifica aggiuntivo per controllare l'autenticità del pagatore. Questo protocollo è chiamato 3D Secure e il modulo viene in genere esposto all'interno di un iframe nella stessa pagina, come se facesse parte del flusso di pagamento.

Ad esempio:

  • Un utente visita shop.example per acquistare un paio di scarpe con una carta di credito.
  • Dopo aver inserito il numero della carta di credito, il fornitore di servizi di pagamento integrato mostra un modulo di bank.example all'interno di un iframe che chiede all'utente di verificare il proprio numero di telefono per un pagamento rapido.
  • bank.example invia un SMS contenente un OTP all'utente, che può inserirlo per verificare la propria identità.

Come utilizzare l'API WebOTP da un iframe multiorigine

Per utilizzare l'API WebOTP da un iframe multiorigine, devi fare due cose:

  • Annota sia l'origine del frame di primo livello sia l'origine dell'iframe nel messaggio SMS.
  • Configura la policy sulle autorizzazioni per consentire all'iframe multiorigine di ricevere l'OTP direttamente dall'utente.
API WebOTP all'interno di un iframe in azione.

Puoi provare la demo all'indirizzo https://web-otp-iframe-demo.stackblitz.io.

Annota le origini associate al messaggio SMS

Quando l'API WebOTP viene chiamata dall'interno di un iframe, il messaggio SMS deve includere l'origine del frame di primo livello preceduta da @, seguita dall'OTP preceduto da #, seguito dall'origine dell'iframe preceduta da @.

@shop.example #123456 @bank.exmple

Configura la policy sulle autorizzazioni

Per utilizzare WebOTP in un iframe multiorigine, l'incorporatore deve concedere l'accesso a questa API tramite la policy sulle autorizzazioni otp-credentials per evitare comportamenti indesiderati. In generale, esistono due modi per raggiungere questo obiettivo:

  • Tramite intestazione HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • Tramite l'attributo iframe allow:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Scopri altri esempi su come specificare una policy sulle autorizzazioni .

Avvertenze

Livelli di nidificazione

Al momento, Chrome supporta solo le chiamate API WebOTP da iframe multiorigine che hanno al massimo un'origine univoca nella catena di predecessori. Nei seguenti scenari:

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

L'utilizzo di WebOTP in b.com è supportato, ma non in c.com.

Tieni presente che anche il seguente scenario non è supportato a causa della mancanza di domanda e delle complessità della UX.

  • a.com -> b.com -> a.com (chiama l'API WebOTP)

Interoperabilità

Sebbene i motori dei browser diversi da Chromium non implementino l'API WebOTP, Safari condivide lo stesso formato SMS con il supporto di input[autocomplete="one-time-code"]. In Safari, non appena arriva un SMS contenente un formato di codice una tantum associato all'origine con l'origine corrispondente, la tastiera suggerisce di inserire l'OTP nel campo di immissione.

A partire da aprile 2021, Safari supporta l'iframe con un formato SMS univoco che utilizza %. Tuttavia, poiché la discussione sulle specifiche si è conclusa con la scelta di @, ci auguriamo che l'implementazione del formato SMS supportato converga.

Feedback

Il tuo feedback è prezioso per migliorare l'API WebOTP, quindi provala e facci sapere cosa ne pensi.

Risorse