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

Certains sites Web affirment qu'autoriser les utilisateurs à coller leurs mots de passe réduit la sécurité. Cependant, 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 mots de passe chaque fois que les utilisateurs doivent se connecter. Cette approche est généralement plus sûre que de forcer les utilisateurs à saisir des mots de passe suffisamment courts pour être mémorisés.

En général, les utilisateurs ne doivent pas être empêchés de coller dans les éléments <input>.

Échec de cet audit Lighthouse

Lighthouse indique le code qui empêche les utilisateurs de coller du code dans des 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 qu'un gestionnaire d'événements personnalisé n'a pas empêché l'événement paste.

Il est également possible d'empêcher le collage en dehors d'un écouteur d'événements paste. Lighthouse ne détecte pas ce scénario.

Remarque:Chaque audit des bonnes pratiques est pondéré de manière égale dans le score des bonnes pratiques Lighthouse. Pour en savoir plus, consultez le score des bonnes pratiques.

Activer le collage dans les champs de mot de passe

Identifier 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 le champ de mot de passe de votre page.
5. Les outils de développement doivent s'arrêter sur la première ligne de code dans l'écouteur d'événements paste correspondant.

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 coller des événements pour les préempter, supprimez l'intégralité de l'écouteur d'événements.

Ressources

Code source pour l'audit Empêcher les utilisateurs de coller du contenu dans les champs de saisie