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) 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.
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 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

Foto di rupixen.com su Unsplash