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

L'API WebOTP ora può ricevere OTP all'interno di 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 di messaggistica per copiare e incollare o inserire manualmente la OTP è facile commettere errori e aggiunge complessità all'esperienza utente.

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

Un caso d'uso che deve essere ancora supportato in WebOTP riguardava un'origine all'interno di un iframe. Viene in genere utilizzato per la conferma del pagamento, in particolare con 3D Secure. Avendo il formato comune per supportare gli iframe multiorigine, l'API WebOTP ora fornisce OTP associate 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.glitch.me #12345

Tieni presente che nell'ultima riga contiene l'origine da associare, preceduta da un @ seguito da una OTP preceduta da un #.

Quando arriva il messaggio, viene visualizzata una barra delle informazioni che chiede all'utente di verificare il proprio numero di telefono. Dopo che l'utente fa clic sul pulsante Verify, il browser inoltra automaticamente l'OTP al sito e risolve il 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 Verificare i numeri di telefono sul web con l'API WebOTP.

Casi d'uso degli iframe cross-origin

L'inserimento di una OTP in un modulo all'interno di un iframe multiorigine è comune negli scenari di pagamento. Alcune emittenti di carte di credito richiedono un passaggio di verifica aggiuntivo per controllare l'autenticità del pagatore. Questa funzionalità si chiama 3D Secure e il modulo viene solitamente visualizzato all'interno di un iframe nella stessa pagina, come se fosse parte del flusso di pagamento.

Ad esempio:

  • Un utente visita il sito 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 in cui viene chiesto all'utente di verificare il proprio numero di telefono per il pagamento rapido.
  • bank.example invia all'utente un SMS contenente un'OTP che può inserire per verificare la propria identità.

Come utilizzare l'API WebOTP da un iframe cross-origin

Per utilizzare l'API WebOTP da un iframe cross-origin, devi fare due cose:

  • Annota sia l'origine del frame superiore sia l'origine dell'iframe nel messaggio di testo SMS.
  • Configura il criterio di autorizzazione per consentire all'iframe cross-origin di ricevere l'OTP direttamente dall'utente.
API WebOTP in un iframe in azione.

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

Annota le origini associate nel messaggio SMS

Quando l'API WebOTP viene chiamata da un iframe, il messaggio SMS deve includere l'origine del frame principale preceduta da @, seguita dall'OTP preceduta da # e dall'origine dell'iframe preceduta da @.

@shop.example #123456 @bank.exmple

Configura il criterio relativo alle autorizzazioni

Per utilizzare WebOTP in un iframe cross-origin, l'utente che esegue l'embed deve concedere l'accesso a questa API tramite le norme relative alle autorizzazioni otp-credentials per evitare comportamenti indesiderati. In generale, ci sono due modi per raggiungere questo obiettivo:

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

Consulta altri esempi su come specificare un criterio di autorizzazione .

Avvertenze

Livelli di nidificazione

Al momento Chrome supporta solo le chiamate all'API WebOTP da iframe cross-origin che hanno non più di una origine univoca nella catena di antenati. 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 di complessità relative all'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 messaggio che contiene un formato di codice una tantum associato all'origine corrispondente, la tastiera suggerisce di inserire l'OTP nel campo di immissione.

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

Feedback

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

Risorse

Foto di rupixen.com su Unsplash