Contrôler les mots de passe avec HTML PHP

Objectifs

Connaitre l’authentification par mot de passe pour les mesures de sécurité élémentaires

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 Commission Nationale de l’Informatique et des Libertés) 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.

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 ( Commission Nationale de l’Informatique et des Libertés) 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

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.

Afficher la solution

Partie HTML :

<!doctype html> <html> <head> <title>th</title> <meta charset="utf-8"> </head> <body> <form>  <input type="email" placeholder="Email" pattern=".*apcpedagogie\.com$" required="required"/> <input type="password" placeholder="Password" required="required"> <input type="submit" value="Envoyer"> </form> </body> </html>

Partie CSS :

<style type="text/css"> /* Attribuer une couleur verte aux champs correctement remplis */ input:valid { background-color: #ddffdd; } </style>

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

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.

Construction d’une expression régulière

Une expression régulière est une suite de couples classes–quantificateurs.
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

pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$"

$ : Fin de la chaîne.
(?=.*[a-z]): Cette partie utilise une « positive lookahead assertion » pour s’assurer qu’il y a au moins une lettre minuscule (a-z) dans le mot de passe.
(?=.*[A-Z]): De même, cette partie utilise une « positive lookahead assertion » pour s’assurer qu’il y a au moins une lettre majuscule (A-Z) dans le mot de passe.
(?=.*\d): Encore une fois, une « positive lookahead assertion » pour s’assurer qu’il y a au moins un chiffre (\d) dans le mot de passe.
- (?=.*\d): C’est une assertion positive qui utilise .* pour correspondre à zéro ou plusieurs caractères (n’importe quoi), suivi de \d pour correspondre à un chiffre.
- (?= ... ): utilisé pour vérifier si l’expression spécifiée à l’intérieur des parenthèses peut être trouvée à partir de la position actuelle dans la chaîne, mais sans consommer les caractères. Si la condition est vérifiée, la recherche continue à partir de la même position dans la chaîne. Sinon, la recherche échoue à cet endroit et se poursuit à la prochaine position.
- ( ... ):Les parenthèses délimitent l’expression à évaluer.
- ?=: C’est le symbole qui indique qu’il s’agit d’une « positive lookahead assertion«
.{8,}: Cette partie spécifie que le mot de passe doit être composé d’au moins 8 caractères de n’importe quel type.
$ : Fin de la chaîne.

pattern="^(?=.*[A-H])(?=.*[0-9])[A-H0-9]{8}$"

^ : Début de la chaîne.
(?=.*[A-H]) : Assertion positive pour vérifier la présence d’au moins une lettre entre A et H.
(?=.*[0-9]) : Assertion positive pour vérifier la présence d’au moins un chiffre.
[A-H0-9]{8} : Correspond à huit caractères qui peuvent être soit des lettres entre A et H, soit des chiffres.
$ : Fin de la chaîne.

{8,} : Au moins 8 répétitions.
{8} : Exactement 8 répétitions.
{,8} : Jusqu’à 8 répétitions.

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

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>

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.

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

Sommaire du cours PHP

Les méthodes de cryptage en PHP

PHP

Contrôler les mots de passe avec HTML PHP