O padrão escuro de preenchimento automático

Um formulário de inscrição no jornal tinha campos para nome, e-mail e senha. Então, comecei a digitar no campo nome e o preenchimento automático sugeriu meu perfil. Mas havia algo funky . A sugestão de preenchimento automático incluiu meu endereço de correspondência. Desnecessário dizer que era intrigante: o endereço não era um campo no formulário. Por que foi mesmo sugerido?

Quando essa pergunta começou a se formar em minha mente, meu cérebro já havia sinalizado para meu dedo clicar na sugestão, e pronto. Em seguida, fui levado a uma segunda página de formulário que solicitava informações adicionais, como endereço, telefone, data de nascimento e assim por diante. E todos esses campos também foram pré-preenchidos pela funcionalidade de preenchimento automático.

Suspirei de alívio. Era um formulário “multi-step” e não um truque do site. Afinal, era um jornal respeitável. Apaguei todas as informações opcionais da segunda página, completei a inscrição e segui em frente.

Essa interação (problemática) destacou um dos riscos de usar recursos de preenchimento automático .

Autocompletar e Autopreencher

Eles podem parecer semelhantes, mas autocomplete automático e preenchimento automático não são a mesma coisa . Embora estejam intimamente relacionados:

• O preenchimento automático é um recurso do navegador que permite que as pessoas salvem informações (no navegador ou no sistema operacional) e as usem em formulários da web.
• autocomplete é um atributo HTML que fornece orientações ao navegador sobre como (ou não) preencher automaticamente os campos em um formulário da web.

Poderíamos dizer que o preenchimento automático é o “o quê”, enquanto o preenchimento automático é o “como”, ou seja, o autofill armazena os dados e tenta combiná-los em um formulário da web (com base nos campos name , type ou id ), e o autocomplete guia o navegador sobre como fazê-lo (que informação é esperada em cada campo).

O preenchimento automático é um recurso poderoso com muitas opções que permite especificar muitos tipos diferentes de valores:

• Pessoal : Nome, morada, telefone, data de nascimento;
• Financeiro : número do cartão de crédito, nome, data de validade;
• Demografia : localização, idade, sexo, idioma;
• Profissional : empresa e cargo.

O preenchimento automático é um recurso amplamente difundido por opção ou por acidente: quem não aceitou deixar o navegador salvar/usar informações de formulários da web, de propósito ou por engano? E isso pode ser um problema – especialmente combinado com o mau uso do autocomplete (e o número absurdo adicional de e-mails de phishing e mensagens SMS hoje em dia).

Riscos de privacidade

Ambos os recursos apresentam (pelo menos) dois riscos principais para o usuário, ambos relacionados aos seus dados pessoais e sua privacidade:

1. Campos não visíveis são preenchidos (não é o mesmo que campos com tipo oculto);
2. As informações preenchidas automaticamente podem ser lidas via JavaScript mesmo antes de o usuário enviar o formulário.

Isso significa que , uma vez que um usuário opte por preencher automaticamente as informações, todos os campos estarão disponíveis para o desenvolvedor ler . Novamente, independentemente do usuário enviar ou não o formulário, sem que o usuário saiba quais campos foram realmente preenchidos.

Esta última parte é relativa: saber quais campos são preenchidos dependerá do navegador. Safari e Firefox fazem um bom trabalho nisso (como veremos em breve). Por outro lado, o Chrome, o navegador mais popular no momento, oferece uma experiência ruim que pode induzir até os usuários mais experientes a compartilhar suas informações pessoais.

Se considerarmos também os momentos em que o usuário acidentalmente opta por preencher os campos, essa questão se torna mais relevante. Vamos verificá-lo com mais detalhes com um exemplo.

Um pequeno experimento

Fiz um pequeno experimento criando um formulário com muitos campos e anexando o atributo autocomplete com valores diferentes. Então, brinquei um pouco com a estrutura do formulário:

• Eu escondi a maioria dos campos colocando-os em um container fora da tela (ao invés de usar hidden ou type="hidden" );
• Eu removi os campos visualmente ocultos da ordem de tabulação (para que os usuários de teclado ignorassem os campos ocultos);
• Tentei classificar os campos em uma ordem diferente (e, para minha surpresa, isso afetou o preenchimento automático!).

