Alguns formulários têm campos em iframes, o que causa problemas para o preenchimento automático do navegador. Com o preenchimento automático compartilhado, o frame pai pode designar a confiabilidade de iframes de origem cruzada para oferecer uma experiência de preenchimento automático melhor para o usuário.
Uma proposta para permitir o preenchimento automático em um iframe de origem cruzada está disponível para testes. Com esse recurso, um frame pai pode designar os frames cujos campos podem ser preenchidos automaticamente. Isso é útil principalmente para formulários de pagamento, em que é muito comum que campos sensíveis (para conformidade com o PCI DSS) sejam carregados de uma origem de terceiros, como um provedor de serviços de pagamento (PSP, na sigla em inglês).
No exemplo abaixo, o nome do titular do cartão e a data de validade estão na página de nível superior (ou frame principal), mas o número do cartão de crédito e o código de verificação estão em iframes de um PSP.
<!-- Top-level document URL: https://merchant.com/... -->
<form>
Cardholder name: <input id="name">
Credit card number: <iframe src="https://psp.com/..."><input id="num"></iframe>
Expiration date: <input id="exp">
CVC: <iframe src="https://psp.com/..."><input id="cvc"></iframe>
</form>
O diagrama a seguir representa a estrutura do formulário:
Para os comerciantes, esse design combina segurança e flexibilidade:
- Os iframes de origem cruzada isolam os dados de pagamento sensíveis da infraestrutura do comerciante, o que ajuda no compliance com o PCI DSS.
- Os campos de formulário em diferentes frames podem ser organizados e estilizados para corresponder à aparência do site do comerciante.
Do ponto de vista do navegador, isso significa que há casos de uso comuns e legítimos para formulários com vários frames, o que levanta questões sobre o modelo de segurança para formulários. Para os usuários, formulários com vários frames podem resultar em uma experiência de preenchimento automático ruim, como no exemplo abaixo:
A política de mesma origem é uma base sólida para o preenchimento automático em todos os frames, mas não oferece granularidade suficiente para que o navegador diferencie frames confiáveis e não confiáveis para preenchimento automático.
Para permitir uma melhor experiência de preenchimento automático e manter a segurança dos dados do usuário, a equipe do Chrome está trabalhando em uma proposta que permite o preenchimento automático em um iframe de origem cruzada. Se o formulário for alterado para usar o preenchimento automático compartilhado, o Chrome vai preencher o número do cartão de crédito entre origens:
<!-- Top-level document URL: https://merchant.com/... -->
<form>
Cardholder name: <input id="name">
Credit card number: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="num"></iframe>
Expiration date: <input id="exp">
CVC: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="cvc"></iframe>
</form>
Isso pode resultar em uma melhor experiência de preenchimento automático para o usuário:
Testar o preenchimento automático compartilhado localmente
É possível testar o preenchimento automático compartilhado para um único usuário no Chrome 93.0.4577.0 e versões mais recentes em computadores e dispositivos móveis definindo flags na linha de comando.
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Detectar suporte a recursos
Use o código abaixo para detectar se a propriedade shared-autofill está disponível:
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
A seguir
O preenchimento automático compartilhado é uma proposta inicial para adicionar um recurso de preenchimento automático à política de permissões. A equipe do Chrome está trabalhando com outros fornecedores de navegadores para analisar a proposta. Outras propostas sobre como aumentar a experiência do usuário para o preenchimento automático em iframes também estão em discussão.
Vamos continuar atualizando você à medida que progredirmos com essa proposta. Enquanto isso, se você tiver uma página de finalização de compra em que os campos sensíveis <input> (número do cartão de crédito, CVV) estão incorporados de um provedor externo, entre em contato com nossa equipe. Gostaríamos de saber se o preenchimento automático compartilhado em iframes pode melhorar a experiência de preenchimento automático dos usuários durante o processo de finalização da compra.
Saiba mais
- Proposta atual
- Revisão da TAG do W3C
- Exemplo de formulário de pagamento usado nesta postagem
- O que são as flags do Chrome?
Foto de Jessica Ruscello no Unsplash.