05.03.2025

Desabilitando o Prompt de Salvamento de Senhas do Navegador: HTML, JS

Resposta Rápida

Para evitar que o navegador salve senhas digitadas, você pode usar o atributo autocomplete="new-password" no elemento input. Para aumentar a segurança, é uma boa prática atribuir um valor único ao atributo name toda vez que a página for atualizada.

<input type="password" autocomplete="new-password" name="pass_{{unique_id}}">

Lembre-se: Para impedir o salvamento de senhas, especifique autocomplete="new-password" e um name único para excluir o preenchimento automático.

Considerando o Comportamento do Navegador

Apesar das medidas mencionadas, é importante reconhecer que o comportamento do navegador varia ao interagir com o atributo autocomplete. Mesmo autocomplete="new-password" não garante resultados — o Chrome, por exemplo, ignora autocomplete="off" em favor de seu próprio gerenciador de senhas.

Se autocomplete="new-password" não resolver o problema, você pode usar JavaScript. Alterar o tipo do campo de entrada no momento do foco pode desviar o algoritmo de memória:

document.getElementById('passwordField').addEventListener('focus', function() {
    this.setAttribute('type', 'text');
    // Senha? Não, você está enganado; sou apenas um campo de texto...
});

document.getElementById('passwordField').addEventListener('blur', function() {
    this.setAttribute('type', 'password');
    // Oops, obrigado, deixa eu voltar às minhas funções principais.
});

Aqui mudamos o type ao ganhar foco e o revertamos ao estado original quando o foco é perdido. No entanto, tenha em mente que essas mudanças podem impactar a experiência do usuário.

Ética e Considerações sobre a Experiência do Usuário

É essencial levar em conta as preferências do usuário. Muitos acham conveniente quando os navegadores armazenam senhas. É importante envolver o usuário e educá-lo sobre as configurações corretas, especialmente se estiver usando computadores públicos ou compartilhados.

O uso correto de autocomplete pode prevenir o salvamento de senhas sem comprometer a experiência do usuário. É crucial fornecer informações aos usuários enquanto também lhes oferece liberdade de escolha.

Considerações Especiais para Computadores Compartilhados

Para prevenir o salvamento de senhas de forma confiável, especialmente em computadores públicos, pode ser útil usar um método JavaScript com um atraso:

window.onload = function() {
    setTimeout(function() {
        document.getElementById('passwordField').setAttribute('autocomplete', 'new-password');
        // Um golpe no preenchimento automático!
    }, 1000);
};

Esse método de execução atrasada pode ajudar a combater o preenchimento automático do navegador, especialmente se o sistema apagar os dados da sessão após o fechamento.

Educando Usuários Sobre Configurações do Navegador

Informar os usuários melhorará sua segurança e facilidade de uso. Podemos integrar mensagens informativas e dicas no aplicativo, explicando as configurações de privacidade de diferentes navegadores. Eduque os usuários sobre por que é importante não salvar senhas em computadores públicos e ensine-os a excluir listas de Mais Recentes Usadas (MRU).

Medidas de Segurança Adicionais

Para uma proteção aprimorada, você pode criar dinamicamente um campo de entrada de senha usando JavaScript após o carregamento da página, ou implementar frames ocultas com formulários falsos para distrair o algoritmo de preenchimento automático. Esses métodos exigem mais esforço, mas podem valer a pena. É sempre importante considerar o equilíbrio entre complexidade e real utilidade.

Visualização

A interação do tipo de entrada de senha pode ser visualizada como um diálogo entre a Chave e a Fechadura:

- Navegador: "Quer salvar esta pequena chave 🔑 para depois?"
- Campo de Senha: "🔒 Não, obrigado, esqueça esta chave assim que a porta fechar!"

Para eliminar a possibilidade de memorização da senha:

<input type="password" autocomplete="off" />

Nota:

• 🔑 = Senha do usuário
• 🔒 = Campo de senha com preenchimento automático desativado
• 🚪 = Porta simbolizando a sessão

Resumo

Cada login no sistema é como abrir uma nova porta 🔒. A chave 🔑 deve ser esquecida assim que a porta se fecha, não salva para a próxima vez.

Recursos Úteis

1. Atributo HTML: autocomplete - HTML: Linguagem de Marcação de Hipertexto | MDN — Um guia detalhado do MDN sobre como usar o atributo autocomplete em formulários.
2. Padrão HTML — Tudo sobre <input> de acordo com a especificação oficial do HTML.
3. Padrão HTML — Descrição do funcionamento e impacto dos atributos autocomplete no preenchimento automático.
4. Discussão no Stack Overflow — Discussão sobre como desabilitar o preenchimento automático em vários navegadores.
5. Blog Chromium — Dicas para melhorar o gerenciamento de senhas pela equipe de desenvolvimento Chromium.
6. Alternar Visibilidade da Senha — Uma lição da W3Schools sobre como criar um campo de entrada de senha com um recurso de alternância para visibilidade.
7. Melhores Práticas para Formulários de Login — Melhores práticas e recomendações para combater o salvamento de informações sensíveis pelos navegadores.

Video

Navigation