Verifique a força da senha com JavaScript e expressões regulares

Verifique a força da senha com JavaScript e expressões regulares

Eu estava fazendo algumas pesquisas para encontrar um bom exemplo de verificador de força da senha que usa JavaScript e Expressões regulares (Regex). No aplicativo do meu trabalho, fazemos um post back para verificar a força da senha e é bastante inconveniente para nossos usuários.

O que é Regex?

Uma expressão regular é uma sequência de caracteres que define um padrão de pesquisa. Normalmente, esses padrões são usados ​​por algoritmos de pesquisa de string para find or encontre e substitua operações em strings ou para validação de entrada. 

Este artigo definitivamente não tem como objetivo ensinar expressões regulares. Saiba que a capacidade de usar expressões regulares simplificará absolutamente o seu desenvolvimento enquanto você procura por padrões no texto. Também é importante observar que a maioria das linguagens de desenvolvimento otimizou o uso de expressões regulares ... então, em vez de analisar e pesquisar strings passo a passo, o Regex é normalmente muito mais rápido no lado do servidor e do cliente.

Eu pesquisei na web um pouco antes de encontrar um exemplo de algumas ótimas expressões regulares que procuram uma combinação de comprimento, caracteres e símbolos. No entanto, o código era um pouco excessivo para o meu gosto e feito sob medida para .NET. Então, simplifiquei o código e coloquei em JavaScript. Isso faz com que ele valide a força da senha em tempo real no navegador do cliente antes de publicá-la de volta ... e fornece algum feedback ao usuário sobre a força da senha.

Digite uma senha

A cada toque do teclado, a senha é testada em relação à expressão regular e, em seguida, o feedback é fornecido ao usuário em um intervalo abaixo dela.




Digite a senha

Aqui está o código

A Expressões regulares faça um trabalho fantástico de minimizar o comprimento do código:

  • Mais personagens - Se o comprimento for inferior a 8 caracteres.
  • Fraco - Se o comprimento for inferior a 10 caracteres e não contiver uma combinação de símbolos, letras maiúsculas, texto.
  • Médio - Se o comprimento for 10 caracteres ou mais e tiver uma combinação de símbolos, maiúsculas, texto.
  • Forte - Se o comprimento for 14 caracteres ou mais e tiver uma combinação de símbolos, maiúsculas e texto.

<script language="javascript">
    function passwordChanged() {
        var strength = document.getElementById('strength');
        var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{8,}).*", "g");
        var pwd = document.getElementById("password");
        if (pwd.value.length == 0) {
            strength.innerHTML = 'Type Password';
        } else if (false == enoughRegex.test(pwd.value)) {
            strength.innerHTML = 'More Characters';
        } else if (strongRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:green">Strong!</span>';
        } else if (mediumRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:orange">Medium!</span>';
        } else {
            strength.innerHTML = '<span style="color:red">Weak!</span>';
        }
    }
</script>
<input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
<span id="strength">Type Password</span>

Endurecendo sua solicitação de senha

É essencial que você não valide apenas a construção da senha no seu Javascript. Isso permitiria que qualquer pessoa com ferramentas de desenvolvimento de navegador ignorasse o script e usasse a senha que desejasse. Você deve SEMPRE utilizar uma verificação do servidor para validar a força da senha antes de armazená-la em sua plataforma.

Douglas Karr 

Douglas Karr é o fundador da Martech Zone e reconhecido especialista em transformação digital. Doug é um Orador principal e orador público de marketing. Ele é o VP e cofundador da Highbridge, uma empresa especializada em ajudar empresas corporativas a transformar e maximizar digitalmente seus investimentos em tecnologia, utilizando as tecnologias Salesforce. Ele desenvolveu estratégias de marketing e produtos digitais para Tecnologias Dell, Vai Papai, Salesforce, Webtrendse SmartFOCUS. Douglas também é o autor de Blogs corporativos para leigos e co-autor de O melhor livro de negócios.

34 Comentários

Deixe uma resposta →

  1. 1
  2. 2

    OBRIGADA! OBRIGADA! OBRIGADA! Eu estive brincando por 2 semanas com maldito código de força de senha de outros sites e puxando meu cabelo. O seu é curto, funciona como eu quero e o melhor de tudo, fácil para um novato em javascript modificar! Eu queria capturar o veredicto de força e não deixar o formulário postar para realmente atualizar a senha do usuário, a menos que ela atendesse ao teste de força. O código de outras pessoas era muito complicado ou não funcionava direito ou outra coisa. Eu te amo! XXXXX

    Resposta
  3. 4

    graças a Deus por pessoas que podem realmente escrever um pedaço de código corretamente.
    Tinha a mesma experiência que Janis.

    Isso funciona imediatamente, o que é perfeito para pessoas como eu que não conseguem codificar javascript!

    Resposta
  4. 5
  5. 6

    Oi, em primeiro lugar muito obrigado por seus esforços, tentei usar isso com o Asp.net, mas não funcionou, estou usando

    em vez de tag, e não funcionou, alguma sugestão?!

    Resposta
  6. 7

    Para Nisreen: o código na caixa destacada não funciona com um cut'n'paste. As aspas simples estão confusas. O código do link de demonstração está bom.

    Resposta
  7. 8
  8. 9
  9. 10
  10. 11

    “P@s$w0rD” aparece forte, embora seja quebrado rapidamente com um ataque de dicionário…
    Para implantar tal recurso em uma solução profissional, acredito ser importante combinar esse algoritmo com uma verificação de dicionário.

    Resposta
  11. 12
  12. 13
  13. 14
  14. 15
  15. 16
  16. 17
  17. 18
  18. 19

    alguém pode dizer, por que não funcionou o meu ..

    copiei todo o código e colei no notepad++, mas não funcionou?
    por favor me ajude ..

    Resposta
  19. 20
  20. 21
  21. 22
  22. 23
  23. 24

    Esse tipo de “verificador de força” leva as pessoas a um caminho muito perigoso. Ele valoriza a diversidade de caracteres em relação ao comprimento da senha, levando-o a classificar senhas mais curtas e diversas como mais fortes do que senhas mais longas e menos diversas. Essa é uma falácia que colocará seus usuários em apuros se eles enfrentarem uma séria ameaça de hackers.

    Resposta
    • 25

      Não discordo, Jordan! O exemplo foi simplesmente colocado como um exemplo do script. Minha recomendação para as pessoas é utilizar uma ferramenta de gerenciamento de senhas para criar senhas independentes para qualquer site exclusivo. Obrigado!

      Resposta
  24. 26
  25. 27
  26. 28
  27. 29
  28. 31
  29. 33

    Você é um salva-vidas! Eu estava analisando strings à esquerda, à direita e ao centro, e pensei que havia uma maneira melhor e encontrei seu código usando Regex. Foi capaz de tilintar com ele para o meu site…Você não tem idéia do quanto isso ajudou. Muito obrigado Douglas!!

    Resposta

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.