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

O 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.

34 Comentários

  1. 1
  2. 2

    OBRIGADO! OBRIGADO! OBRIGADO! Eu estive brincando por 2 semanas com o maldito código de força da senha de outros sites e puxando meu cabelo. O seu é curto, funciona do jeito que eu quero e o melhor de tudo, fácil para um iniciante em javascript modificar! Eu queria capturar o veredicto de força e não permitir que a postagem do formulário atualizasse a senha do usuário, a menos que ela passasse pelo 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

  3. 4

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

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

  4. 5
  5. 6

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

    ao invés de tag, e não funcionou, alguma sugestão ?!

  6. 7

    Para Nisreen: o código na caixa destacada não funciona com recortar e colar. A aspa simples está confusa. O código do link de demonstração está bom.

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

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

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

    alguem pode contar, porque nao funcionou o meu ..

    Copiei todo o código e colei no notepad ++, mas não funciona de jeito nenhum?
    por favor me ajude ..

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

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

    • 25

      Eu não discordo, Jordan! O exemplo foi simplesmente apresentado como exemplo do script. Minha recomendação para as pessoas é utilizar uma ferramenta de gerenciamento de senha para criar frases-senha independentes para qualquer site que seja exclusivo dele. Obrigado!

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

    Você é um protetor de vida! Eu estava analisando strings esquerda direita e centro e pensei que existe uma maneira melhor e encontrei seu trecho de código usando Regex. Consegui mexer nele para o meu site ... Você não tem ideia do quanto isso ajudou. Muito obrigado Douglas !!

O que você acha?

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