Preencher formulários OTP em iframes de origem cruzada com a API WebOTP

A API WebOTP agora pode receber OTPs em iframes.

Eiji Kitamura
Yi Gu
As OTPs por SMS (senhas únicas) costumam ser usadas para verificar números de telefone, por exemplo, como uma segunda etapa de autenticação ou para verificar pagamentos na Web. No entanto, alternar entre o navegador e o app de SMS para copiar e colar ou inserir manualmente a OTP facilita cometer erros e aumenta a experiência do usuário.

A API WebOTP permite que os sites obtenham programaticamente a senha de uso único de uma mensagem SMS e a insiram automaticamente no formulário para os usuários com apenas um toque, sem mudar de app. O SMS tem um formato especial e é vinculado à origem, o que reduz as chances de sites de phishing roubarem a senha de uso único.

Um caso de uso que ainda não tinha suporte no WebOTP era segmentar uma origem dentro de um iframe. Isso geralmente é usado para confirmação de pagamento, especialmente com o 3D Secure. Com o formato comum para oferecer suporte a iframes de origem cruzada, a API WebOTP agora envia OTPs vinculados a origens aninhadas a partir do Chrome 91.

Como a API WebOTP funciona

A API WebOTP é simples o suficiente:

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

A mensagem SMS precisa ser formatada com os códigos de uso único vinculados à origem.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Observe que, na última linha, ele contém a origem a ser precedida por um @ seguido pela OTP precedida por um #.

Quando a mensagem de texto chega, uma barra de informações aparece e solicita que o usuário verifique o número de telefone. Depois que o usuário clica no botão Verify, o navegador encaminha automaticamente o OTP para o site e resolve o navigator.credentials.get(). O site pode extrair a OTP e concluir o processo de verificação.

Aprenda os conceitos básicos do uso do WebOTP em Verificar números de telefone na Web com a API WebOTP.

Casos de uso de iframes de várias origens

A inserção de um OTP em um formulário em um iframe entre origens é comum em cenários de pagamento. Alguns emissores de cartão de crédito exigem uma etapa de verificação extra para verificar a autenticidade do pagador. Isso é chamado de 3D Secure, e o formulário normalmente é exposto em um iframe na mesma página, como se fizesse parte do fluxo de pagamento.

Exemplo:

  • Um usuário visita shop.example para comprar um par de sapatos com um cartão de crédito.
  • Depois de inserir o número do cartão de crédito, o provedor de pagamento integrado mostra um formulário de bank.example em um iframe pedindo que o usuário verifique o número de telefone para finalizar a compra rapidamente.
  • O bank.example envia um SMS que contém um OTP para que o usuário possa digitá-lo para verificar a identidade.

Como usar a API WebOTP em um iframe de origem cruzada

Para usar a API WebOTP em um iframe de origem cruzada, você precisa fazer duas coisas:

  • Faça anotações sobre a origem do frame superior e a origem do iframe na mensagem de texto do SMS.
  • Configure a política de permissões para permitir que o iframe de origem cruzada receba OTP do usuário diretamente.
API WebOTP em um iframe em ação.

Você pode testar a demonstração em https://web-otp-iframe-demo.stackblitz.io (link em inglês).

Anotar origens vinculadas à mensagem de texto SMS

Quando a API WebOTP é chamada em um iframe, a mensagem de texto SMS precisa incluir a origem do frame superior precedida por @, seguida pelo OTP precedido por # e pela origem do iframe precedida por @.

@shop.example #123456 @bank.exmple

Configurar a política de permissões

Para usar o WebOTP em um iframe de origem cruzada, o incorporador precisa conceder acesso a essa API pela política de permissões otp-credentials para evitar um comportamento não intencional. Em geral, há duas maneiras de alcançar esse objetivo:

  • Por cabeçalho HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • pelo atributo allow do iframe:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Confira mais exemplos sobre como especificar uma política de permissão .

Advertências

Níveis de aninhamento

No momento, o Chrome só oferece suporte a chamadas da API WebOTP de iframes de origem cruzada que tenham não mais de uma origem única na cadeia de ancestrais. Nos seguintes cenários:

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

O uso do WebOTP em b.com é aceito, mas não em c.com.

O cenário a seguir também não tem suporte devido à falta de demanda e complexidades de UX.

  • a.com -> b.com -> a.com (chama a API WebOTP)

Interoperabilidade

Embora os mecanismos de navegadores que não sejam o Chromium não implementem a API WebOTP, o Safari compartilha o mesmo formato de SMS com o suporte input[autocomplete="one-time-code"]. No Safari, assim que um SMS com um formato de código de uso único vinculado à origem chega com a origem correspondente, o teclado sugere a entrada do OTP no campo de entrada.

Desde abril de 2021, o Safari oferece suporte a iframes com um formato de SMS exclusivo usando %. No entanto, como a discussão de especificação concluiu que o @ seria usado, esperamos que a implementação do formato de SMS com suporte seja convergente.

Feedback

Seu feedback é inestimável para melhorar a API WebOTP. Então, faça um teste e dê sua opinião (link em inglês).

Recursos

Foto de rupixen.com no Unsplash