L'API WebOTP ora può ricevere OTP dall'interno degli iframe.
Le OTP (password monouso) SMS vengono comunemente utilizzate per verificare i numeri di telefono, ad esempio come secondo passaggio nell'autenticazione o per verificare i pagamenti sul web. Tuttavia, passando dal browser all'app per SMS e viceversa, copiare e incollare o inserire manualmente l'OTP consente di commettere facilmente errori e rende più fluida l'esperienza utente.
L'API WebOTP consente ai siti web di ottenere in modo programmatico la password unica da un SMS e di inserirla automaticamente nel modulo per gli utenti con un solo tocco senza passare all'app. L'SMS è appositamente formattato e associato all'origine, quindi riduce le possibilità che anche i siti web di phishing rubano l'OTP.
Un caso d'uso non ancora supportato in WebOTP prevedeva il targeting di un'origine all'interno di un iframe. In genere viene utilizzato per la conferma di pagamento, soprattutto con 3D Secure. Avendo il formato comune per supportare 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 in sé è 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 l'ultima riga contiene l'origine da associare preceduta da @
seguita dalla OTP preceduta da #
.
All'arrivo dell'SMS, viene visualizzata una barra delle informazioni che chiede all'utente di verificare il numero di telefono. Dopo che l'utente fa 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.
Per conoscere le nozioni di base sull'utilizzo di WebOTP, consulta la pagina Verificare i numeri di telefono sul web con l'API WebOTP.
Casi d'uso di 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à di chi paga. Questa procedura è chiamata 3D Secure e in genere il modulo è esposto all'interno di un iframe sulla stessa pagina come se fosse parte del flusso di pagamento.
Ad esempio:
- Un utente visita
shop.example
per acquistare un paio di scarpe con 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 numero di telefono per il pagamento rapido. bank.example
invia un SMS contenente una OTP all'utente in modo che possa inserirlo per verificare la propria identità.
Come utilizzare l'API WebOTP da un iframe multiorigine
Per utilizzare l'API WebOTP dall'interno di un iframe multiorigine, devi fare due cose:
- Annota sia l'origine del frame superiore che l'origine dell'iframe nel messaggio SMS.
- Configura il criterio di autorizzazione per consentire all'iframe multiorigine di ricevere l'OTP direttamente dall'utente.
Puoi provare la demo all'indirizzo https://web-otp-iframe-demo.stackblitz.io.
Annota le origini associate al messaggio di testo SMS
Quando l'API WebOTP viene chiamata dall'interno di un iframe, il messaggio di testo SMS deve includere l'origine del frame superiore preceduta da @
seguita dalla OTP preceduta da #
e dall'origine dell'iframe preceduta da @
.
@shop.example #123456 @bank.exmple
Configura criterio delle autorizzazioni
Per utilizzare WebOTP in un iframe multiorigine, l'incorporamento deve concedere l'accesso a questa API tramite le norme di autorizzazione 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>
Guarda altri esempi su come specificare un criterio di autorizzazione .
Avvertenze
Livelli di nidificazione
Al momento Chrome supporta solo le chiamate API WebOTP da iframe multiorigine che hanno non più di 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
è supportato l'uso di WebOTP in b.com, mentre l'uso di WebOTP in c.com non è supportato.
Tieni presente che anche il seguente scenario non è supportato a causa della mancanza di domanda e delle complessità relative all'UX.
- a.com -> b.com -> a.com (chiama l'API WebOTP)
Interoperabilità
Sebbene motori di browser diversi da Chromium non implementano l'API WebOTP, Safari condivide lo stesso formato SMS con il suo supporto input[autocomplete="one-time-code"]
. In Safari, non appena arriva un SMS che contiene un formato di codice monouso 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 iframe con un formato SMS univoco che utilizza %
.
Tuttavia, poiché la discussione sulle specifiche si è conclusa con @
, ci auguriamo che l'implementazione del formato SMS supportato converge.
Feedback
Il tuo feedback è inestimabile per migliorare l'API WebOTP, quindi continua a provarla e facci sapere cosa ne pensi.
Risorse
- Verifica i numeri di telefono sul web con l'API Web OTP
- Best practice per i moduli per l'OTP SMS
- API WebOTP
- Codici una tantum associati all'origine inviati tramite SMS
Foto di rupixen.com su Unsplash