Passwortgenerator

So funktioniert das Script

Das Script hat vier Aufgaben: Es hält die möglichen Zeichen als Zeichenketten bereit, stellt aus den angekreuzten Kästchen einen Vorrat zusammen, zieht daraus so oft ein zufälliges Zeichen wie gewünscht und schreibt das Ergebnis in die Ausgabefläche. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen darin nicht mit anderen Scripts auf derselben Seite kollidieren.

const ZIFFERN = "0123456789";
const KLEIN = "abcdefghijklmnopqrstuvwxyz";
const GROSS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const SONDER = "`~!@#$%^&*()-_=+[{]}|;:'\",<.>/? ";

Die vier Zeichenarten stehen als ganz gewöhnliche Zeichenketten (Strings) im Script. Großgeschriebene Namen sind eine verbreitete Konvention für Werte, die sich nie ändern. Im Sonderzeichen-Vorrat steckt hinter dem Fragezeichen noch ein Leerzeichen — wer das nicht möchte, löscht es einfach aus der Zeichenkette. Genauso könnt ihr hier leicht schwer unterscheidbare Zeichen entfernen, etwa das kleine l, das große I und die 1.

function zufallsZahl(grenze) {
  if (window.crypto && window.crypto.getRandomValues) {
    const werte = new Uint32Array(1);
    window.crypto.getRandomValues(werte);
    return werte[0] % grenze;
  }
  return Math.floor(Math.random() * grenze);
}

Diese Funktion liefert eine Zufallszahl von 0 bis grenze - 1. Bevorzugt fragt sie crypto.getRandomValues(), den Zufallsgenerator des Browsers für sicherheitsrelevante Zwecke — der ist im Gegensatz zu Math.random() nicht vorhersagbar. Der Rest-Operator % stutzt die sehr große Zufallszahl auf den benötigten Bereich zurecht. Kennt ein sehr alter Browser crypto nicht, springt die letzte Zeile ein: Math.random() liefert eine Kommazahl zwischen 0 und knapp 1, mal grenze genommen und mit Math.floor() abgerundet ergibt das dasselbe Zahlenformat.

function zeichenVorrat(reihe) {
  let vorrat = document.getElementById("pw-extra").value;
  if (document.getElementById(reihe + "-ziffer").checked) vorrat += ZIFFERN;
  if (document.getElementById(reihe + "-klein").checked) vorrat += KLEIN;
  return vorrat;
}

Hier wird der Topf gefüllt, aus dem gezogen wird. Die Funktion bekommt mit reihe das Namensfragment "pw-erst" oder "pw-rest" übergeben und setzt daraus die id des jeweiligen Kästchens zusammen — so genügt eine Funktion für beide Zeilen. .checked ist bei Ankreuzfeldern true oder false; ist es true, wird die passende Zeichenkette mit += angehängt. Ganz am Anfang stehen die selbst eingetippten Zusatzzeichen, die auf diesem Weg immer mit im Topf landen.

function zufallsZeichen(vorrat) {
  return vorrat.charAt(zufallsZahl(vorrat.length));
}

charAt() holt aus einer Zeichenkette das Zeichen an einer bestimmten Stelle, gezählt ab 0. Zusammen mit der Zufallszahl von 0 bis vorrat.length - 1 ist das die ganze Auswahl: ein zufälliges Zeichen aus dem Topf. Weil jedes Zeichen bei jedem Zug wieder zur Verfügung steht, dürfen sich Zeichen im Passwort auch wiederholen.

let passwort = zufallsZeichen(ersteArten);
for (let i = 1; i < laenge; i++) {
  passwort += zufallsZeichen(weitereArten);
}

Das erste Zeichen wird aus dem Vorrat der ersten Zeile gezogen, alle weiteren aus dem der zweiten. Deshalb startet die Schleife bei i = 1 und nicht bei 0: Das Zeichen Nummer 0 gibt es ja schon. Bei einer Länge von 8 läuft sie also siebenmal und hängt jedes Mal ein weiteres Zeichen an.

ausgabe.textContent = "Neues Passwort: ";
const anzeige = document.createElement("strong");
anzeige.textContent = passwort;
ausgabe.appendChild(anzeige);

Die Ausgabe läuft bewusst nicht über innerHTML. Ein Passwort kann Zeichen wie < oder & enthalten, die der Browser sonst als HTML deuten würde — das Passwort wäre auf dem Bildschirm plötzlich unvollständig. textContent setzt reinen Text und ist damit immer korrekt. Für die Hervorhebung wird ein <strong>-Element mit createElement() erzeugt, mit dem Passwort gefüllt und mit appendChild() an die Ausgabe gehängt.

if (!laenge || laenge < 1 || laenge > 128) {
  ausgabe.textContent = "Bitte eine Passwortlänge zwischen 1 und 128 eintragen.";
  return;
}

Vor dem Würfeln prüft das Script die Eingaben. Steht im Längenfeld keine Zahl, ist das Ergebnis von Number() der Wert NaN („not a number“), und !laenge trifft zu — genau wie bei einer 0. Statt eines unbrauchbaren Passworts erscheint dann eine Meldung, und return beendet die Funktion. Die obere Grenze von 128 ist frei gewählt und kann bedenkenlos erhöht werden; auch der max-Wert im Eingabefeld müsste dann angepasst werden.

Zum Schluss verbindet document.getElementById("pw-erzeugen").addEventListener("click", erzeugen) den Knopf mit der Funktion. Das Script steht dafür unter dem Formular, damit die Felder und der Knopf beim Ausführen schon existieren.