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 se usan comúnmente para verificar números de teléfono, para por ejemplo, como segundo paso en la autenticación o para verificar pagos en la Web. Sin embargo, si alternas entre el navegador y la app de SMS, puedes copiar y pegar ingresar la OTP facilita cometer errores y agrega inconvenientes a la experiencia del usuario.

La API de WebOTP les brinda a los sitios web la capacidad de obtener la contraseña de un solo uso de un mensaje SMS e ingresarla automáticamente en el formulario para los usuarios con solo un toque, sin cambiar . El SMS tiene un formato especial y está vinculado al origen, así que mitiga posibilidades de que los sitios web de phishing también roben la OTP.

Un caso de uso que todavía no se admitía en WebOTP estaba dirigido a un origen dentro de un iframe. Por lo general, se usa para confirmar el pago, con 3D Secure. Tener la para admitir los orígenes cruzados iframes, la API de WebOTP ahora ofrece OTP vinculadas a orígenes anidados a partir de Chrome 91.

Cómo funciona la API de WebOTP

La API de WebOTP en sí misma es bastante simple:

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

El mensaje SMS debe tener el formato con el que se vincula el origen infraestructura.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Observa que, en la última línea, contiene el origen que se enlazará para que aparezca precedido por un @ seguido de la OTP precedida por una #.

Cuando llega el mensaje de texto, aparece una barra de información y se le pide al usuario que verificar 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() El sitio web puede extraer la OTP y completar el proceso de verificación.

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

Casos de uso de iframes de origen cruzado

Es común en los pagos ingresar una OTP en un formulario dentro de un iframe de origen cruzado reales. Algunas entidades emisoras de tarjetas de crédito requieren un paso de verificación adicional para verificar la autenticidad del pagador. Esto se llama 3D Secure y el formulario es normalmente dentro de un iframe en la misma página que si fuera parte del 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 la tarjeta de crédito, el proveedor de pagos integrado mostrará un formulario de bank.example dentro de un iframe que le solicita al usuario que verifique su número de teléfono para agilizar la confirmación de la compra.
  • bank.example envía un SMS con una OTP al usuario para que pueda ingrésalo para 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 realizar dos cosas:

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

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

Anotar 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 Incluye el origen del fotograma superior precedido por @ seguido de la OTP precedida por #. seguido del origen del iframe precedido por @.

@shop.example #123456 @bank.exmple

Configurar la política de permisos

Para usar WebOTP en un iframe de origen cruzado, el insertador debe otorgar acceso a este API a través de la política de permisos de otp-credentials para evitar acciones el comportamiento de los usuarios. En general, existen dos formas de lograr este objetivo:

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

Consulta más ejemplos sobre cómo 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 la 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 tampoco se admite la siguiente situación 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 navegador distintos de Chromium no implementan la API de WebOTP, Safari comparte el mismo formato de SMS compatible con input[autocomplete="one-time-code"]. En Safari, cuando abres El SMS que contiene un formato de código único vinculado al origen llega con la coincidencia origen, el teclado sugiere ingresar la OTP en el campo de entrada.

Desde abril de 2021, Safari admite iframe con un formato de SMS único que utiliza % Sin embargo, como la discusión sobre las especificaciones finalizó en su lugar con @, esperamos que la implementación del formato de SMS compatible.

Comentarios

Tus comentarios son muy valiosos para mejorar la API de WebOTP, así que pruébalo. y comunícanoslo. lo que piensas.

Recursos

Foto de rupixen.com en Unsplash