Hindert Nutzer daran, Inhalte in Eingabefelder einzufügen

Einige Websites behaupten, dass das Einfügen von Passwörtern für Nutzer weniger Sicherheit bietet. Das Einfügen von Passwörtern verbessert jedoch die Sicherheit, da die Verwendung von Passwortmanagern ermöglicht wird.

Passwortmanager generieren in der Regel starke Passwörter für Nutzer, speichern sie an einem sicheren Ort und fügen sie dann automatisch in Passwortfelder ein, wenn sich Nutzer anmelden müssen. Dieser Ansatz ist im Allgemeinen sicherer, als Nutzer zu zwingen, Passwörter einzugeben, die so kurz sind, dass sie sich sie merken können.

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

So schlägt diese Lighthouse-Prüfung fehl

Lighthouse kennzeichnet Code, der verhindert, dass Nutzer Inhalte in nicht schreibgeschützte Eingabefelder einfügen:

In der Lighthouse-Prüfung wird angezeigt, dass Nutzer etwas auf der Seite nicht in ein Passwortfeld einfügen können

Lighthouse erfasst alle nicht schreibgeschützten <input>-Elemente, fügt Text in jedes Element ein und überprüft dann, ob das paste-Ereignis nicht durch einen benutzerdefinierten Event-Handler verhindert wurde.

Das Einfügen außerhalb eines paste-Event-Listeners kann auch verhindert werden. Lighthouse erkennt dieses Szenario nicht.

So aktivieren Sie das Einfügen in Passwortfelder

Code finden, der das Einfügen verhindert

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

  1. Maximieren Sie den Bereich Ereignis-Listener-Haltepunkte.
  2. Maximieren Sie die Liste Zwischenablage.
  3. Klicken Sie das Kästchen paste an.
  4. Fügen Sie Text in ein Passwortfeld auf Ihrer Seite ein.
  5. Die Entwicklertools sollten in der ersten Codezeile im relevanten paste-Event-Listener pausieren.

Entfernen Sie den Code, der das Einfügen verhindert.

Die Ursache des Problems ist häufig ein Aufruf von preventDefault() im Event-Listener paste, der dem Passworteingabeelement zugeordnet ist:

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

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

Wenn Sie nur auf das Einfügen von Ereignissen warten möchten, um diese vorzeitig zu beenden, entfernen Sie den gesamten Event-Listener.

Ressourcen

Quellcode für die Prüfung Verhindert, dass Nutzer Inhalte in Eingabefelder einfügen