Contrôler les mots de passe avec HTML PHP

Contrôler les mots de passe avec HTML PHP

  1. Objectifs

    • Connaitre l’authentification par mot de passe pour les mesures de sécurité élémentaires
  2. Présentation

    • Il n’y a qu’une règle que vous devez absolument retenir concernant les formulaires HTML : il ne faut jamais faire confiance aux données envoyées par les utilisateurs.

    • Un point fondamental de la sécurité informatique n’est autre que les mots de passe. Bien que nous l’ayons protégé, il est possible qu’il sont tout simplement faibles…
    • Le mot de passe reste le moyen d’authentification le plus répandu. Alors que les compromissions de bases entières de mots de passe se multiplient, la Commission Nationale de l’Informatique et des Libertés (CNIL) a adopté une nouvelle recommandation sur les mots de passe. Elle fixe les mesures minimales à mettre en œuvre.
    • Il n’existe pas de définition universelle d’un bon mot de passe, mais sa complexité et sa longueur permettent de diminuer le risque de réussite d’une attaque informatique qui consisterait à tester successivement de nombreux mots de passe (attaque dite en force brute). On considère que la longueur du mot de passe suffit pour résister aux attaques courantes à partir de 12 caractères. Lorsque la taille du mot de passe diminue, des mesures compensatoires doivent être prévues.



  3. Les risques liés à la gestion des mots de passe

    • Les risques liés à la gestion des mots de passe sont multiples et reposent notamment sur :
      • la simplicité du mot de passe ;
      • l’écoute sur le réseau afin de collecter les mots de passe transmis ;
      • la conservation en clair du mot de passe ;
      • la faiblesse des modalités de renouvellement du mot de passe en cas d’oubli (cas des questions « secrètes »). ​
    • La figure suivante reportorie les principaux risques identifiés au cours du cycle de vie d’un mot de passe
    • Contrôler les mots de passe avec HTML PHP

    • source:https://www.cnil.fr/fr/mot-de-passe
    • Le tableau ci-dessous fait état des 4 cas d’authentification par mot de passe identifiés par la CNIL dans sa recommandation
    •   Exemple d’utilisation Longueur minimum Composition du mot de passe Mesures complémentaires
      Mot de passe seul Forum, blog 12
      • majuscules
      • minuscules
      • chiffres
      • caractères spéciaux

      Conseiller l’utilisateur sur un bon mot de passe

      Avec restriction d’accès
      (le plus répandu)
      Sites de e-commerce, compte d’entreprise, webmail 8

      Au moins 3 des 4 types suivants :

      • majuscules
      • minuscules
      • chiffres
      • caractères spéciaux

      Blocage des tentatives multiples :
      (exemples)

      • Temporisation d’accès au compte après plusieurs échecs
      • « Captcha »
      • Verrouillage du compte après 10 échecs
      Avec information
      complémentaire
      Banque en ligne 5

      Chiffres et/ou lettres

      Blocage des tentatives multiples

      +

      • Information complémentaire communiquée en propre d’une taille d’au moins 7 caractères (ex. : identifiant dédié au service)

      ou

      • Identification du terminal de l’usager (ex. : adresse IP, adresse MAC…) 
      Avec matériel détenu
      par la personne
      Carte bancaire ou téléphone 4

      Chiffres

      Matériel détenu en propre par la personne (ex. : carte SIM, carte bancaire, certificat)

      +

      Blocage au bout de 3 tentatives échouées

    • source:https://www.cnil.fr/fr/mot-de-passe
  4. Les patterns et la validation à la volée

    • Généralement les champs requis non complétés ou ne respectant pas une certaine règle de syntaxe définie par le type du formulaire, ou par l’attribut pattern bloquent le processus d’envoi des données d’un formulaire.
    • Cette validation à la volée permet à l’utilisateur d’être informé très rapidement de ses erreurs et de les corriger étape par étape grâce aux indications fournies par les infobulles situées sous chacun des champs invalides.
    • L’attribut pattern spécifie une expression régulière définissant la règle avec laquelle valider la valeur de l’élément <input> .
    • L’attribut de pattern fonctionne avec les élément input de types suivants : text, password, search, URL, e-mail ou tel.
    • Application
      • Créer le formulaire ci-dessous en utilisant des inputs et les attributs html5 qui permettent d’effectuer les vérifications suivantes:
      • Les champs sont obligatoires
      • L’email doit se terminer par “apcpedagogie.com”
      • Attribuer en css une couleur de fond verte aux champs correctement remplis.
      • Contrôler les mots de passe avec HTML PHP

        Afficher la solution

        Partie HTML :

         
        <!doctype html&lgt;
        <html&lgt;
        <head&lgt;
        	<title&lgt;th</title&lgt;
        	<meta charset="utf-8"&lgt;
        </head&lgt;
        <body&lgt;
        	<form&lgt;
        			<!-- Input de type emeil mais en plus se termine par exelib.net --&lgt; 
        		<input type="email" placeholder="Email" pattern=".*apcpedagogie\.com$" required="required"/&lgt;
        		<input type="password" placeholder="Password" required="required"&lgt;
        		<input type="submit" value="Envoyer"&lgt;
        	</form&lgt;
        	
        </body&lgt;
        </html&lgt;
        

        Partie CSS :

         
        	<style type="text/css"&lgt;
           /* Attribuer une couleur verte aux champs correctement remplis */
        	input:valid {
          	background-color: #ddffdd;
        	} 
        	</style&lgt;
        
    • L’attribut pattern, lorsqu’il est spécifié, est une expression régulière à laquelle les entrées value doivent correspondre pour que la valeur passe la validation des contraintes .
    • Permet de préciser une expression régulière. La valeur du champ devra respecter la contrainte de la regex pour être valide
    • L’utilisation de types d’entrée standard avec l’attribut pattern donnera à vos formulaires une couche supplémentaire de validation, mais sachez que vous devez également effectuer une sorte de validation côté serveur.
    • Attention les contrôles de saisie par le navigateur (côté client) ne dispensent pas de contrôles côté serveur (en PHP).
    • En effet le JS peut être désactivé sur le navigateur. Avec certains outils un internaute chevronné peut modifier le code du formulaire (supprimer par exemple les attributs de contrôle).
  5. Application (suite)
    • Sous Chrome appuyez sur F12 ; sélectionnez “éléments” ; sélectionnez une balise INPUT ; faites un clic droit ; sélectionnez “Edit as HTML”.
    • Vous pouvez donc dans l’exemple supprimer les attributs “required” et “pattern” des deux INPUT puis saisir n’importe quoi dans les champs.
  6. Construction d’une expression régulière

    • Une expression régulière est une suite de couples classesquantificateurs.
    • Les classes
      • Quelques exemples de classes sous forme de liste :
        • [@] : seul l’arobase est autorisé
        • [.-_] : seuls le point, le tiret et le souligné sont autorisés
        • [éèê] : seuls les e accentués sont autorisés
      • Quelques exemples de classes sous forme d’intervalle :
        • [a-z] : seules les lettres minuscules (de a à z) sont autorisées
        • [A-z] : seules les lettres (minuscules et majuscules) sont autorisées
        • [0-9] : seuls les chiffres sont autorisés
      • Exemples plus complexes :
        • [A-z0-9] : deux intervalles ; les lettres et les chiffres sont autorisés
        • [a-zéèê] : un intervalle suivi d’une liste ; les lettres minuscules y compris les e accentués sont autorisés
    • Les quantificateurs
      • Un quantificateur suit une classe et indique le nombre de caractères autorisés à saisir.
      • Un quantificateur est entre accolades.
      • Exemples de quantificateurs :
        • {2} : saisir deux caractères autorisés
        • {3,8} : saisir entre 3 et 8 caractères autorisés
        • {3,} : saisir entre 3 et infini caractères autorisés
      • On peut exprimer plus simplement le quantificateur sous forme d’un symbole suivant la classe :
        • * : caractère précédent de 0 à plusieurs fois (qui définit un groupe qui existe zéro ou plusieurs fois)
        • + : caractère précédent de 1 à plusieurs fois (qui définit un groupe qui existe une ou plusieurs fois)
        • ? : caractère précédent de 0 à 1 fois (qui définit un groupe qui existe zéro ou une fois)
    • Exemples
      • <input type=”password” pattern=”[A-F][0-9]{5}”>
      • Ce champ attend une valeur numérique d’au moins 5 chiffres précédés d’une lettre majuscule comprise entre A et F.
      • <input type=”password” id=”pwd” name=”txtpwd” required size=”45″
        pattern=”[a-z]{4,8}” title=”4 à 8 Lettres minuscules”>
      • Ce champ attend de 4 à 8 lettres minuscules de a à z.
      • <input id=”mot_de_passe” name=”mot_de_passe” type=”password” title=”Au moins 8 caractères, un chiffre, une lettre majuscule et une minuscule” required
        pattern=”(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])
        (?=.*[a-z]).*” />
      • Ce champ attend au moins 8 caractères, un chiffre, une lettre majuscule et une minuscule.
  7. Vérifier le mot de passe

    • Essayez ce code pour vérifier le mot de passe pour la zone de texte
    • <!DOCTYPE html>
      <head>
      
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script type="text/javascript"> 
      $(document).ready(function() 
      { 
      $('#pwd').keyup(function() 
      { 
      $('#affichageMessage').html(checkStrength($('#pwd').val())) 
      }) 
      function checkStrength(password) 
      { 
      var strength = 0 
      if (password.length < 6) { 
      $('#affichageMessage').removeClass() 
      $('#affichageMessage').addClass('short') 
      return "<font color='red' size='3'>Trop court</font>" 
      } 
      
      if (password.length > 7) strength += 1 
      if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1 
      if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1 
      if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 
      if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 
      if (strength < 2) 
      { 
      $('#affichageMessage').removeClass() 
      $('#affichageMessage').addClass('weak') 
      return "<font color='red' size='3'>Faible</font>" 
      } 
      else if (strength == 2) 
      { 
      $('#affichageMessage').removeClass() 
      $('#affichageMessage').addClass('good') 
      return "<font color='orange' size='3'>Bien</font>" 
      } 
      else 
      { 
      $('#affichageMessage').removeClass() 
      $('#affichageMessage').addClass('strong') 
      return "<font color='green' size='3'>Fort</font>" 
      } 
      } 
      }); 
      </script> 
      </head>
      <body>
      
      <div>
      	<center><form id="fiabiliteMotdePasse"> 
      		<label>Mot de passe : </label> 
      		<input name="pwd" id="pwd" type="password"/> 
      		<span id="affichageMessage"></span> 
      		</form><br/> 
      </div>
      </body>
      
      </html>
      
  8. La période de validité d’un mot de passe

    • On pourrait également choisir de fixer à l’avance une durée de validité pour notre mot de passe. Veillez cependant à ne pas mettre une plage trop courte, vous risqueriez d’échauffer vos utilisateurs.
    • Changer de mot de passe est très contraignant, ne serait-ce que pour des raisons de mémorisation. Demander un changement plus régulier qu’une fois tous les 6 mois semble très ambitieux. Une fois de plus, tout dépend de l’objectif de votre site.
  9. Applications

    • App01
      • Reprendre l’application précédente et ajouter la contrainte suivante:
        • Le password doit contenir entre 7 et 10 caractères dont au moins un est impérativement un chiffre exemple (passw12,5password…).
        Afficher la solution
         
        		<input type="password" placeholder="Password" maxlength="10" pattern="(?=.*\d)(?=.*[a-z])\w{7,10}" required="required">
        
        
    • App02
      • le cadre de l’exercice sera de tester la bonne constitution d’un mot de passe sécurisé.
        • Un mot de passe valide aura :
          • de 8 à 15 caractères
          • au moins une lettre minuscule
          • au moins une lettre majuscule
          • au moins un chiffre
          • au moins un de ces caractères spéciaux: $ @ % * + - _ !
          • aucun autre caractère possible: pas de & ni de { par exemple)
        Afficher la solution
          Coté HTML

            ^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[-+!*$@%_])([-+!*$@%_\w]{8,15})$


          Coté PHP

            <?php
            
                $password = $_POST['password'];
             
                if (preg_match('#^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*\W)#', $password)) {
                    echo 'Mot de passe conforme';
            	}
            	
                else {
                    echo 'Mot de passe non conforme';
            	}	
            ?>
        • La fonction preg_match() permet de rechercher une ou plusieurs occurrences d’un caractère. On l’utilise ici pour tester la présence de nos différentes familles dans la chaîne $password.
          • Le symbole # délimite le regex.
          • Le symbole^ placé au début indique tout simplement le début de la chaine.
          • (?=.*[a-z]) permet de tester la présence de minuscules.
          • (?=.*[A-Z]) permet de tester la présence de majuscules.
          • (?=.*[0-9]) permet de tester la présence de chiffres.
          • (?=.*\W) permet de tester la présence de caractères spéciaux (\W indique ce qui ne correspond pas à un mot).
          • Le caractère $  indique la fin de la chaîne.
          • Le chiffre {8,15} définit la longueur minimale et maximale de caractères que la chaîne doit admettre pour être validée. On vérifie donc ici que la chaîne se termine sur au moins 8 caractères.
        • Que donne les expressions régulières suivantes :
          • #^[A-Za-z -]*$# : Vérifie qu’une chaîne est composée des caractères de a à z, de – et (d’espace).
          • #^[0-9]{1,2}/[0-9]{1,2}/[0-9]{1,4}$# :Vérifie qu’une chaine est au format xx/xx/xxxx où x est un nombre.
          • #^TN[0-9]{2}( ?[0-9]{3}){3}$# :
    • App03
      • Quelqu’un dit, je dois vérifier le format d’un mot de passe lorsqu’un utilisateur s’inscrit sur un site et crée son mot de passe. Le mot de passe doit contenir au moins une majuscule, une minuscule, un chiffre, et 8 caractères. Comment faire pour vérifier le format du mot de passe, selon ces critères, en PHP ?
      • Afficher la solution
          <?php
          function check_mdp_format($mdp)
          {
          	$majuscule = preg_match('@[A-Z]@', $mdp);
          	$minuscule = preg_match('@[a-z]@', $mdp);
          	$chiffre = preg_match('@[0-9]@', $mdp);
          	
          	if(!$majuscule || !$minuscule || !$chiffre || strlen($mdp) < 8)
          	{
          		return false;
          	}
          	else 
          		return true;
          }
          
          if (check_mdp_format("1Formatik") != true)
          {
          	echo "Format non correct";	
          }
          else 
          	echo "Format correct";
          ?&lgt;
          
          
    • App04



Abonnez vous à notre chaîne YouTube gratuitement