Codeschnipsel - Passwort Analyse (Password strength)

Im folgenden Teil möchte ich euch zeigen, wie man eine Passwortsicherheitsanzeige in beispielsweise ein Registrierungsformular einbauen kann.

Hier habe ich die Passwortsicheherheit anhand folgender Aspekte bewertet:
- Groß- und Kleinschreibung
- Zahlen
- Sonderzeichen
- und am wichtigsten: Verschiedenheit der Zeichen
Jedoch ist zu beachten, dass Passwörter mit weniger als 6 Zeichen, gleich als "Sehr schlecht" bewertet werden.
Desweiteren gibt es die Einstellung, die Passwörter "Sehr kritisch" oder in "Alltagsform" zu bewerten.

Das eigentliche Script, welches auch das Passwort bewertet (P91PWS.js):

Code:
/*
###########################################################################################################################
# P91PWS V.1.1 by PA-S.de
###########################################################################################################################
# P91PWS V.1.1 by PA-S.de
# Copyright 2003-2008 PA-S.de
# Script Url: www.pa-s.de
# Dieser unsichtbare Verweis darf nicht entfernt werden!
# 17.06.2008, 08.07.2008
###########################################################################################################################
*/
 
/*
~~~~~~~~~~~~~~~~~~~~~~~
~~~~ Einstellungen ~~~~
~~~~~~~~~~~~~~~~~~~~~~~
*/
 
/* == CSS-Classes: Reihenfolge: 1, 2, 3, 4, 6 (rating/Bewertung) == */
var P91Styles = new Array("P91PWS_1", "P91PWS_2", "P91PWS_3", "P91PWS_4", "P91PWS_6");
 
/* == CSS-Class der Ausgabe: == */
var P91Output = ("P91PWS_O");
 
/* == Kriterien-Einschätzung == */
/* 0 = Sehr kritisch
 * 1 = Alltagsform
 */
var P91mode = 1;
 
/* == Erlaubte Sonderzeichen (RegExp) == */
/* null = für alle Zeichen außer 0-9A-Za-zts   */
var P91valid = null;
 
/* Beispiel für die Sonderzeichen _-.            */
// var P91valid = /[._-]/;
 
/* == Ausgabe: Reihenfolge: 1, 2, 3, 4, 6 (rating/Bewertung) ==*/
/* Deutsch */
var P91Msg = new Array("Sehr sicher", "Sicher", "Stark", "Mittel", "Sehr schlecht");
 
/* English */
// var P91Msg = new Array("Very Secure", "Secure", "Average", "Weak", "Very Weak");
 
/*
~~~~ ENDE ~~~~
*/
function P91PWS(heuri) {
	var P91b = new Array(0,0,0,0);
	var P91r = new Array(0,0,0,0);
	var P91various = 1;
	var sum = 0;
	var erg = null;
	var P91PWS = document.getElementById("P91PWS"); 
	var heuri = heuri.split('');
	for(i = 0; i <= (heuri.length - 1); i++) {
		if (heuri[i] != null) {
			// LOW
			if (heuri[i].match(/([a-z])/)) {
				P91b[0]++;
				if (i > 0) {
					if (!heuri[(i - 1)].match(/([a-z])/)) {
						P91various++;
					}
				}
			}
			// UP
			if (heuri[i].match(/([A-Z])/)) {
				P91b[1]++;
				if (i > 0) {
					if (!heuri[(i - 1)].match(/([A-Z])/)) {
						P91various++;
					}
				}
			}
			// NUM
			if (heuri[i].match(/([0-9])/)) {
				P91b[2]++;
				if (i > 0) {
					if (!heuri[(i - 1)].match(/([0-9])/)) {
						P91various++;
					}
				}
			}
			// SON
			if (P91valid == null) {
				if (heuri[i].match(/[^a-zA-Z0-9ts]/)) {
					P91b[3]++;
					P91various++;
				}
			} else {
				if (heuri[i].match(P91valid)) {
					P91b[3]++;
					P91various++;
				}
			}
		}
    }
	sum = (P91b[0] + P91b[1] + P91b[2] + P91b[3]);
	if(sum < 1)  {
		sum = 1;
	}
	// Bewertung
	P91r[4] = Math.round(P91various * 100 / sum);
	P91r[3] = Math.round(P91b[3] * 100 / sum);
	P91r[2] = Math.round(P91b[2] * 100 / sum);
	P91r[1] = Math.round(P91b[1] * 100 / sum);
	P91r[0] = Math.round(P91b[0] * 100 / sum);  
	// Analyse by PAS
	if(P91r[0] == 100) {
		erg = 4;
	} else if(P91r[0] == 100) {
		erg = 4;
	} else if(P91r[1] == 100) {
		erg = 4;
	}  else if(P91r[2] == 100) {
		erg = 4;
	} else if(P91r[3] == 100 && sum > 5) {
		erg = 0;
	} else 
	if (P91mode == 0) { // hart
		if (sum > 13) {
			if (P91various > 6 || P91b[3] > 4) {
				erg = 0;
			}
			else {
				erg = 1;
			}
		}
		else if (sum > 5 && sum < 14) {
				if (P91various > 5) {
					erg = 2;
				}
				else {
					erg = 3;
				}
			}
			else {
				erg = 4;
			}
	}
	else { // normal
		if (sum > 9) {
			if (P91various > 5 || P91b[3] > 4) {
				erg = 0;
			}
			else {
				erg = 1;
			}
		}
		else if (sum > 5 && sum < 10) {
				if (P91various > 3) {
					erg = 2;
				}
				else {
					erg = 3;
				}
			}
			else {
				erg = 4;
			}
	}	
 
	P91PWS.innerHTML = '<div class="' + P91Output + ' "> ' + P91Msg[erg] +'</div><div class="P91PWS_C"><div class="' + P91Styles[erg] + '"></div></div>';
	return true;
}

