Hindert Nutzer daran, Inhalte in Eingabefelder einzufügen

Einige Websites behaupten, dass die Sicherheit beeinträchtigt wird, wenn Nutzer Passwörter einfügen dürfen. Das Einfügen von Passwörtern verbessert jedoch die Sicherheit, da die Verwendung von Passwortmanagern möglich ist.

Passwortmanager generieren in der Regel starke Passwörter für Nutzer, speichern sie sicher und fügen sie dann automatisch in Passwortfelder ein, wenn sich Nutzer anmelden müssen. Dieser Ansatz ist in der Regel sicherer, als Nutzer dazu zu zwingen, Passwörter einzugeben, die kurz genug sind, um sich zu merken.

Im Allgemeinen sollten Nutzer nicht daran gehindert werden, Inhalte in <input>-Elemente einzufügen.

Gründe für das Scheitern dieser Lighthouse-Prüfung

Lighthouse meldet Code, der Nutzer daran hindert, Inhalte in nichtschreibgeschützte Eingabefelder einzufügen:

Lighthouse-Analyse zeigt, dass Nutzer auf der Seite daran gehindert werden, Inhalte in ein Passwortfeld einzufügen

Lighthouse erfasst alle nicht nur lesbaren <input>-Elemente, fügt in jedes Element Text ein und prüft dann, ob das paste-Ereignis nicht durch einen benutzerdefinierten Ereignishandler verhindert wurde.

Es ist auch möglich, das Einfügen außerhalb eines paste-Ereignis-Listeners zu verhindern. Lighthouse erkennt dieses Szenario nicht.

Einfügen in Passwortfelder aktivieren

Code finden, der das Einfügen verhindert

So finden und prüfen Sie schnell den Code, der das Einfügen verhindert:

  1. Maximieren Sie den Bereich Event-Listener-Haltepunkte.
  2. Maximieren Sie die Liste Zwischenablage.
  3. Markieren Sie das paste-Kästchen.
  4. Fügen Sie Text in ein Passwortfeld auf Ihrer Seite ein.
  5. In den DevTools sollte die Ausführung an der ersten Codezeile im entsprechenden paste-Ereignis-Listener pausiert werden.

Code entfernen, der das Einfügen verhindert

Die Ursache des Problems ist häufig ein Aufruf von preventDefault() innerhalb des paste-Ereignis-Listeners, der mit dem Passworteingabeelement verknüpft ist:

let input = document.querySelector('input');

input.addEventListener('paste', (e) => {
  e.preventDefault(); // This is what prevents pasting.
});

Wenn Sie nur Einfüge-Ereignisse überwachen, um sie zu verhindern, entfernen Sie den gesamten Ereignis-Listener.

Ressourcen

Quellcode für die Prüfung Hindert Nutzer daran, Inhalte in Eingabefelder einzufügen