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

A API WebOTP agora pode receber OTPs de dentro de iframes.

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

A API WebOTP (link em inglês) oferece aos sites a capacidade de obter a senha única de uma mensagem SMS e inseri-la automaticamente no formulário para os usuários com apenas um toque, sem alternar o app. O SMS é formatado especialmente e vinculado à origem, por isso reduz mais chances de sites de phishing roubarem a OTP.

Um caso de uso que ainda não tinha suporte no WebOTP foi segmentar uma origem em um iframe. Isso normalmente é usado para confirmação de pagamento, especialmente com o 3D Secure. Ter a tática para dar suporte a origens cruzadas iframes, a API WebOTP agora oferece OTPs vinculadas 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 o prefixo único de origem de código aberto.

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 confirmar o número de telefone. Depois que o usuário clicar no botão Verify, a navegador encaminha automaticamente a OTP para o site e resolve a navigator.credentials.get(). O site pode extrair a OTP e concluir o processo de verificação.

Conheça as noções básicas do WebOTP em Verificar números de telefone na Web com o API WebOTP.

Casos de uso de iframes de origem cruzada

Inserir uma OTP em um formulário de iframe de origem cruzada é comum em pagamentos. diferentes. Alguns emissores de cartão de crédito exigem uma etapa de verificação adicional para verificar a autenticidade do pagador. Isso é chamado de 3D Secure e o formulário é geralmente expostos em um iframe na mesma página, como se fosse 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 mostrará um formulário de bank.example em um iframe solicitando que o usuário verifique a número de telefone para agilizar o pagamento.
  • O bank.example envia um SMS com uma OTP ao usuário para que ele possa inseri-lo para confirmar sua identidade.

Como usar a API WebOTP de um iframe de origem cruzada

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

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

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

Anotar origens vinculadas à mensagem de texto SMS

Quando a API WebOTP é chamada de dentro de um iframe, a mensagem de texto SMS deve inclua a origem do frame superior precedida por @ seguida pela OTP precedida por # seguida pela origem do iframe precedida por @.

@shop.example #123456 @bank.exmple

Configurar política de permissões

Para usar o WebOTP em um iframe de origem cruzada, o incorporador precisa conceder acesso a esse API via política de permissões otp-credentials para evitar problemas do seu modelo. Em geral, há duas maneiras de atingir esse objetivo:

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

Veja mais exemplos sobre como especificar uma política de permissões

Advertências

Níveis de aninhamento

No momento, o Chrome só oferece suporte a chamadas de API WebOTP de iframes de origem cruzada que tenham no máximo uma origem exclusiva na cadeia de ancestral. Na 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

é possível usar WebOTP em b.com, mas não em c.com.

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

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

Interoperabilidade

Embora os outros mecanismos de navegador, além do 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 O SMS com formato de código de uso único vinculado à origem chega com o teclado sugere inserir a OTP no campo de entrada.

Desde abril de 2021, o Safari oferece suporte a iframe com um formato exclusivo de SMS usando %. No entanto, como a discussão sobre especificações concluiu com @, esperamos que a de suporte do formato SMS convergirão.

Feedback

Seu feedback é inestimável para melhorar a API WebOTP. Não deixe de testar! e nos avise o que você acha.

Recursos

Foto de rupixen.com no Unsplash (links em inglês)