Implémenter un indicateur de complexité de mot de passe

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Create Password Strength Indicator With jQuery.

La sécurité est en train de devenir le plus gros problème de la majorité des sites Web et c'est pourquoi il est très important de sécuriser nos sites le plus possible. Mais malgré toute la bonne volonté du développeur, la plupart des problèmes de sécurité proviennent de compte utilisateur mal protégé : c'est-à-dire un mot de passe trop faible.

Si vous développez un système dans lequel l'utilisateur devra choisir son mot de passe, ajouter un indicateur de complexité sur le mot de passe choisi est toujours une bonne idée.

C'est ce que nous allons apprendre aujourd'hui : implémenter un indicateur de complexité de mot de passe.

En premier lieu nous allons créer un simple formulaire HTML qui permettra de saisir un nouveau mot de passe. Ce formulaire comportera deux boites de texte : une pour saisir le mot de passe et la seconde pour la confirmation (cas classique du Web). La boite de confirmation permet de s'assurer que l'utilisateur ne s'est pas trompé en écrivant son mot de passe. On sous-estime le nombre de personnes se trompant de mot de passe parce qu'à la création ils avaient mal écrit une lettre.

<form action="" method="post">
          <p><label for="passwordInput">Password: <input type="password" id="passwordInput" name="passwordInput"></label></p>
     <p><label for="confirmPasswordInput">Confirm Password: <input type="password" id="confirmPasswordInput" name="confirmPasswordInput"></label></p>
        <p><div class="" id="passwordStrength"></div></p>
       <p><input type="submit" value="Change Password" class="btn"></p>
</form>

Vous pouvez voir que l'on a intercalé une div entre les boites de texte et le bouton de soumission du formulaire. C'est dans cette div que l'on va afficher nos messages concernant la mauvaise ou la bonne complexité du mot de passe.

Nous allons maintenant créer notre indicateur qui va mesurer la complexité du mot de passe saisi.

Il y a plusieurs choses à vérifier lorsque l'on veut juger de la complexité d'un mot de passe :

• on vérifie que le mot de passe et sa confirmation sont identiques ;
• on vérifie que le mot de passe fait au minimum six caractères ;
• si le mot de passe fait au moins six caractères, mais qu'il ne contient ni chiffre ni majuscule alors, c'est un mot de passe faible ;
• si le mot de passe fait au moins six caractères et qu'il contient des chiffres et/ou des majuscules alors, c'est un mot de passe moyen ;
• si le mot de passe fait au moins six caractères et qu'il contient des chiffres, des majuscules et au moins un caractère spécial alors, c'est un mot de passe fort.

Nous devons créer une expression régulière qui va vérifier tous ces prédicats et afficher le message correspondant.

Nous allons commencer par vérifier que le mot de passe et sa confirmation sont bien les mêmes. Si ce n'est pas le cas, cela signifie que l'utilisateur a fait une faute de frappe et dans ce cas nul besoin d'effectuer les tests de complexité.

Une fois que les deux mots de passe correspondent, nous pouvons tester la complexité du mot de passe en utilisant les expressions régulières suivantes.

IV-A. Mot de passe fort▲

// Doit contenir des majuscules, des chiffres et des minuscules
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

IV-B. Mot de passe moyen▲

// Doit contenir soit des majuscules et des minuscules soit des minuscules et des chiffres
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

IV-C. Mot de passe faible▲

// Doit faire au minimum six caractères
var okRegex = new RegExp("(?=.{6,}).*", "g");

IV-D. Vérification des conditions▲

 $(document).ready(function() {
    $('#passwordInput, #confirmPasswordInput').on('keyup', function(e) {
 
     if($('#passwordInput').val() != '' && $('#confirmPasswordInput').val() != '' && $('#passwordInput').val() != $('#confirmPasswordInput').val())
            {
               $('#passwordStrength').removeClass().addClass('alert alert-error').html('Passwords do not match!');
 
            return false;
           }
 
        // Must have capital letter, numbers and lowercase letters
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
 
        // Must have either capitals and lowercase letters or lowercase and numbers
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
 
        // Must be at least 6 characters long
        var okRegex = new RegExp("(?=.{6,}).*", "g");
 
        if (okRegex.test($(this).val()) === false) {
            // If ok regex doesn't match the password
               $('#passwordStrength').removeClass().addClass('alert alert-error').html('Password must be 6 characters long.');
 
        } else if (strongRegex.test($(this).val())) {
            // If reg ex matches strong password
            $('#passwordStrength').removeClass().addClass('alert alert-success').html('Good Password!');
        } else if (mediumRegex.test($(this).val())) {
            // If medium password matches the reg ex
            $('#passwordStrength').removeClass().addClass('alert alert-info').html('Make your password stronger with more capital letters, more numbers and special characters!');
        } else {
            // If password is ok
            $('#passwordStrength').removeClass().addClass('alert alert-error').html('Weak Password, try using numbers and capital letters.');
        }
 
        return true;
    });

Dans cet article nous avons vu comment implémenter un indicateur de complexité de mot de passe selon différents critères. Vous pouvez maintenant personnaliser vos expressions régulières afin de créer votre propre indicateur de complexité basé sur d'autres conditions.

Vous pouvez consulter la démonstration afin d'avoir un aperçu du rendu dans un navigateur.

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.