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

A API WebOTP agora pode receber senhas únicas de dentro de iframes.

Eiji Kitamura
Yi Gu
As OTPs (senhas únicas) por SMS são usadas com frequência para verificar números de telefone, por exemplo, como uma segunda etapa na 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 o OTP facilita erros e prejudica a experiência do usuário.

A API WebOTP permite que os sites obtenham de forma programática a senha única de uma mensagem SMS e a insiram automaticamente no formulário para os usuários com apenas um toque, sem precisar mudar de app. O SMS é formatado especialmente e vinculado à origem, o que reduz as chances de sites de phishing roubarem a senha única.

Um caso de uso que ainda não era compatível com a WebOTP era o direcionamento a uma origem em um iframe. Isso geralmente é usado para confirmação de pagamento, especialmente com 3D Secure. Com o formato comum para oferecer suporte a iframes de origem cruzada, a API WebOTP agora entrega senhas únicas vinculadas a origens aninhadas a partir do Chrome 91.

Como a API WebOTP funciona

A API WebOTP é simples:

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

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

Your OTP is: 123456.

@web-otp.glitch.me #12345

Observe que, na última linha, há a origem a ser vinculada, precedida por um @ seguido pelo OTP, precedido por um #.

Quando a mensagem de texto chega, uma barra de informações aparece e pede 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(). Em seguida, o site pode extrair o OTP e concluir o processo de verificação.

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

Casos de uso de iframes de origem cruzada

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

Exemplo:

  • Um usuário acessa 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 uma finalização de compra rápida.
  • O bank.example envia um SMS com um OTP para o usuário, que pode inseri-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:

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

Teste a demonstração em https://web-otp-iframe-demo.stackblitz.io.

Anotar origens vinculadas na mensagem de texto por SMS

Quando a API WebOTP é chamada de um iframe, a mensagem de texto SMS precisa incluir a origem do frame principal 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 a WebOTP em um iframe de origem cruzada, o incorporador precisa conceder acesso a essa API usando uma política de permissões otp-credentials para evitar um comportamento indesejado. Em geral, há duas maneiras de alcançar essa meta:

  • via 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 de como especificar uma política de permissões .

Advertências

Níveis de aninhamento

No momento, o Chrome só oferece suporte a chamadas da API WebOTP de iframes de origem cruzada que têm no máximo uma origem exclusiva na cadeia de ancestrais. Nos cenários a seguir:

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

O uso da WebOTP em b.com é compatível, mas em c.com não.

O cenário a seguir também não é compatível devido à falta de demanda e às complexidades de UX.

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

Interoperabilidade

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

Desde abril de 2021, o Safari é compatível com iframes com um formato de SMS exclusivo usando %. No entanto, como a discussão sobre a especificação concluiu que @ é a melhor opção, esperamos que a implementação do formato de SMS compatível seja convergente.

Feedback

Seu feedback é muito importante para melhorar a API WebOTP. Teste e dê sua opinião.

Recursos

Foto de rupixen.com no Unsplash