Comproveu la força de la contrasenya amb JavaScript i expressions regulars

Comproveu la força de la contrasenya amb JavaScript i expressions regulars

Estava fent algunes investigacions sobre com trobar un bon exemple d’un comprovador de força de contrasenya que utilitzi JavaScript Expressions regulars (Regex). A l’aplicació del meu treball, tornem a publicar per verificar la força de la contrasenya i és força incòmode per als nostres usuaris.

Què és Regex?

Una expressió regular és una seqüència de caràcters que defineixen un patró de cerca. Normalment, aquests patrons s’utilitzen en algorismes de cerca de cadenes trobar or cercar i substituir operacions en cadenes o per a la validació d’entrada. 

Definitivament, aquest article no us ensenya expressions regulars. Només heu de saber que la possibilitat d'utilitzar expressions regulars simplificarà absolutament el vostre desenvolupament a mesura que cerqueu patrons de text. També és important tenir en compte que la majoria dels llenguatges de desenvolupament han optimitzat l’ús d’expressions regulars ... de manera que en lloc d’analitzar i cercar cadenes pas a pas, Regex sol ser molt més ràpid tant al costat del servidor com del client.

Vaig buscar al web bastant abans de trobar-lo un exemple d’algunes expressions regulars fantàstiques que busquen una combinació de longitud, caràcters i símbols. Tanmateix, el codi era una mica excessiu per al meu gust i adaptat per a .NET. Així que vaig simplificar el codi i el vaig posar a JavaScript. Això fa que validi la intensitat de la contrasenya en temps real al navegador del client abans de tornar-la a publicar ... i proporciona alguns comentaris a l'usuari sobre la força de la contrasenya.

Escriviu una contrasenya

Amb cada cop del teclat, la contrasenya es prova amb l'expressió regular i, a continuació, es proporciona informació a l'usuari en un interval inferior.




Escriviu la contrasenya

Aquí teniu el Codi

L' Expressions regulars fes una feina fantàstica de minimitzar la longitud del codi:

  • Més personatges - Si la longitud és inferior a 8 caràcters.
  • Feble - Si la longitud és inferior a 10 caràcters i no conté una combinació de símbols, majúscules, text.
  • mitjà - Si la longitud és de deu caràcters o més i té una combinació de símbols, majúscules, text.
  • Fort - Si la longitud és de 14 caràcters o més i té una combinació de símbols, majúscules i text.

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

Enduriment de la sol·licitud de contrasenya

És essencial que no només valideu la construcció de contrasenyes al vostre Javascript. Això permetria a tothom que tingui eines de desenvolupament del navegador passar per alt l'script i utilitzar qualsevol contrasenya que vulgui. SEMPRE heu d’utilitzar una comprovació del servidor per validar la força de la contrasenya abans d’emmagatzemar-la a la vostra plataforma.

34 Comentaris

  1. 1
  2. 2

    THANK YOU! THANK YOU! THANK YOU! I’ve been fooling around for 2 weeks with damn password strength code from other websites and pulling my hair out. Yours is short, works just like I want and best of all, easy for a javascript novice to modify! I wanted to capture the strength verdict and not let the form post to actually update the user’s password unless it met the strength test. Other people’s code was too complicated or didn’t work right or something else. I love you! XXXXX

  3. 4

    thank god for people who can actually write a piece of code properly.
    Had same experience as Janis.

    This works right out of the box which is perfect for people like me who cant code javascript!

  4. 5
  5. 6
  6. 7
  7. 8
  8. 9
  9. 10
  10. 11

    “P@s$w0rD” shows at strong, although it would be cracked fairly quickly with a dictionnary attack…
    To deploy such a feature on a professionnal solution, I believe it is important to combine this algorithm with a dictionnary check.

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

    can somebody tell, why it did not work mine..

    i copied all the code, and paste it to notepad++ , but it does not work at all ?
    please help me..

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

    This type of “strength checker” leads people down a very dangerous path. It values character diversity over passphrase length, leading it to rate shorter, more diverse passwords as stronger than longer, less diverse passwords. That is a fallacy that will get your users into trouble if they ever face a serious hacking threat.

    • 25

      I don’t disagree, Jordan! The example was simply put out as an example of the script. My recommendation for people is to utilize a password management tool to create independent passphrases for any site that are unique to it. Thanks!

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

    You are a live saver! I was parsing strings left right and centre and thought there is a better way and found your piece of code using Regex. Was able to tinkle with it for my site…You have no idea how much this helped. Thanks so much Douglas!!

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.