Passwortstärke `meter`

Der folgende Beitrag ist ein Gastbeitrag von Pankaj Parashar. Pankaj ist unser ansässiger Experte für alles rund um <progress> und <meter> und dieser Beitrag ist ein weiterer Beweis dafür. Hier führt er uns durch die Implementierung eines Passwortstärkeindikators unter Verwendung der semantisch besten Option.

Eine Reihe von großen Websites wie Dropbox, Gmail und eBay verlassen sich auf eine Art Indikator, um dem Benutzer während der Registrierung die Stärke des Passworts anzuzeigen. Der Indikator dient als gute Erinnerung für den Benutzer an den Schwierigkeitsgrad, das Passwort zu knacken.

Obwohl diese Praxis nicht neu ist, verwendet die meisten bisher von mir gesehenen Implementierungen von Passwortstärkeindikatoren denselben alten Markup aus <div> und <span>, um den Indikator darzustellen. Mit der Einführung von HTML5 haben wir nun die Möglichkeit, das <meter>-Element in unserem Markup zu verwenden, das meiner Meinung nach semantisch genauer und für diesen Anwendungsfall des Passwortstärkeindikators perfekt geeignet ist. Im gesamten Artikel werden wir es als Passwortstärkeindikator bezeichnen.

Warum nicht das HTML5 <progress>-Element verwenden?

Wie der Name schon sagt, wird das HTML5 <progress>-Element verwendet, um den Fortschritt einer Aufgabe oder Aktivität anzuzeigen. Die Stärke eines Passworts darzustellen ist keine Aufgabe oder Aktivität. Es ist nichts, das Fortschritt in Richtung eines Ziels hat oder jemals als abgeschlossen gilt. Daher ist es sicher zu schlussfolgern, dass das <progress>-Element für diesen Anwendungsfall nicht das richtige ist.

Wie berechnet man die Stärke eines Passworts?

Wir werden die zxcvbn-Bibliothek von Dropbox verwenden, um die Stärke des Passworts zu berechnen. Es gibt einige alternative JavaScript-Bibliotheken, die die Passwortstärke berechnen, aber zxcvbn ist perfekt für unseren Anwendungsfall, weil

1. Sie eine einfache API bereitstellt, die ein Passwort als Eingabe nimmt und eine Punktzahl von 0 bis 4 als Ausgabe zurückgibt, um die Stärke eines Passworts anzuzeigen (0 – am schwächsten, 4 – am stärksten). Dies funktioniert gut mit unserem <meter>-Element, das einen value innerhalb eines vordefinierten min-max-Bereichs akzeptieren kann.
2. Sie schätzt eine realistische Passwortstärke, indem sie alle möglichen überlappenden Muster erkennt und diese dann mit mehreren englischen Wörterbüchern, gängigen Passwörtern, Tastaturmustern und Wiederholungen abgleicht.
3. Sie wird von Dropbox entwickelt! Das offizielle Blog bietet viel mehr Informationen über die technischen Details des Algorithmus.

Wenn Sie mit dem HTML5 <meter>-Element nicht vertraut sind, dann hat CSS-Tricks genau den richtigen Artikel, um Sie mit den Grundlagen vertraut zu machen. Ich empfehle dringend, ihn zu lesen, bevor Sie mit diesem Artikel fortfahren.

Grundlegender Markup

Beginnen wir mit einem grundlegenden Markup: einem <input>-Feld, das ein Passwort akzeptiert, mit einem dazugehörigen <label>.

<label for="password">Enter password</label>
<input type="password" id="password" required>

Wir fügen das <meter>-Element unter dem <input> zusammen mit einem Textelement hinzu, in dem wir den aktuellen vom Meter-Element dargestellten Wert bestätigen und erklären können. Da zxcvbn einen Wert im Bereich von 0 bis 4 zurückgibt, ist der kleinstmögliche Wert des Meters 0, während der größtmögliche Wert 4 ist. Falls nicht angegeben, ist der Standardwert des min-Attributs immer 0.

<meter max="4" id="password-strength-meter"></meter>
<p id="password-strength-text"></p>

W3C empfiehlt, eine textuelle Darstellung des aktuellen Werts innerhalb des Meter-Tags für ältere Browser einzufügen. Wir werden ihn jedoch vorerst leer lassen und die möglichen Fallback-Techniken später im Artikel besprechen.

Styling des Meters

In diesem Abschnitt konzentrieren wir uns nur auf das Styling des <meter>-Elements. Das Styling des restlichen Markups überlasse ich Ihnen als Übung. Um zu verstehen, wie das <meter>-Element gestylt wird, müssen wir unter die Haube der Browser schauen, um die Implementierung des <meter>-Elements zu dekonstruieren.

Beispielsweise zerlegen Blink/Webkit und Gecko-basierte Browser das <meter>-Tag so:

Die zxcvbn-Bibliothek gibt eine Punktzahl von 0 bis 4 zurück. Das bedeutet, dass es fünf mögliche Werte für unseren Passwortstärkeindikator gibt. Wir können jeden davon mit dem Attributselektor ansprechen, z. B. meter[value="0"], meter[value="1"] usw.,

Die Punktzahl repräsentiert die Stärke des Passworts. Je höher die Punktzahl, desto schwieriger ist das Passwort zu knacken. Wir werden jede Punktzahl mit einer anderen Farbe darstellen, um dem Benutzer ein visuelles Feedback zu geben. Wir können das Styling von value="0" überspringen, da es nicht sichtbar sein wird.

Styling des Meterbalkens