Nun die CSS-Styles für die Anzeige:

Code:
<style type="text/css">
<!--
/* P91PWSecurity Styles */
.P91PWS_C, .P91PWS_1, .P91PWS_2, .P91PWS_3, .P91PWS_4, .P91PWS_6 {
	height: 6px; 
	margin-top: 3px;
	padding: 0;
	margin: 0;
}
.P91PWS_C {
	background-color: #cccccc;
	width: 100%; 
}
.P91PWS_O {
	color: #666666;
	margin: 1px 0 3px 0;
}
.P91PWS_1 {
	background-color: #339900;
	width: 100%;
}
.P91PWS_2 {
	background-color: #99FF00;
	width: 85%;
}
.P91PWS_3 {
	background-color: #FFCC00;
	width: 60%;
}
.P91PWS_4 {
	background-color: #996900;
	width: 45%;
}
.P91PWS_5 {
	background-color: #993300;
	width: 30%;
}
.P91PWS_6 {
	background-color: #FF0000;
	width: 10%;
}
/* Ende P91PWSecurity Styles */
-->
</style>

Die Einbindung der Datei "P91PWS.js":

Code:
<script type="text/javascript" src="P91PWS.js"></script>

Jetzt ein Ausschnitt des eigentlichen Passwort-Feldes welches bewertet werden soll.

Code:
<input name="passwort" type="password" id="passwort" onkeyup="P91PWS(this.value)" /><br /><span style="font-size: 10px">Mindestens 6 Zeichen</span>

Hierbei ist der Funktionsaufruf "P91PWS(this.value)" der über onkeyup (bei losgelassener Taste) aufgerufen wird wichtig!

Und schließlich die eigentliche Anzeige der "Sicherheitsstufe" des Passwortes:

Code:
<div style="font-size:10px">
		<strong>Sicherheitsstufe:</strong> 
		<!-- Dynamisches Element -->
		<div id="P91PWS">
			<div class="P91PWS_O">Nicht bewertet</div>
			<div class="P91PWS_C"></div>
		</div>
		<!-- Dynamisches Element -->
	</div>

Hier das komplette Beispiel der Eingabemaske:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>P91PWSecurity</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}
body {
	background-color: #efefef;
	margin: 10px
}
a {
	color: #003366;
	text-decoration: underline;
}
input {
	height: 23px;
	width: 180px;
	border: 1px solid #999999;
	font-size: 14px;
}
 
/* P91PWSecurity Styles */
.P91PWS_C, .P91PWS_1, .P91PWS_2, .P91PWS_3, .P91PWS_4, .P91PWS_6 {
	height: 6px; 
	margin-top: 3px;
	padding: 0;
	margin: 0;
}
.P91PWS_C {
	background-color: #cccccc;
	width: 100%; 
}
.P91PWS_O {
	color: #666666;
	margin: 1px 0 3px 0;
}
.P91PWS_1 {
	background-color: #339900;
	width: 100%;
}
.P91PWS_2 {
	background-color: #99FF00;
	width: 85%;
}
.P91PWS_3 {
	background-color: #FFCC00;
	width: 60%;
}
.P91PWS_4 {
	background-color: #996900;
	width: 45%;
}
.P91PWS_5 {
	background-color: #993300;
	width: 30%;
}
.P91PWS_6 {
	background-color: #FF0000;
	width: 10%;
}
/* Ende P91PWSecurity Styles */
-->
</style>
<script type="text/javascript" src="P91PWS.js"></script>
</head>
 
<body>
<h3>P91PWSecurity</h3>
<table style="border: 0; background-color: #FFFFFF; border: 1px solid #CCC; padding: 5px">
  <tr>
    <td style="width:100px"><strong>Passwort:    </strong></td>
    <td style="width:190px"><input name="passwort" type="password" id="passwort" onkeyup="P91PWS(this.value)" /><br /><span style="font-size: 10px">Mindestens 6 Zeichen</span></td>
    <td style="width:200px">
	<div style="font-size:10px">
		<strong>Sicherheitsstufe:</strong> 
		<!-- Dynamisches Element -->
		<div id="P91PWS">
			<div class="P91PWS_O">Nicht bewertet</div>
			<div class="P91PWS_C"></div>
		</div>
		<!-- Dynamisches Element -->
	</div>
	</td>
  </tr>
</table>
</body>
</html>

Download aller Dateien: Hier klicken!
Demonstration: Hier klicken!

Beachten Sie:

Wir übernehmen keinerlei Haftung für irgendwelche Schäden, Ausfälle oder sonstigen Geschehnissen.
Alle Angaben sind ohne Gewähr, Sie handeln auf eigenes Risiko!
Alle genannten Soft- und Hardwarebezeichnungen sowie Markennamen sind Eigentum ihrer jeweiligen Inhaber und unterliegen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz.
Alle Rechte vorbehalten