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

Ora l'API WebOTP può ricevere OTP dagli iframe.

Eiji Kitamura
Yi Gu
Le OTP (password monouso) per gli SMS vengono comunemente utilizzate per verificare i numeri di telefono, ad esempio come secondo passaggio per l'autenticazione o per verificare i pagamenti sul web. Tuttavia, passando dal browser all'app SMS, per copiare e incollare oppure manualmente inserire la OTP facilita gli errori e rende l'esperienza utente ancora più fluida.

L'API WebOTP offre ai siti web la possibilità di eseguire in modo programmatico recupera la password monouso da un SMS e inseriscila automaticamente nel modulo per gli utenti con un solo tocco senza cambiare dell'app. L'SMS è formattato appositamente e associato all'origine, in modo da ridurre è probabile che anche i siti web di phishing rubino l'OTP.

Un caso d'uso che deve essere ancora supportato in WebOTP riguardava un'origine all'interno di un iframe. In genere viene utilizzato per la conferma di pagamento, in particolare con 3D Secure. Adottare lo standard per supportare il multiorigine iframe, l'API WebOTP ora pubblica OTP associate a origini nidificate a partire da Chrome 91.

Come funziona l'API WebOTP

L'API WebOTP stessa è abbastanza semplice:

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

Il messaggio SMS deve essere formattato con il valore codici.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Nota che nell'ultima riga contiene l'origine da associare preceduta da una @ seguita dalla OTP preceduta da #.

Quando arriva l'SMS, appare 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 il browser inoltra automaticamente l'OTP al sito e risolve il problema navigator.credentials.get(). Il sito web può quindi estrarre l'OTP e completare la procedura di verifica.

Apprendi le nozioni di base sull'utilizzo di WebOTP nella pagina Verificare i numeri di telefono sul Web con lo API WebOTP.

Casi d'uso di iframe multiorigine

L'inserimento di una OTP in un modulo all'interno di un iframe multiorigine è comune nei pagamenti diversi scenari. Alcune emittenti di carte di credito richiedono un passaggio di verifica aggiuntivo per controllare l'autenticità del pagatore. Si tratta di 3D Secure e il modulo è generalmente esposto all'interno di un iframe sulla stessa pagina che fa parte del flusso di pagamento di Google Cloud.

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 mostrerà modulo da bank.example all'interno di un iframe che chiede all'utente di verificare la sua numero di telefono per un pagamento rapido.
  • bank.example invia all'utente un SMS contenente una OTP in modo che possa inseriscilo per verificare la sua identità.

Come utilizzare l'API WebOTP da un iframe multiorigine

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

  • Annota sia l'origine del frame superiore sia l'origine dell'iframe nel testo dell'SMS per creare un nuovo messaggio email.
  • Configura le norme relative alle autorizzazioni per consentire all'iframe multiorigine di ricevere OTP direttamente dall'utente.
di Gemini Advanced.
l'API WebOTP all'interno di un iframe in azione.

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

Annota le origini associate nel messaggio SMS

Quando l'API WebOTP viene richiamata dall'interno di un iframe, il messaggio di testo SMS deve Includono l'origine del frame superiore preceduta da @ seguita dalla OTP preceduta da # seguita dall'origine dell'iframe, preceduta da @.

@shop.example #123456 @bank.exmple

Configura criterio di autorizzazione

Per utilizzare WebOTP in un iframe multiorigine, l'incorporamento deve concedere l'accesso a questo API mediante i criteri di autorizzazione delle credenziali otp per evitare comportamento degli utenti. 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 soltanto le chiamate API WebOTP da iframe multiorigine che non hanno non più di un origine univoca nella catena di predecessori. Nella i 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 di mancanza di domanda e le complessità della UX.

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

Interoperabilità

Anche se i motori dei browser diversi da Chromium non implementano l'API WebOTP, Safari condivide lo stesso formato SMS con il relativo supporto input[autocomplete="one-time-code"]. In Safari, non appena Gli SMS che contengono un formato di codice monouso associato all'origine arrivano con il codice 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 utilizzando %. Tuttavia, poiché la discussione sulle specifiche si è conclusa con @, ci auguriamo che l'implementazione del formato SMS supportato converrà.

Feedback

Il tuo feedback è inestimabile per migliorare l'API WebOTP, quindi continua e provala e comunicacelo quello che pensi.

Risorse

Foto di rupixen.com su Unsplash