Table des matières
Niveau
..........
En rapport...

Mot de passe et sécurité

Lorsqu'on parle de sécurité on conseille souvent en premier lieu d'avoir des mots de passe complexes.
Le complexité passe par 2 points majeurs :

C'est ce dernier point qui nous intéresse.
En effet, un mot de passe ne contenant que des lettres en minuscule est plus facile à trouver qu'un mot de passe qui alterne majuscule et minuscule. A ça, on peu ajouter des chiffres et, mieux encore, des caractères autres (exemple : #&”…)

Le principe

Nous allons mettre en place un système qui va colorer le fond de la zone de texte en fonction de la complexité du mot de passe.

Et bien sûr la couleur varie entre le rouge et le vert.

Exemple


clickez pour voir un 2eme exemple

Comment faire

Entre vos balises <head> et </head> (ou dans un fichier javascript externe) collez ceci :

javascript
function complexityPassword() {
	this.type="keyup";
	this.obj=null;
	this.o_backgroundColor='';
	this.check=function () {
		var score=0;
		var match;
		_this=this;
 
		if (this.obj!=null)
			_this=this.obj;
 
		match = new RegExp("[a-z]+","");
		if (match.test(_this.value))
			score+=1;
 
		match = new RegExp("[A-Z]+","");
		if (match.test(_this.value))
			score+=1;
 
		match = new RegExp("[0-9]+","");
		if (match.test(_this.value))
			score+=1;
 
		match = new RegExp("[^A-Za-z0-9]+","");
		if (match.test(_this.value))
			score+=1;
 
		score+=_this.value.length/15;
 
		if (score>5) score=5;
 
		_this.style.backgroundColor='rgb('+Math.round(255-((score*255)/5))+','+Math.round((score*255)/5)+',0)';
 
	}
 
	this.connect = function (obj) {
		//John Resig : http://ejohn.org/projects/flexible-javascript-events/
		if ( obj.attachEvent ) {
			obj['e'+this.type+this.check] = this.check;
			obj[this.type+this.check] = function(){obj['e'+this.type+this.check]( window.event );}
			obj.attachEvent( 'on'+this.type, obj[this.type+this.check] );
		} else
			obj.addEventListener( this.type, this.check, false );
 
		this.o_backgroundColor=obj.style.backgroundColor;
 
		this.obj=obj;
		this.check();
		this.obj=null;
	}
	this.disconnect = function removeEvent(obj) {
		//John Resig : http://ejohn.org/projects/flexible-javascript-events/
		if ( obj.detachEvent ) {
			obj.detachEvent( 'on'+this.type, obj[this.type+this.check] );
			obj[this.type+this.check] = null;
		} else
			obj.removeEventListener( this.type, this.check, false );
 
		obj.style.backgroundColor=this.o_backgroundColor;
	}	
}
 
var PassColor=new complexityPassword();

Ceci met en place la classe qui va gérer le coloration de la zone de texte.
Maintenant, il ne reste plus qu'à “attacher” cette classe à un objet (avec la méthode connect()).
Exemple :

html4strict
<input type="text" value="" id="test" />
<script type="text/javascript">
    PassColor.connect(document.getElementById('test'));
</script>
La classe dispose de deux méthodes externes :

La 1ere attache la classe à un objet (et donc active la vérification)
La 2eme détache la classe (et désactive la vérification)
Chacune des deux méthodes prend comme paramètre un objet DOM de type input (voir l'exemple ci-dessus)



14/02/2007 14:50 -

iDo –