Afficher le niveau de sécurité d'un mot de passe

**bouazza92** · 30/04/2006, 11h14

Salut tous et toutes ,

Bon voilà , j'ai crée un formulaire d'inscription à mon service Open art factory ( http://bouazza.chezdavid.ath.cx/inscription.html ), en php biensûr ( y a de l'url rewriting ) mais je voudrais bien un petit truc qui permet de dire le niveau de sécurité du mot de passe tapé , comme sur les formulaires d'inscription GMAIL , Google , Passport .NET .
Pourriez vous m'aider à faire ce truc s'il vous plait ? Biensûr je ne demande pas de le faire au style de mon formulaire , faites moi seulement un petit exemple basique et c'est moi qui va l'adapter .

Merci beaucoup d'avance pour toute réponse .

**bouazza92** · 30/04/2006, 15h36

Salut , peut quelqu'un m'aider ? ou avez vous besoin de précisions ? si oui alors demandez...

Merci d'avance .

**FremyCompany** · 30/04/2006, 15h45

Trois choses sont à prendre en compte :
- la taille (champ.value.length) : Plus celle ci est grande, mieux c'est
- l'utilisation de chiffre : Plus il y en a, mieux c'est
- l'utilisation de caractère spéciaux. : Plus il y en a, mieux c'est

Pour les deux derniers, je te conseilles d'utiliser les RegExp.
Il y a de très bon tutoriels sur developpez.com et tu trouveras aisément cela sur Google.

**bouazza92** · 30/04/2006, 16h40

Envoyé par FremyCompany

Trois choses sont à prendre en compte :
- la taille (champ.value.length) : Plus celle ci est grande, mieux c'est
- l'utilisation de chiffre : Plus il y en a, mieux c'est
- l'utilisation de caractère spéciaux. : Plus il y en a, mieux c'est

Pour les deux derniers, je te conseilles d'utiliser les RegExp.
Il y a de très bon tutoriels sur developpez.com et tu trouveras aisément cela sur Google.

Merci beaucoup Frem ( si je peux t'appeller comme ça ) pour ta réponse , mais peux tu me dire comment on peut utiliser RegExp en javascript car je ne sais la faire qu'en php et perl ?
La taille minimale du mot de passe est 6 , alors si le nombre de caractéres est égal à 6 donc le niveau est "Bas" , mais as-tu une idée pour les niveaux "Moyen" et "Trés Haut" ?
J'ai déja une idée sur ce script mais me manque juste ces conditions pour continuer , je vais biensûr poster ce script si j'aurai une réponse à mes questions ici ;-) .

Merci beaucoup d'avance pour toute réponse .

A+ , Bouazza

**FremyCompany** · 30/04/2006, 16h50

Trop court : Taille réelle < 6
Bas : 6 - 8
Moyen : 9 - 12
Haut : 13 ++

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
var mdp = "aj0*5m";
var taille = mdp.length;
var securite = taille;
var Chiffre = new RegExp("[0-9]","gi");
var Special = new RegExp("[^a-zA-Z0-9]","gi");
 
for (var i=0;i<taille;i++)
{
    var c = mdp.charAt(i);
    if (Chiffre.test(c))
        {securite = securite + 1;}
    else {
    if(Special.test(c))
        {securite = securite + 4;}
    }
}
 
alert("SEC :" + securite);
</script>

**FremyCompany** · 30/04/2006, 18h29

Voila, je crois qu'avec ca tu peux te débrouiller...
Si tu as encore besoin d'aide, n'hésite pas à continuer le post.
N'oublie pas le tag

(Dans Outils de la discussion, en haut)

**bouazza92** · 30/04/2006, 18h30

Envoyé par FremyCompany

Trop court : Taille réelle < 6
Bas : 6 - 8
Moyen : 9 - 12
Haut : 13 ++

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
var mdp = "aj0*5m";
var taille = mdp.length;
var securite = taille;
var Chiffre = new RegExp("[0-9]","gi");
var Special = new RegExp("[^a-zA-Z0-9]","gi");
 
for (var i=0;i<taille;i++)
{
    var c = mdp.charAt(i);
    if (Chiffre.test(c))
        {securite = securite + 1;}
    else {
    if(Special.test(c))
        {securite = securite + 4;}
    }
}
 
alert("SEC :" + securite);
</script>

Merci beaucoup pour ton aide , est-ce que c'est correct comme ça ? en sachant que le formulaire s'appelle "inscription" et le champ de mot de passe s'appelle "pass1" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type='text/javascript'>
function test_pass() {
var mdp = inscription.pass1.value;
var taille = mdp.length;
var securite = taille;
var Chiffre = new RegExp("[0-9]","gi");
var Special = new RegExp("[^a-zA-Z0-9]","gi");
 
for (var i=0;i<taille;i++)
{
    var c = mdp.charAt(i);
    if (Chiffre.test(c))
        {securite = securite + 1;}
    else {
    if(Special.test(c))
        {securite = securite + 4;}
    }
}
var niveau="";
if (securite<6) niveau="Trop court";
if (securite>=6 && securite<=8) niveau="Bas";
if (securite>=9 && securite<=12) niveau="Moyen";
if (securite>=13) niveau="Trés haut";
}
</script>

**FremyCompany** · 30/04/2006, 18h49

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
setInterval("document.getElementById('txt1').innerHTML=test_pass();", 100)
function test_pass() {
var niveau = "Erreur..."
try
{
var mdp = document.getElementById('pass1').value;
var taille = mdp.length;
if (taille<6) {niveau="Trop court"; return niveau;}
var securite = taille;
var Chiffre = new RegExp("[0-9]","gi");
var Special = new RegExp("[^a-zA-Z0-9]","gi");
for (var i=0;i<taille;i++)
{
    var c = mdp.charAt(i);
    if (Chiffre.test(c))
        {securite = securite + 1;}
    else {
    if(Special.test(c))
        {securite = securite + 4;}
    }
}
if (securite >= 13) {niveau="Elevé";}
else if (securite >= 9) {niveau="Moyen";}
else {niveau="Bas";}
}
finally
{
return niveau;
}
}
</script>
<!-- Quelque part sur ta page, mais apres le script -->
<input type="text" id="pass1" />
<span id="txt1"></span>

**bouazza92** · 30/04/2006, 20h48

Merci pour ta réponse , voilà j'ai basé mon formulaire sur ton script , mais j'ai trouvé une solution encore mieux que setInterval , voilà :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script>
function test_pass() {
var niveau = ""
try
{
var mdp = document.inscription.pass1.value;
var taille = mdp.length;
if (taille<5) {niveau="Niveau de sécurité du mot de passe : <div class='rouge'>Trop court</div>"; return niveau;}
var securite = taille;
var Chiffre = new RegExp("[0-9]","gi");
var Special = new RegExp("[^a-zA-Z0-9]","gi");
 
for (var i=0;i<taille;i++)
{
    var c = mdp.charAt(i);
    if (Chiffre.test(c))
        {securite = securite + 1;}
    else {
    if(Special.test(c))
        {securite = securite + 4;}
    }
}
if (securite >= 13) {niveau="Niveau de sécurité du mot de passe :<br /><div class='vert'>Elevé</div>";}
else if (securite >= 9) {niveau="Niveau de sécurité du mot de passe :<br /><div class='vert'>Moyen</div>";}
else if (taille >= 5){niveau="Niveau de sécurité du mot de passe :<br /><div class='rouge'>Bas</div>";}
}
finally
{
return niveau;
}
}
</script><div style="margin-left:50px;margin-right:50px;">
<form method="post" action="Pages.php" name="inscription"><h3>Inscription à OurSheep</h3> (actuellement vous ne pouvez béneficier que de <a href="http://bouazza.chezdavid.ath.cx/open_art_factory.html">Open Art Factory</a>)
			<br />Titre :
			<input type="radio" name="titre" value="Mr" checked="checked" />Mr
			<input type="radio" name="titre" value="Mlle" />Mlle
			<input type="radio" name="titre" value="Mme" />Mme
			<br />Nom : 
			<br /><input class="" type="text" name="nom" size="40" maxlength="256" value="" />
			<br />Prénom : 
			<br /><input class="" type="text" name="prenom" size="40" maxlength="256" value="" />
			<br />
Pseudonyme : 
			<br /><input class="" type="text" name="pseudo" size="40" maxlength="256" value="" />
			<br />
Mot de passe ( au moins 6 caractéres ) : 
			<br /><input class="" type="password" id="pass1" name="pass1" onkeypress="javascript:document.getElementById('niveau_mdp').innerHTML=test_pass();" size="40" maxlength="256" value="" /><div id="niveau_mdp" style="float:right;"></div>
			<br />Confirmez votre mot de passe : 
			<br /><input class="" type="password" name="pass2" size="40" maxlength="256" value="" />
			<br />
Email : 
			<br /><input class="" type="text" name="email" size="40" maxlength="256" value="" />
                        <input type="hidden" name="action" value="inscrire"></input>
			<br /><br /><input class="vert" type="submit" name="submit" value="Valider" />
			<br /><br /><b>Important : </b> en cliquant sur le bouton "Valider" , vous acceptez automatiquement de ne pas vouloir utiliser nos services pour un but lucratif ou illégal , sinon votre compte va etre supprimé automatiquement .
</form>

Voilà le résultalt : http://bouazza.chezdavid.ath.cx/inscription.html

**bouazza92** · 30/04/2006, 23h12

Salut , ton code est impressionant mais il y a un bug , en tapant par exemple "a" 14 fois , ça te dira que c'est élevé , alors comment faire pour mettre niveau à "bas" si la chaine ne contient qu'une suite d'un meme caractére , mettre "moyen" si la chaine contient des caractéres différents , et "élevé" si la chaine contient des caractéres , des chiffres ou des caractéres spéciaux ?

Merci d'avance pour toute réponse .

**FremyCompany** · 01/05/2006, 11h34

Je vais chercher... je vais faire un nouveau RegExp... je te dirai quand j'aurai du nouveau...

**FremyCompany** · 01/05/2006, 14h23

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script>
// Ceci est bien mieux que onkeypress (qui ne marche pas pour "<---" ou "delete" par ex)
setInterval("document.getElementById('niveau_mdp').innerHTML=test_pass();", 250);
function test_pass() {
var niveau = "";
try
{
// Ceci est a le mérite d'être compatible avec tous les navigateur
var mdp = document.getElementById("pass1").value;
var taille = mdp.length;
// Si tu veux que la taille soit 6 au moins, taille < 5 ne correspond pas (5 caractère sont déja ok)
if (taille<6) {niveau="Niveau de sécurité du mot de passe : <div class='rouge'>Trop court</div>"; return niveau;}
var securite = 0;
var Chiffre = new RegExp("[0-9]","gi");
var Special = new RegExp("[^a-zA-Z0-9]","gi");
var chrs = new Array();
 
for (var i=0;i<taille;i++)
{
    var c = mdp.charAt(i);
	chrs[c] = 0;
}
 
for (var i=0;i<taille;i++)
{
    var c = mdp.charAt(i);
	// Le caractère ne vaut rien (il n'a pas encore été validé)
	var cv = 0;
	// Ajoute 1 au nombre d'occurence du caractère
	chrs[c] = chrs[c] + 1
	// Si le caractère a déjà été trouvé plus de 3 fois, celui-ci est ignoré
	if (chrs[c] < 4)
	{
		// Le caractère est pris en compte : il vaut 1.
		cv = 1;
		//Si le caractère est un chiffre, il compte pour double
		if (Chiffre.test(c))
			{cv = 2;}
		else {
		// Si le caractère n'est ni un chiffre, ni une lettre, alors il vaut 5
		if (Special.test(c))
			{cv = 3;}
		}
	}
	// La sécurité est augmentée de la valeur du caractère (0, 1 ou 5)
	securite = securite + cv
}
// Calcule le niveau de sécurité du mot de passe.
if (securite >= 13) {niveau="Niveau de sécurité du mot de passe :<br /><div class='vert'>Elevé</div>";}
else if (securite >= 9) {niveau="Niveau de sécurité du mot de passe :<br /><div class='vert'>Moyen</div>";}
else {niveau="Niveau de sécurité du mot de passe :<br /><div class='rouge'>Bas</div>";}
}
finally
{
return niveau;
}
}
</script><div style="margin-left:50px;margin-right:50px;">
<form method="post" action="Pages.php" name="inscription"><h3>Inscription à OurSheep</h3> (actuellement vous ne pouvez béneficier que de <a href="http://bouazza.chezdavid.ath.cx/open_art_factory.html">Open Art Factory</a>)
			<br />Titre :
			<input type="radio" name="titre" value="Mr" checked="checked" />Mr
			<input type="radio" name="titre" value="Mlle" />Mlle
			<input type="radio" name="titre" value="Mme" />Mme
			<br />Nom : 
			<br /><input class="" type="text" name="nom" size="40" maxlength="256" value="" />
			<br />Prénom : 
			<br /><input class="" type="text" name="prenom" size="40" maxlength="256" value="" />
			<br />
Pseudonyme : 
			<br /><input class="" type="text" name="pseudo" size="40" maxlength="256" value="" />
			<br />
Mot de passe ( au moins 6 caractéres ) : 
			<br /><input class="" type="password" id="pass1" name="pass1" size="40" maxlength="256" value="" /><div id="niveau_mdp" style="float:right;"></div>
			<br />Confirmez votre mot de passe : 
			<br /><input class="" type="password" name="pass2" size="40" maxlength="256" value="" />
			<br />
Email : 
			<br /><input class="" type="text" name="email" size="40" maxlength="256" value="" />
                        <input type="hidden" name="action" value="inscrire"></input>
			<br /><br /><input class="vert" type="submit" name="submit" value="Valider" />
			<br /><br /><b>Important : </b> en cliquant sur le bouton "Valider" , vous acceptez automatiquement de ne pas vouloir utiliser nos services pour un but lucratif ou illégal , sinon votre compte va etre supprimé automatiquement .
</form>

Voila le code final. Tu vois que j'ai commenté tout ca, n'hésite pas à enlever les commentaires si tu as compris.
J'ai enlevé ton onkeypress, parceque cette methode n'est pas efficace à 100%, setInterval l'est bien plus.
De même pour document.inscription.pass1 :
cette appellation n'est pas conforme W3C, donc certains navigateurs ne la prenne pas en charge.
Essaie de toujours utiliser document.getElementById("ID").
Pour le reste, tu verras c'est assez simple.
Un caractère utilisé plus de 3 fois ne compte plus.

**bouazza92** · 04/05/2006, 10h42

Merci beaucoup Fremy , ça marche trés bien , et désolé pour le retard ( je n'étais pas là ) .

Afficher le niveau de sécurité d'un mot de passe

JavaScript

Discussions similaires

Partager

Partager