No final, o código do formulário ficou assim:

 <form method="post" action="javascript:alertData()"> <label for="name">Full name</label><input name="name" autocomplete="name" /><br/> <label for="email">Email</label><input name="email"/><br/> <label for="postal-code">ZIP</label><input name="postal-code" autocomplete="postal-code"/> <div class="hide-this"> <!-- Hidden --> <label for="firstname">First name</label><input tabindex="-1" type="hidden" name="firstname" autocomplete="given-name" /><br/> <label for="lastname">Last name</label><input tabindex="-1" name="lastname" autocomplete="family-name" /><br/> <label for="honorific-prefix">honorific-prefix</label><input tabindex="-1" name="honorific-prefix" autocomplete="honorific-prefix"/><br/> <label for="organization">Organization</label><input tabindex="-1" name="organization" /><br/> <label for="phone">Phone</label><input tabindex="-1" name="phone" autocomplete="tel" /><br/> <label for="address">address</label><input tabindex="-1" name="address" autocomplete="street-address" /><br/> <label for="city">City</label><input tabindex="-1" name="city" autocomplete="address-level2" /><br/> <label for="state">State</label><input tabindex="-1" name="state" autocomplete="address-level1" /><br/> <label for="level3">Level3</label><input tabindex="-1" name="state" autocomplete="address-level3" /><br/> <label for="level4">Level4</label><input tabindex="-1" name="state" autocomplete="address-level4" /><br/> <label for="country">Country</label><input tabindex="-1" name="country" autocomplete="country" /><br/> <label for="birthday">Birthday</label><input tabindex="-1" name="birthday" autocomplete="bday" /><br/> <label for="language">Language</label><input tabindex="-1" name="language" autocomplete="language" /><br/> <label for="sex">Sex</label><input tabindex="-1" name="sex" autocomplete="sex" /><br/> <label for="url">URL</label><input tabindex="-1" name="url" autocomplete="url" /><br/> <label for="photo">Photo</label><input tabindex="-1" name="photo" autocomplete="photo" /><br/> <label for="impp">IMPP</label><input tabindex="-1" name="impp" autocomplete="impp" /><br/> <label for="username">Username</label><input tabindex="-1" name="username" autocomplete="username" /><br/> <label for="password">Password</label><input tabindex="-1" name="password" autocomplete="password" /><br/> <label for="new-password">Password New</label><input tabindex="-1" name="new-password" autocomplete="new-password" /><br/> <label for="current-password">Password Current</label><input tabindex="-1" name="current-password" autocomplete="current-password" /><br/> <label for="cc">CC#</label><input tabindex="-1" name="cc" autocomplete="cc-number" /><br/> <label for="cc-name">CC Name</label><input tabindex="-1" name="cc-name" autocomplete="cc-name" /><br/> <label for="cc-expiration">CC expiration</label><input tabindex="-1" name="cc-expiration" autocomplete="cc-expiration" /><br/> <label for="cc-zipcode">CC Zipcode</label><input tabindex="-1" name="cc-zipcode" autocomplete="cc-postalcode" /><br/> </div> <button>Submit</button> </form>

Nota: Eu criei esta demonstração há algum tempo, e o padrão é um documento vivo. Desde então, alguns dos nomes de preenchimento automático foram alterados. Por exemplo, agora podemos especificar new-password e senha current-password ou mais detalhes para endereço ou cartão de crédito que não estavam disponíveis antes.

Esse formulário tinha três campos visíveis ( name , email e zipcode ). Embora esse formulário seja comum entre seguradoras, cabo e outros provedores de serviços, pode não ser muito difundido, então reduzi o formulário ainda mais com um único campo de e-mail. Vemos isso em todos os lugares para se inscrever em sites, boletins ou atualizações. Você pode ver uma demonstração em execução aqui:

Se você usou o preenchimento automático para preencher o formulário, já compartilhou mais informações do que queria ( não se preocupe, é tudo local e não compartilhado comigo ). E no Chrome, pode até parecer um formulário de assinatura perfeitamente normal.

Se você não tiver/usar o preenchimento automático, não se preocupe. Aqui está um resumo de como é a experiência em três navegadores diferentes.

Nota : Todos esses testes pressupõem o uso de preenchimento automático e são baseados em um perfil falso!

Safári

Quando você clica em um controle de formulário, o Safari mostra um ícone no lado direito do campo. Ao clicar nele, aparecerá um pop-up com as informações que o navegador compartilhará com o formulário:

