Completar formularios de OTP dentro de iframes de origen cruzado con la API de WebOTP

La API de WebOTP ahora puede recibir OTP desde los iframes.

Eiji Kitamura
Yi Gu
Las OTP por SMS (contraseñas de un solo uso) se usan, por ejemplo, para verificar números de teléfono, por ejemplo, como un segundo paso de autenticación o pagos en la Web. Sin embargo, cambiar entre el navegador y la app de SMS, copiar y pegar o ingresar la OTP de forma manual facilita cometer errores y agrega fricción a la experiencia del usuario.

La API de WebOTP permite a los sitios web obtener de manera programática una contraseña de un solo uso de un mensaje SMS y, luego, ingresarla automáticamente en el formulario para los usuarios con solo presionar una vez, sin cambiar la app. El SMS tiene un formato especial y está vinculado al origen, por lo que también se mitigan las posibilidades de que los sitios web de phishing también roben la OTP.

Un caso de uso que aún no se admite en WebOTP tenía como objetivo un origen dentro de un iframe. Por lo general, se usa para confirmar el pago, especialmente con 3D Secure. Dado que tiene el formato común para admitir iframes de origen cruzado, la API de WebOTP ahora entrega OTP vinculados a orígenes anidados a partir de Chrome 91.

Cómo funciona la API de WebOTP

La API de WebOTP es bastante simple:

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

El mensaje SMS debe formatearse con los códigos únicos vinculados al origen.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Ten en cuenta que, en la última línea, contiene el origen que se vinculará con @ seguido de la OTP precedida por una #.

Cuando llega el mensaje de texto, aparece una barra de información que le solicita al usuario que verifique su número de teléfono. Una vez que el usuario hace clic en el botón Verify, el navegador reenvía automáticamente la OTP al sitio y resuelve la navigator.credentials.get(). Luego, el sitio web puede extraer la OTP y completar el proceso de verificación.

Aprende los conceptos básicos del uso de WebOTP en Verifica los números de teléfono en la Web con la API de WebOTP.

Casos de uso de iframes de origen cruzado

En los casos de pago, es común ingresar una OTP en un formulario dentro de un iframe de origen cruzado. Algunas entidades emisoras de tarjetas de crédito requieren un paso de verificación adicional para comprobar la autenticidad del pagador. Esto se denomina 3D Secure y, por lo general, el formulario se expone dentro de un iframe en la misma página como si fuera parte del flujo de pago.

Por ejemplo:

  • Un usuario visita shop.example para comprar un par de zapatos con una tarjeta de crédito.
  • Después de ingresar el número de tarjeta de crédito, el proveedor de pagos integrado muestra un formulario de bank.example dentro de un iframe en el que se le solicita al usuario que verifique su número de teléfono para confirmar la compra rápidamente.
  • bank.example envía un SMS que contiene una OTP al usuario para que pueda ingresarla y verificar su identidad.

Cómo usar la API de WebOTP desde un iframe de origen cruzado

Para usar la API de WebOTP desde un iframe de origen cruzado, debes hacer dos cosas:

  • Anota el origen del fotograma superior y el del iframe en el mensaje de texto SMS.
  • Configura la política de permisos para permitir que el iframe de origen cruzado reciba la OTP directamente del usuario.
API de WebOTP dentro de un iframe en acción.

Puedes probar la demostración en https://web-otp-iframe-demo.stackblitz.io.

Anota los orígenes vinculados en el mensaje de texto SMS

Cuando se llama a la API de WebOTP desde un iframe, el mensaje de texto SMS debe incluir el origen del fotograma superior precedido de @ seguido de la OTP precedida de # y del origen del iframe precedido por @.

@shop.example #123456 @bank.exmple

Configura la política de permisos

Para usar WebOTP en un iframe de origen cruzado, el incorporador debe otorgar acceso a esta API mediante la política de permisos de credenciales otp-credentials para evitar comportamientos no deseados. En general, hay dos formas de lograr este objetivo:

  • a través de encabezado HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • mediante el atributo iframe allow:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Consulta más ejemplos para especificar una política de permisos .

Advertencias

Niveles de anidación

Por el momento, Chrome solo admite llamadas a la API de WebOTP desde iframes de origen cruzado que no tengan más de un origen único en su cadena principal. En los siguientes casos, sucede lo siguiente:

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

El uso de WebOTP en b.com es compatible, pero no en c.com.

Ten en cuenta que la siguiente situación tampoco es compatible debido a la falta de demanda y las complejidades de la UX.

  • a.com -> b.com -> a.com (llama a la API de WebOTP)

Interoperabilidad

Si bien los motores de navegadores que no son Chromium no implementan la API de WebOTP, Safari comparte el mismo formato de SMS con su compatibilidad con input[autocomplete="one-time-code"]. En Safari, en cuanto llega un SMS que contiene un formato de código único vinculado al origen con el origen coincidente, el teclado sugiere ingresar la OTP en el campo de entrada.

A partir de abril de 2021, Safari admite iframe con un formato de SMS único que usa %. Sin embargo, como concluyó la discusión sobre las especificaciones con @, esperamos que converja la implementación del formato de SMS compatible.

Comentarios

Tus comentarios son muy importantes para mejorar la API de WebOTP, así que pruébala y danos tu opinión.

Recursos

Foto de rupixen.com en Unsplash