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

L'API WebOTP ora può ricevere OTP dagli iframe.

Eiji Kitamura
Yi Gu
Le password monouso (OTP) 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 l'OTP rende facile commettere errori e aggiunge attrito all'esperienza utente.

L'API WebOTP consente ai siti web di ottenere in modo programmatico la password monouso da un messaggio SMS e 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 l'OTP.

Un caso d'uso che non è ancora supportato in WebOTP è il targeting di un'origine all'interno di un iframe. Viene in genere utilizzato per la conferma del pagamento, in particolare con 3D Secure. Grazie al 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 vincolati all'origine.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Tieni presente che l'ultima riga contiene l'origine da associare preceduta da un @ seguito dall'OTP preceduto 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 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. Questa procedura si chiama 3D Secure e il modulo viene in genere visualizzato 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 in modo che possa inserirlo per verificare la sua identità.

Come utilizzare l'API WebOTP da un iframe multiorigine

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

  • Annota l'origine del frame principale e l'origine dell'iframe nel messaggio di testo SMS.
  • Configura il criterio delle 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.

Annotare le origini vincolate 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 principale preceduta da @, seguita dall'OTP preceduta da # e dall'origine dell'iframe preceduta da @.

@shop.example #123456 @bank.exmple

Configurare i criteri relativi alle autorizzazioni

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

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

Consulta altri esempi su come specificare una policy di autorizzazione .

Avvertenze

Livelli di annidamento

Al momento Chrome supporta solo le chiamate API WebOTP da iframe multiorigine che hanno non più di un'unica origine nella relativa 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 lo scenario seguente non è supportato a causa della mancanza di domanda e della complessità dell'esperienza utente.

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

Interoperabilità

Sebbene i motori del 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 che contiene un formato di codice monouso associato all'origine con l'origine corrispondente, la tastiera suggerisce di inserire l'OTP nel campo di input.

A partire da aprile 2021, Safari supporta gli 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 è fondamentale per migliorare l'API WebOTP, quindi provala e facci sapere cosa ne pensi.

Risorse

Foto di rupixen.com su Unsplash