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

La API de WebOTP ahora puede recibir OTP desde iframes.

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

La API de WebOTP les brinda a los sitios web la capacidad de obtener de forma programática la contraseña de un solo uso a partir de un mensaje SMS y, luego, ingresarla automáticamente en el formulario para los usuarios con un solo toque, sin cambiar de app. El SMS tiene un formato especial y está vinculado al origen, por lo que 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 se orientaba a un origen dentro de un iframe. Por lo general, se usa para la confirmación de pagos, en especial con 3D Secure. Con el formato común para admitir iframes de origen cruzado, la API de WebOTP ahora entrega OTP vinculadas 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 tener el formato de los códigos de un solo uso vinculados al origen.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Observa que, en la última línea, contiene el origen al que se vinculará, precedido de una @, seguida de la OTP precedida de 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. Después de que el usuario hace clic en el botón Verify, el navegador reenvía automáticamente la OTP al sitio y resuelve el navigator.credentials.get(). Luego, el sitio web puede extraer la OTP y completar el proceso de verificación.

Obtén información sobre los aspectos básicos del uso de WebOTP en Cómo verificar números de teléfono en la Web con la API de WebOTP.

Casos de uso de iframes de origen cruzado

Escribir una OTP en un formulario dentro de un iframe de varios orígenes es habitual en situaciones de pago. Algunas entidades emisoras de tarjetas de crédito requieren un paso de verificación adicional para verificar la autenticidad del pagador. Esto se denomina 3D Secure, y el formulario suele exponerse dentro de un iframe en la misma página, como si fuera parte del flujo de pagos.

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 que le solicita al usuario que verifique su número de teléfono para realizar la confirmación de 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 lo siguiente:

  • Anota el origen del marco superior y el del iframe en el mensaje de texto del SMS.
  • Configura la política de permisos para permitir que el iframe de origen cruzado reciba la OTP directamente del usuario.
La 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 al 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 marco superior precedido por @, seguido de la OTP precedida por # y, luego, el 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 a través de la política de permisos de otp-credentials para evitar un comportamiento no deseado. En general, existen dos maneras de lograr este objetivo:

  • a través del encabezado HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • a través del atributo allow del iframe:
<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 tengan un solo origen único en su cadena de ancestros. En las siguientes situaciones:

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

Se admite el uso de WebOTP en b.com, pero no en c.com.

Ten en cuenta que la siguiente situación tampoco es compatible debido a la falta de demanda y a 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 de un solo uso 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 con %. Sin embargo, como la discusión de las especificaciones concluyó que se usaría @, esperamos que la implementación del formato de SMS admitido converja.

Comentarios

Tus comentarios son invaluables para mejorar la API de WebOTP, así que pruébala y cuéntanos qué opinas.

Recursos

Foto de rupixen.com en Unsplash