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 son de uso frecuente para verificar números de teléfono, por ejemplo, como un 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 o ingresar manualmente la OTP facilita la comisión de 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 manera programática la contraseña de un solo uso de un mensaje SMS y, luego, ingresarla automáticamente en el formulario para los usuarios con solo un toque, sin cambiar de app. El SMS tiene un formato especial y está vinculado al origen, por lo que también mitiga las posibilidades de que los sitios web de suplantación de identidad (phishing) roben la OTP.

Un caso de uso que aún no se admite en WebOTP es la orientación a un origen dentro de un iframe. Por lo general, se usa para confirmar el pago, 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 en sí 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.example.com #12345

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

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 la navigator.credentials.get(). Luego, el sitio web puede extraer la OTP y completar el proceso de verificación.

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

Casos de uso de iframes de origen cruzado

Ingresar una OTP en un formulario dentro de un iframe de origen cruzado es común en las situaciones de pago. 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 pide al usuario que verifique su número de teléfono para realizar el pago rápido.
  • 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 origen 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 por tu cuenta 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 #, seguida 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 a través de la política de permisos de otp-credentials para evitar comportamientos no deseados. En general, hay 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 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 anidamiento

Por el momento, Chrome solo admite llamadas a la API de WebOTP desde iframes de origen cruzado que tengan no más de un 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 se admite 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 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 que usa %. Sin embargo, como el debate de las especificaciones concluyó que se usara @, esperamos que la implementación del formato de SMS admitido converja.

Comentarios

Tus comentarios son muy valiosos para mejorar la API de WebOTP, así que pruébala y cuéntanos qué te parece.

Recursos