Uma coisa boa: ele exibe todos os dados que serão compartilhados como parte do formulário. Não apenas os dados dos campos visíveis, mas todos eles. Neste ponto, o usuário pode suspeitar que algo não está bem. Há algo estranho.

Quando reduzi o formulário apenas para o campo de e-mail, o Safari fez algo interessante. O pop-up de preenchimento automático era diferente:

Ele afirma que apenas compartilhará o e-mail (e apenas compartilha essa informação). Mas as informações de contato abaixo podem ser mais complicadas. Quando clicamos nesse botão, o navegador mostra um resumo do perfil com seus dados compartilhados. Mas isso não é claramente afirmado em nenhum lugar. Ele simplesmente se parece com um cartão de contato comum com algumas opções de “compartilhar/não compartilhar”. Após clicar no botão “Autopreenchimento”, o formulário é preenchido com todos os dados. Não apenas o e-mail:

Portanto, existe uma maneira de um usuário compartilhar informações com o formulário inadvertidamente. É complicado, mas não muito exagerado, considerando que é o “destacado” com um ícone entre as duas opções possíveis.

Engraçado, os navegadores separam os dados pessoais dos dados do cartão de crédito, mas o Safari preencheu parte das informações do cartão de crédito com base nos dados pessoais (nome e CEP).

Raposa de fogo

Usar o preenchimento automático no Firefox é um pouco mais complexo. Não é automático como no Chrome e não há ícone como no Safari. Os usuários terão que começar a digitar ou clicar uma segunda vez para ver o pop-up de preenchimento automático, que terá uma nota com todas as categorias que o navegador preencher, não apenas os campos visíveis:

Testando com o formulário somente para e-mail, o Firefox apresentou o mesmo pop-up de preenchimento automático informando quais categorias de campos ele preencheria. Nenhuma diferença.

E da mesma forma que os outros navegadores, após a execução do preenchimento automático, pudemos ler todos os valores com JavaScript.

O Firefox era o melhor dos três: indicava claramente quais informações seriam compartilhadas com o formulário, independentemente dos campos ou de sua ordem. E ocultou a funcionalidade de preenchimento automático, uma segunda interação do usuário aconteceu.

Um usuário de teclado pode selecionar o preenchimento automático sem perceber, entrando na bolha pop-up e pressionando a tecla tab.

cromada

Então chegou a vez do Chrome. (Aqui eu uso “Chrome”, mas os resultados foram semelhantes para vários navegadores baseados em Chromium testados.) Cliquei no campo e, sem nenhuma interação adicional, o pop-up de preenchimento automático foi exibido. Embora o Firefox e o Safari tenham muitas coisas em comum, o Chrome é totalmente diferente: mostra apenas dois valores e ambos são visíveis.

Esta exibição foi por design. Eu escolhi a ordem dos campos de propósito para obter essa combinação específica de controles visíveis e sugestões de preenchimento automático. No entanto, parece que o Chrome dá a algumas propriedades de preenchimento automático mais “peso” para o segundo valor. E isso faz com que o pop-up mude dependendo da ordem dos campos no formulário.

Testar com a segunda versão do formulário não foi muito melhor:

Embora o pop-up mostre um campo que não está visível (o nome), não está claro qual é a finalidade do nome no pop-up. Um usuário experiente pode saber que isso acontece porque o nome é compartilhado, mas um usuário comum (e mesmo os experientes) pode achar que o email está associado ao perfil com esse nome. Não há indicação dos dados que o navegador compartilhará com o formulário.

E assim que o usuário clicar no botão de preenchimento automático, os dados estarão disponíveis para o desenvolvedor ler com JavaScript:

O Chrome foi o pior infrator: compartilhou as informações automaticamente, não ficou claro quais dados estavam envolvidos e as sugestões de preenchimento automático mudaram com base na ordem e nos atributos dos controles.

Os dois primeiros problemas são comuns a todos/muitos navegadores, a ponto de poder até ser considerado um recurso. No entanto, o terceiro problema é exclusivo dos navegadores Chromium e facilita um padrão escuro esboçado.

Esse comportamento seria mais uma anedota e não um problema se não fosse porque o Chrome tem uma participação de mercado considerável dos navegadores online (inclui o Chrome e os baseados em Chromium).

O padrão escuro

Como você provavelmente sabe, um padrão escuro é um padrão de UX enganoso que engana os usuários a fazer coisas que eles podem não querer fazer.

