Empêche les utilisateurs de coller du texte dans les champs de saisie.

Certains sites Web affirment que permettre aux utilisateurs de coller des mots de passe réduit la sécurité. Toutefois, le collage de mots de passe améliore la sécurité, car il permet d'utiliser des gestionnaires de mots de passe.

Les gestionnaires de mots de passe génèrent généralement des mots de passe sécurisés pour les utilisateurs, les stockent de manière sécurisée, puis les collent automatiquement dans les champs de mot de passe chaque fois que les utilisateurs doivent se connecter. Cette approche est généralement plus sécurisée que de forcer les utilisateurs à saisir des mots de passe suffisamment courts pour être mémorisés.

En règle générale, les utilisateurs ne doivent pas être empêchés de coller du contenu dans des éléments <input>.

Pourquoi cet audit Lighthouse échoue-t-il ?

Lighthouse signale le code qui empêche les utilisateurs de coller du texte dans les champs de saisie non en lecture seule:

Lighthouse rassemble tous les éléments <input> non en lecture seule, colle du texte dans chaque élément, puis vérifie que l'événement paste n'a pas été empêché par un gestionnaire d'événements personnalisé.

Vous pouvez également empêcher le collage en dehors d'un écouteur d'événement paste. Lighthouse ne détecte pas ce scénario.

Activer le collage dans les champs de mot de passe

Trouver le code qui empêche le collage

Pour trouver et inspecter rapidement le code qui empêche le collage:

1. Développez le volet Points d'arrêt de l'écouteur d'événements.
2. Développez la liste Presse-papiers.
3. Cochez la case paste.
4. Collez du texte dans un champ de mot de passe de votre page.
5. DevTools doit s'arrêter sur la première ligne de code dans l'écouteur d'événement paste approprié.

Supprimez le code qui empêche le collage.

La source du problème est souvent un appel à preventDefault() dans l'écouteur d'événements paste associé à l'élément de saisie du mot de passe:

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

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

Si vous n'écoutez que les événements de collage pour les devancer, supprimez l'ensemble de l'écouteur d'événements.

Ressources

Code source de l'audit Empêche les utilisateurs de coller du texte dans les champs de saisie