meter {
  /* Reset the default appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  margin: 0 auto 1em;
  width: 100%;
  height: 0.5em;

  /* Applicable only to Firefox */
  background: none;
  background-color: rgba(0, 0, 0, 0.1);
}

meter::-webkit-meter-bar {
  background: none;
  background-color: rgba(0, 0, 0, 0.1);
}

Styling des Meterwerts

/* Webkit based browsers */
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }

/* Gecko based browsers */
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }

Aktualisierung des Meters

Bevor wir fortfahren, binden wir die zxcvbn-Bibliothek von cdnjs direkt vor dem Body-Element mit einem <script>-Tag ein.

<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>

zxcvbn fügt eine einzelne Funktion zum globalen Namensraum hinzu. Sie nimmt ein erforderliches Argument (ein Passwort) und gibt ein resultierendes Objekt mit den folgenden Eigenschaften zurück:

• guesses – Geschätzte Anzahl von Versuchen, die zum Knacken des Passworts benötigt werden
• guesses_log10 – Logarithmischer Wert der Versuche zur Basis 10
• crack_time_seconds – Schätzung der tatsächlichen Knackzeit in Sekunden
• crack_time_display – Knackzeit in einem für Menschen lesbaren Format, z. B. „3 Stunden“ usw.
• score – Ganzzahl im Bereich 0-4 (das ist es, was wir für den Meter verwenden werden)
• feedback.warning – Erklärt, was mit dem eingegebenen Passwort falsch ist
• feedback.suggestions – Liste von Vorschlägen, um ein weniger guessable Passwort zu wählen
• sequence – Liste von Mustern, auf denen zxcvbn die Schätzung der Vermutungen basiert
• calc_time – Die Zeit, die zxcvbn zur Berechnung einer Antwort benötigt hat, in Millisekunden

zxcvbn enthält auch ein optionales user_inputs-Argument, das ein Array von Zeichenketten akzeptiert, die es als Blacklist verwendet, um Passwörter zu bestrafen, die persönliche Informationen des Benutzers aus anderen Feldern wie Name, E-Mail usw. enthalten.

Nun werden wir jedes Mal, wenn sich das Passwortfeld ändert, das Passwort an die zxcvbn-Funktion übergeben und den Meter anhand des resultierenden score aktualisieren. Zusätzlich zur Aktualisierung des value-Attributs des Meters werden wir auch den begleitenden Text aktualisieren, um dem Benutzer die Stärke des Passworts anzuzeigen.

Erstens ordnen wir die Punktzahlen einem für Menschen lesbaren Format zu,

var strength = {
  0: "Worst",
  1: "Bad",
  2: "Weak",
  3: "Good",
  4: "Strong"
}

Zweitens, hängen Sie einen Listener an das Passwortfeld an, der auf Änderungen hört und dann den Meter und den Textindikator aktualisiert.

var password = document.getElementById('password');
var meter = document.getElementById('password-strength-meter');
var text = document.getElementById('password-strength-text');

password.addEventListener('input', function() {
  var val = password.value;
  var result = zxcvbn(val);

  // Update the password strength meter
  meter.value = result.score;

  // Update the text indicator
  if (val !== "") {
    text.innerHTML = "Strength: " + strength[result.score]; 
  } else {
    text.innerHTML = "";
  }
});

Das Demo Pen verwendet zusätzlich feedback.warnings und feedback.suggestions, um dem Benutzer ein relevantes und nützliches Feedback zu geben, damit er ein weniger guessable Passwort wählen kann.

Sehen Sie sich den Pen Password strength meter von Pankaj Parashar (@pankajparashar) auf CodePen an.

Wenn die Demo aus irgendeinem Grund in Ihrem Browser fehlschlägt, können Sie dieses Video ansehen.

Fallback

Wie er ist, funktioniert unser Passwortstärkeindikator in allen Browsern, die das HTML5 <meter>-Element unterstützen. Das Gute ist, dass wir uns keine Sorgen um Browser machen müssen, die es nicht unterstützen. Diese Browser werden das <meter>-Tag einfach ignorieren und den Text nach dem Meter rendern, was ein anständiger Fallback ist, um dem Benutzer die Stärke des Passworts anzuzeigen.

Wenn Sie entschlossen sind, eine konsistente Benutzererfahrung über alle Browser hinweg zu bieten, könnten Sie das Erscheinungsbild des Meters mit einer Kombination aus <div> und <span> Markup innerhalb des <meter>-Elements simulieren. Browser, die das <meter>-Tag nicht verstehen, werden es einfach ignorieren und stattdessen das Markup im Inneren rendern. Diese Methode habe ich im Fallback-Abschnitt meines früheren Artikels auf CSS-Tricks zum gleichen Thema ausführlich beschrieben.

Sind Passwortstärkeindikatoren aus UX-Sicht gut?

Dieser Artikel beabsichtigt nicht, eine Debatte darüber zu entfachen, ob Passwortstärkeindikatoren gut sind oder nicht. Es gibt wahrscheinlich rationale und vernünftige Argumente auf beiden Seiten. Die meiste Argumentation beruht jedoch auf der Unfähigkeit des Algorithmus, eine realistische Messung der Passwortstärke zu liefern. Ich denke, Dropbox hat es mit der zxcvbn-Bibliothek perfekt getroffen, weil sie eine viel realistischere Einschätzung bietet, wie schwierig das Passwort zu knacken ist.

Ob Sie es in Ihrem Design verwenden oder nicht, liegt bei Ihnen. Aber wenn Sie sich entscheiden, den Sprung zu wagen, dann stellen Sie sicher, dass Sie das HTML5 <meter>-Element verwenden!