“Quando você usa sites e aplicativos, você não lê cada palavra em cada página – você lê rapidamente e faz suposições. Se uma empresa quer enganá-lo para fazer algo, eles podem tirar vantagem disso fazendo uma página parecer que está dizendo uma coisa quando na verdade está dizendo outra.”

— Harry Brignull, darkpatterns.org

O comportamento descrito nos pontos anteriores é claramente uma experiência de usuário enganosa. Usuários não experientes não perceberão que estão compartilhando seus dados pessoais . Ainda mais pessoas com experiência em tecnologia podem ser enganadas por ele, pois o Chrome faz parecer que a opção selecionada pertence a um perfil, em vez de indicar claramente quais informações estão sendo compartilhadas.

As implementações do navegador causam esse comportamento, mas exige que o desenvolvedor o configure para explorá-lo. Infelizmente, já existem empresas dispostas a explorá-lo, vendendo-o como um recurso para obter leads.

Enquanto um padrão escuro for, também pode ser ilegal. Isso porque quebra muitos princípios relacionados ao processamento de dados pessoais especificados no artigo 5 do Regulamento Geral Europeu de Proteção de Dados (GDPR):

• Legalidade, justiça e transparência
  O processo é quase transparente.
• Limitação de propósito
  Os dados são tratados de forma incompatível com a finalidade inicial.
• Minimização de dados
  É bem o contrário. Maximização de dados: obtenha o máximo de informações possível.

Por exemplo, se você deseja se inscrever em um boletim informativo ou solicitar informações sobre um produto e fornecer seu e-mail, o site não tem o direito legal de obter seu nome, endereço, data de nascimento, número de telefone ou qualquer outra coisa sem o seu consentimento ou conhecimento. Mesmo que você considere que o usuário deu permissão ao clicar no preenchimento automático, a finalidade dos dados obtidos não corresponde à intenção original do formulário.

Soluções possíveis

Para evitar o problema, todos os atores precisam contribuir e ajudar a resolver o problema:

1. Comercial
2. Desenvolvedores e designers
3. Navegadores

1. Usuários

A única coisa do lado do usuário seria garantir que os dados exibidos no pop-up de preenchimento automático estejam corretos .

Mas precisamos lembrar que o usuário é a vítima aqui. Poderíamos culpá -los por não prestar atenção suficiente ao clicar no preenchimento automático, mas isso seria injusto. Além disso, há muitas razões pelas quais uma pessoa pode clicar no botão por engano e compartilhar seus dados acidentalmente. Portanto, mesmo usuários bem-intencionados e experientes podem cair nessa.

2. Desenvolvedores e Designers

Sejamos honestos. Embora os desenvolvedores não sejam a causa raiz do problema, eles desempenham um papel fundamental na exploração do padrão sombrio. Seja acidentalmente ou com intenção maliciosa.

E sejamos responsáveis ​​e honestos (desta vez de forma literal), porque é isso que desenvolvedores e designers podem fazer para construir confiança e fazer bom uso dos recursos de preenchimento automático e preenchimento automático:

• Preencha automaticamente apenas os dados que você precisa.
• Indique claramente quais dados serão coletados.
• Não oculte campos de formulário que serão enviados posteriormente.
• Não engane ou engane os usuários para que enviem mais dados.

Como medida extrema, talvez tente evitar o preenchimento automático de certos campos. Mas, claro, isso traz outros problemas, pois tornará o formulário menos utilizável e acessível. Portanto, encontrar um equilíbrio pode ser complicado.

Tudo isso sem considerar a possibilidade de uma vulnerabilidade XSS que poderia explorar o padrão escuro. Claro, isso seria uma história completamente diferente e um problema ainda mais significativo.

3. Navegadores

Muito do trabalho precisaria ser feito do lado do navegador (especialmente no lado do Chromium). Mas deixe-me começar afirmando que nem tudo é ruim com a forma como os navegadores lidam com o preenchimento automático/completo automático. Muitas coisas são boas. Por exemplo:

• Eles limitam os dados que podem ser compartilhados
  Os navegadores possuem uma lista de campos para preenchimento automático que podem não incluir todos os valores descritos no padrão HTML.
• Eles encapsulam e agrupam dados
  Os navegadores separam informações pessoais e financeiras para proteger valores críticos, como cartões de crédito. O Safari teve alguns problemas com isso, mas foi menor.
• Eles avisam sobre os dados que serão compartilhados
  Às vezes, isso pode estar incompleto (Chrome) ou não claro (Safari), mas alerta o usuário.

