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