A API do WebOTP agora pode receber OTPs de iframes.
As OTPs por SMS (senhas únicas) geralmente são 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, copiar e colar ou inserir manualmente a OTP facilita o cometer erros e prejudica a experiência do usuário.
A API WebOTP oferece aos sites a capacidade de receber de maneira programática a senha única de uma mensagem SMS e inseri-la automaticamente no formulário para os usuários com apenas um toque sem mudar o app. O SMS é formatado especialmente e vinculado à origem. Isso reduz as chances de sites de phishing roubarem a OTP.
Um caso de uso que ainda não tem 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 oferece OTPs vinculadas a origens aninhadas a partir do Chrome 91.
Como a API WebOTP funciona
A própria API WebOTP é bastante 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, 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 a 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 origem cruzada
A inserção de uma OTP em um formulário dentro de um iframe de origem cruzada é comum em situações de pagamento. Alguns emissores de cartão de crédito exigem uma etapa de verificação adicional para conferir a autenticidade do pagador. Esse processo é chamado de 3D Secure, e o formulário geralmente é exposto 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 mostra um
formulário de
bank.example
em um iframe solicitando que o usuário verifique o número de telefone para agilizar a finalização da compra. - O
bank.example
envia um SMS que contém uma OTP ao usuário para que ele possa digitá-la e 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:
- Anote a origem do frame superior e a origem do iframe na mensagem de texto SMS.
- Configure a política de permissões para que o iframe de origem cruzada receba OTP diretamente do usuário.
Teste a demonstração em https://web-otp-iframe-demo.stackblitz.io (em inglês).
Anotar origens limitadas na 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 pela OTP precedida por #
,
seguida pela origem do iframe precedida por @
.
@shop.example #123456 @bank.exmple
Configurar política de permissões
Para usar a WebOTP em um iframe de origem cruzada, o incorporador precisa conceder acesso a essa API por meio da política de permissões otp-credentials para evitar comportamentos indesejados. Em geral, existem duas maneiras de atingir essa meta:
- por cabeçalho HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
- por meio do atributo
allow
do iframe:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
Veja 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 de API WebOTP de iframes de origem cruzada que têm no máximo uma origem exclusiva na cadeia ancestral. 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 é compatível, mas não em c.com.
O cenário a seguir também não é aceito devido à falta de demanda e às complexidades da UX.
- a.com -> b.com -> a.com (chama a API WebOTP)
Interoperabilidade
Embora os 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 input[autocomplete="one-time-code"]
. No Safari, assim que um
SMS que contenha um formato de código único vinculado à origem chegar com a origem
correspondente, o teclado sugere inserir a OTP no campo de entrada.
Desde abril de 2021, o Safari oferece suporte ao iframe com um formato de SMS exclusivo usando
%
.
No entanto, como a discussão sobre especificações foi concluída para adotar @
, esperamos que a
implementação do formato de SMS compatível tenha convergência.
Feedback
Seu feedback é inestimável para melhorar a API WebOTP, então vá em frente e comente o que achou.
Recursos
- Verificar números de telefone na Web com a API OTP da Web
- Práticas recomendadas para formulários de OTP por SMS
- API WebOTP
- Códigos únicos vinculados à origem entregues por SMS
Foto de rupixen.com no Unsplash