Preenchimento automático compartilhado entre iframes: uma proposta inicial

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, o que permite uma melhor experiência de preenchimento automático para o usuário.

Dominik mengelt
Dominik Mengelt
Twitter GitHub Mastodon
Sam dutton

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 precisam ser preenchidos automaticamente. Isso é útil principalmente para formulários de pagamento, em que é muito comum que campos confidenciais (para conformidade com 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 a seguir, o nome do titular do cartão e a data de validade estão na página de nível superior (ou no 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:

Diagrama de árvore mostrando como campos diferentes estão em frames distintos em uma forma de pagamento

Para os comerciantes, esse design combina segurança e flexibilidade:

  • Os iframes de origem cruzada isolam os dados de pagamento confidenciais da infraestrutura do comerciante, o que ajuda na conformidade com o PCI DSS.
  • Os campos de formulário em frames diferentes podem ser organizados e estilizados para combinar com a 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 gera dúvidas sobre o modelo de segurança dos formulários. Para os usuários, formulários com vários frames podem levar a uma experiência ruim de preenchimento automático, como no exemplo a seguir:

A política de mesma origem é um valor de referência sólido para o preenchimento automático em frames, mas não fornece granularidade suficiente para que o navegador diferencie frames confiáveis e não confiáveis no 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 de origem cruzada:

<!-- 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:

Teste 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 sinalizações na linha de comando.

--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill

Detectar o suporte a recursos

Use o código a seguir 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. No momento, a equipe do Chrome está trabalhando com outros fornecedores de navegadores para analisar a proposta. Outras propostas sobre como melhorar a experiência do usuário com o preenchimento automático nos iframes também estão em discussão.

Vamos continuar fornecendo atualizações à medida que avançarmos na proposta. Enquanto isso, se você tiver uma página de finalização de compra em que os campos <input> confidenciais (número do cartão de crédito, cvc) são incorporados de um provedor terceirizado, entre em contato conosco. Gostaríamos de saber se o preenchimento automático compartilhado entre iframes poderia melhorar a experiência de preenchimento automático dos usuários durante o processo de finalização da compra.

Saiba mais

Foto de Jessica Ruscello no Unsplash (links em inglês).