Ainda assim, algumas coisas podem ser melhoradas por muitos ou todos os navegadores da web.

Mostrar todos os campos que serão preenchidos automaticamente

Os navegadores devem sempre mostrar uma lista de todos os campos que serão preenchidos automaticamente no pop-up de preenchimento automático (em vez de apenas uma lista parcial). Além disso, as informações devem ser claramente identificadas como dados a serem compartilhados em vez de serem exibidas como um cartão de contato comum poderia ser enganoso.

O Firefox fez um excelente trabalho neste ponto, o Safari fez um bom trabalho em geral e o Chrome foi inferior em comparação com os outros dois.

Não acione o evento onChange no preenchimento automático

Essa seria uma solicitação problemática porque esse comportamento faz parte da definição de preenchimento automático no padrão HTML:

“O mecanismo de autocompletar deve ser implementado pelo agente do usuário agindo como se o usuário tivesse modificado os dados do controle [...].”

Isso significa que os navegadores devem tratar os dados autocompletados como se tivessem sido inseridos pelo usuário, acionando assim todos os eventos, mostrando os valores, etc. Mesmo em um campo não disponível visualmente.

Prevenir esse comportamento em elementos não visíveis pode resolver o problema. Mas validar se um controle de formulário está visível ou não pode ser caro para o navegador. Além disso, essa solução é apenas parcial porque os desenvolvedores ainda podem ler os valores mesmo sem as entradas acionarem eventos.

Não permitir que os desenvolvedores leiam campos preenchidos automaticamente antes do envio

Isso também seria problemático porque muitos desenvolvedores geralmente confiam na leitura dos valores dos campos antes do envio para validar os valores (por exemplo, quando o usuário se afasta das entradas). Mas faria sentido: o usuário não deseja compartilhar as informações até que eles enviem o formulário, então o navegador também não deveria.

Uma alternativa para isso seria fornecer dados falsos ao ler valores de preenchimento automático. Os navegadores da Web já fazem algo assim com os links visitados, por que não fazer o mesmo com os campos de formulário de preenchimento automático? Fornecer sem sentido como o nome, um endereço válido que corresponda às autoridades locais em vez do endereço do usuário, um número de telefone falso? Isso pode resolver as necessidades de validação do desenvolvedor enquanto protege as informações pessoais do usuário.

Exibir uma lista completa dos campos/valores que o navegador compartilhará claramente com o formulário seria um grande passo à frente. Os outros dois são ideais, mas são mais objetivos estendidos. Ainda assim, são iniciativas que melhorariam consideravelmente a privacidade.

O padrão escuro de preenchimento automático ainda seria possível de explorar? Infelizmente sim. Mas seria muito mais complicado. E neste momento, seria responsabilidade do usuário e dever do desenvolvedor evitar tal situação.

Conclusão

Podemos argumentar que o preenchimento automático não é um grande problema de segurança (nem mesmo no Chrome) porque requer interação do usuário para selecionar as informações. No entanto, também podemos argumentar que a potencial perda de dados justifica uma ação adequada. E o Chrome fez mais alterações para questões de segurança/usabilidade (relativamente) menos importantes (consulte alert() , prompt() e confirm() do que o que poderia ser feito para proteger informações pessoais importantes.

Então temos a questão do padrão escuro. Pode ser evitado se cada um fizer sua parte:

• Os usuários devem ter cuidado com quais formulários/dados eles preenchem automaticamente;
• Os desenvolvedores devem evitar explorar esses dados;
• Os navegadores devem fazer um trabalho melhor na proteção dos dados das pessoas.

Na raiz, esse padrão escuro é um problema do navegador (e principalmente um problema do Chrome), e não pequeno (a privacidade deve ser a chave online). Mas há uma escolha. No final, explorar o padrão escuro ou não fica a cargo dos desenvolvedores. Então vamos escolher sabiamente e fazer a coisa certa.

Leitura adicional na revista Smashing

• Melhor design de formulário: uma coisa por página (estudo de caso), Adam Silver
• Preocupações comuns e privacidade em formulários da Web, Vitaly Friedman
• Simplificando estilos de formulários com accent-color destaque , Michelle Barker
• Tipos de entrada HTML5: onde eles estão agora?, Drew McLellan
• Formulários e validação em Ionic React, Jerry Navi
• Práticas recomendadas para design de formulários para dispositivos móveis, Nick Babich