Brave publisher PUBLISHER
Développeur web Front-End dans l'Oise - Gary Deshayes

JavaScript, jQuery et Regex | Sécuriser un mot de passe en temps réel avec JS

Développeur web Front-End dans l'Oise - Gary Deshayes <--Translation

Crée le : lundi 23 mars 2020

Voici comment sécuriser un mot de passe en front avec JavaScript couplé à jQuery et les expressions régulières (Regex) :

Vous souhaitez vérifier en front que l'utilisateur a bien saisi 8 caractères, un chiffre et ou une majuscule ? Je vais vous guider sur la procédure à suivre.

Il faut pour suivre cette procédure avoir jQuery d'installé, ce n'est pas obligatoire, mais l'utilisant, vous n'aurez pas le même code que moi en javascript natif.

Dans mon cas, j'utilise la librairie CSS Bulma pour faire de l'intégration.

Aperçu du mot de passe une fois sécurisé avec les expressions régulières (Regex) :

La barre de progression n'est pas prise en compte dans le tutoriel mais il suffit simplement de lui attribuer un pourcentage de réussite sur 100%.

secure password with javascript and jquery with regex

Création du champ de saisie de mot de passe :

Simple champ de saisie de type password, il faut lui ajouter un id pour le récupérer facilement en javascript.

<input type="password" id="mot_de_passe" name="motdepasse">

Création de la liste pour les expressions requises dans le mot de passe :

Une liste avec autant de li que vous souhaitez vérifier avec chacun un id pour les retrouver.

<ul>
	<li id="taille-mdp"></li>
	<li id="min-mdp"></li>
	<li id="maj-mdp"></li>
	<li id="chiffre-mdp"></li>
</ul>

Vérification lors de la saisie du mot de passe :

Voici le code nécessaire pour vérifier le mot de passe, je vais tout détailler.

A chaque fois que la touche est "levée" sur l'input du mot de passe nous faisons la vérification.

$("#mot_de_passe").on("keyup", function () {
    //Si la valeur n'est pas vide
    if ($(this).val() != "") {
        let taille = $("#taille-mdp");
        taille.children().remove();
        taille.text("");
        let min = $("#min-mdp");
        min.children().remove();
        min.text("");
        let maj = $("#maj-mdp");
        maj.children().remove();
        maj.text("");
        let digit = $("#chiffre-mdp");
        digit.children().remove();
        digit.text("");
        //Vérifie qu'il y a au moins 8 caractères
        if (/^(.{8,})/.test($(this).val())) {
            taille.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 8 caractères. (' + $(this).val().length + '/8)');
        } else {
            taille.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 8 caractères. (' + $(this).val().length + '/8)');
        }
        //Vérification du chiffre
        if (/^(?=.*\d)/.test($(this).val())) {
            digit.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 chiffre.');
        } else {
            digit.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 chiffre.');
        }
        //Vérification de la minuscule
        if (/^(?=.*[a-z])/.test($(this).val())) {
            min.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 caractère en minuscule.');
        } else {
            min.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 caractère en minuscule.');
        }
        //Vérification de la majuscule
        if (/^(?=.*[A-Z])/.test($(this).val())) {
            maj.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 caractère en majuscule.');
        } else {
            maj.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 caractère en majuscule.');
        }
    } 
});

Vérification de la taille du mot de passe :

Nous vérifions grâce à l'expression régulière /^(.{8,})/ que le mot de passe fait au minimum 8 caractères. Détails de la méthode test sur un pattern

Si nous voulions au maximum 20 caractères nous aurions du mettre ce pattern : /^(.{,20})/.

L'ajout des balise "i" permet d'ajouter des logos pour indiquer si c'est valide ou non.

if (/^(.{8,})/.test($(this).val())) {
     taille.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 8 caractères. (' + $(this).val().length + '/8)');
} else {
     taille.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 8 caractères. (' + $(this).val().length + '/8)');
}

Vérification de la présence d'un chiffre dans le mot de passe :

Le pattern /^(?=.*\d)/ permet de vérifier qu'il y a bien un chiffre.

if (/^(?=.*\d)/.test($(this).val())) {
   digit.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 chiffre.');
} else {
   digit.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 chiffre.');
}

Vérification des minuscules et majuscules :

Le pattern /^(?=.*[a-z])/ vérifie qu'il y a bien une lettre minuscule et vous l'aurez deviné le pattern /^(?=.*[A-Z])/ vérifie les majuscules.

if (/^(?=.*[a-z])/.test($(this).val())) {
   min.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 caractère en minuscule.');
} else {
   min.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 caractère en minuscule.');
}

if (/^(?=.*[A-Z])/.test($(this).val())) {
   maj.append('<i class="fas fa-check-circle is-font-primary"></i> Au moins 1 caractère en majuscule.');
} else {
   maj.append('<i class="fas fa-times-circle is-font-danger"></i> Au moins 1 caractère en majuscule.');
}

Conclusion :

Vous avez désormais une indication de saisie pour votre utilisateur, il reste maintenant à bloquer la soumission du formulaire lorsque celui-ci a mal rempli son mot de passe.

Les expressions régulières sont assez puissantes, voici un lien pour les tester : Apprendre et tester les expressions régulières

Articles récents :

Symfony 5 | Retourner une image via une route d'un controller

Symfony

Crée le : mercredi 1 septembre 2021

VueJS 3, ExpressJS 4.17 | Upload et redimensionnement d'une image

Javascript Framework JS

Crée le : samedi 28 novembre 2020

Symfony Event Subscriber | Restriction d'une plage ip avec un Event Subscriber

Symfony

Crée le : samedi 14 novembre 2020

Angular, ExpressJS | Authentification JWT avec Angular 10 et ExpressJS 4 (MySQL)

Javascript SQL Framework JS

Crée le : dimanche 20 septembre 2020

Symfony, Excel, CSV | Générer un fichier CSV pour Excel avec Symfony

Symfony

Crée le : jeudi 6 août 2020

Symfony FormType ChoiceType | Radio button valeur par défaut dans un FormType

Symfony

Crée le : dimanche 26 juillet 2020

Doctrine, Symfony | Différence entre deux dates sous MySQL (Jour, mois, années...)

Symfony SQL

Crée le : jeudi 18 juin 2020

JavaScript, jQuery et Regex | Sécuriser un mot de passe en temps réel avec JS

Javascript jQuery

Crée le : lundi 23 mars 2020

Symfony, Doctrine | Récupérer les anciennes données d'un formulaire FormType

Symfony

Crée le : vendredi 14 février 2020

jQuery, Webpack et Symfony | Appeler jQuery dans vos fichiers twig

Symfony Bugs

Crée le : dimanche 26 janvier 2020