Impedir que os usuários colem dados em campos de entrada

Alguns sites alegam que permitir que os usuários colem senhas reduz a segurança. No entanto, a colagem de senhas melhora a segurança porque permite o uso de gerenciadores de senhas.

Os gerenciadores de senhas normalmente geram senhas fortes para os usuários, armazenam com segurança e as colam automaticamente nos campos de senha sempre que os usuários precisam fazer login. Em geral, essa abordagem é mais segura do que forçar os usuários a digitar senhas curtas o suficiente para serem lembradas.

No caso geral, os usuários não podem ser impedidos de colar em elementos <input>.

Como essa auditoria do Lighthouse falha

O Lighthouse sinaliza o código que impede que os usuários colem em campos de entrada não somente leitura:

A auditoria do Lighthouse mostra que a página impede que os usuários colem dados em um campo de senha

O Lighthouse coleta todos os elementos <input> não somente leitura, cola um texto em cada elemento e verifica se o evento paste não foi impedido por um manipulador de eventos personalizado.

Também é possível impedir a colagem fora de um listener de eventos paste. O Lighthouse não detecta esse cenário.

Como ativar a ação de colar nos campos de senha

Encontre o código que está impedindo a colagem

Para encontrar e inspecionar rapidamente o código que está impedindo a colagem:

  1. Expanda o painel Event Listener Breakpoints.
  2. Expanda a lista Área de transferência.
  3. Marque a caixa de seleção paste.
  4. Cole um texto no campo de senha da sua página.
  5. O DevTools precisa pausar na primeira linha de código no listener de eventos paste relevante.

Remova o código que está impedindo a colagem

A origem do problema geralmente é uma chamada para preventDefault() no listener de eventos paste associado ao elemento de entrada de senha:

let input = document.querySelector('input');

input.addEventListener('paste', (e) => {
  e.preventDefault(); // This is what prevents pasting.
});

Se você quiser apenas colar eventos para forçar a interrupção deles, remova todo o listener de eventos.

Recursos

Código-fonte para a auditoria Impede que os usuários colem nos campos de entrada