Vérifier la force du mot de passe avec JavaScript et les expressions régulières

Vérifier la force du mot de passe avec JavaScript et les expressions régulières
Temps de lecture: 2 minutes

Je faisais des recherches pour trouver un bon exemple de vérificateur de force de mot de passe qui utilise JavaScript et Expressions régulières (Regex). Dans l'application à mon travail, nous faisons un post pour vérifier la force du mot de passe et c'est assez gênant pour nos utilisateurs.

Qu'est-ce que Regex?

Une expression régulière est une séquence de caractères qui définissent un modèle de recherche. Habituellement, ces modèles sont utilisés par des algorithmes de recherche de chaînes pour trouver or trouver et remplacer opérations sur les chaînes, ou pour la validation d'entrée. 

Cet article ne vise certainement pas à vous apprendre les expressions régulières. Sachez simplement que la possibilité d'utiliser des expressions régulières simplifiera absolument votre développement lorsque vous recherchez des modèles dans le texte. Il est également important de noter que la plupart des langages de développement ont optimisé l'utilisation des expressions régulières ... donc plutôt que d'analyser et de rechercher des chaînes étape par étape, Regex est généralement beaucoup plus rapide côté serveur et côté client.

J'ai cherché sur le Web un peu avant de trouver un exemple de quelques excellentes expressions régulières qui recherchent une combinaison de longueur, de caractères et de symboles. Cependant, le code était un peu excessif à mon goût et adapté pour .NET. J'ai donc simplifié le code et l'ai mis en JavaScript. Cela permet de valider la force du mot de passe en temps réel sur le navigateur du client avant de le renvoyer… et fournit des commentaires à l'utilisateur sur la force du mot de passe.

Tapez un mot de passe

À chaque coup de clavier, le mot de passe est testé par rapport à l'expression régulière, puis une rétroaction est fournie à l'utilisateur dans une plage en dessous.




Tapez votre mot de passe

Voici le code

Le Expressions régulières faites un travail fantastique en minimisant la longueur du code:

  • Plus de personnages - Si la longueur est inférieure à 8 caractères.
  • Faible - Si la longueur est inférieure à 10 caractères et ne contient pas de combinaison de symboles, majuscules, texte.
  • Moyen - Si la longueur est de 10 caractères ou plus et a une combinaison de symboles, majuscules, texte.
  • Fort - Si la longueur est de 14 caractères ou plus et comporte une combinaison de symboles, de majuscules et de texte.

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

Renforcer votre demande de mot de passe

Il est essentiel de ne pas simplement valider la construction du mot de passe dans votre Javascript. Cela permettrait à toute personne disposant d'outils de développement de navigateur de contourner le script et d'utiliser le mot de passe de son choix. Vous devez TOUJOURS utiliser une vérification côté serveur pour valider la force du mot de passe avant de le stocker sur votre plateforme.

32 Commentaires

  1. 1
  2. 2

    MERCI! MERCI! MERCI! Cela fait 2 semaines que je joue avec un putain de code de force de mot de passe provenant d'autres sites Web et je m'arrache les cheveux. Le vôtre est court, fonctionne comme je le souhaite et, mieux encore, facile à modifier pour un novice en javascript! Je voulais capturer le verdict de force et ne pas laisser le formulaire publier pour mettre à jour le mot de passe de l'utilisateur à moins qu'il ne satisfasse au test de résistance. Le code des autres était trop compliqué ou ne fonctionnait pas correctement ou autre chose. Je t'aime! XXXXX

  3. 4

    merci dieu pour les gens qui peuvent réellement écrire un morceau de code correctement.
    J'ai eu la même expérience que Janis.

    Cela fonctionne dès la sortie de la boîte, ce qui est parfait pour les gens comme moi qui ne peuvent pas coder en javascript!

  4. 5
  5. 6

    Salut, tout d'abord merci beaucoup pour vos efforts, j'ai essayé de l'utiliser avec Asp.net mais cela n'a pas fonctionné, j'utilise

    au lieu de tag, et cela n'a pas fonctionné, des suggestions?!

  6. 7

    Vers Nisreen: le code dans la case en surbrillance ne fonctionne pas avec un cut'n'paste. Le guillemet simple est foiré. Le code du lien de démonstration est bien cependant.

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

    «P @ s $ w0rD» montre à fort, même s'il serait craqué assez rapidement avec une attaque de dictionnaire…
    Pour déployer une telle fonctionnalité sur une solution professionnelle, je pense qu'il est important de combiner cet algorithme avec une vérification de dictionnaire.

  11. 12
  12. 13

    Merci pour ce petit code, je peux maintenant l'utiliser pour tester la force de mon mot de passe lorsque mes visiteurs entrent leurs mots de passe,

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

    quelqu'un peut-il dire, pourquoi cela n'a pas fonctionné le mien ..

    J'ai copié tout le code et le coller dans notepad ++, mais cela ne fonctionne pas du tout?
    s'il vous plait, aidez moi..

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

    Ce type de «vérificateur de force» conduit les gens sur une voie très dangereuse. Il valorise la diversité des caractères sur la longueur de la phrase de passe, ce qui l'amène à évaluer les mots de passe plus courts et plus divers comme plus forts que les mots de passe plus longs et moins divers. C'est une erreur qui causera des ennuis à vos utilisateurs s'ils sont confrontés à une menace de piratage grave.

    • 25

      Je ne suis pas en désaccord, Jordan! L'exemple a simplement été présenté comme un exemple du script. Ma recommandation aux gens est d'utiliser un outil de gestion des mots de passe pour créer des mots de passe indépendants pour tout site qui lui est propre. Merci!

  24. 26
  25. 27
  26. 28

    J'apprécie vraiment que vous ayez été recherché autant de fois, mais enfin j'ai reçu votre message et je suis vraiment étonné. JE VOUS REMERCIE

  27. 29
  28. 31

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..