Impide que los usuarios peguen contenido en los campos de entrada

Algunos sitios web afirman que permitir que los usuarios peguen contraseñas reduce la seguridad. Sin embargo, pegar contraseñas en realidad mejora la seguridad porque permite el uso de administradores de contraseñas.

Por lo general, los administradores de contraseñas generan contraseñas seguras para los usuarios, las almacenan de forma segura y las pegan automáticamente en los campos de contraseñas cada vez que los usuarios necesitan acceder. Por lo general, este enfoque es más seguro que obligar a los usuarios a escribir contraseñas lo suficientemente cortas como para recordarlas.

En general, no se debe impedir que los usuarios peguen contenido en elementos <input>.

Cómo falla esta auditoría de Lighthouse

Lighthouse marca el código que evita que los usuarios peguen contenido en campos de entrada que no son de solo lectura:

Lighthouse recopila todos los elementos <input> que no son de solo lectura, pega parte del texto en cada elemento y, luego, verifica que un controlador de eventos personalizado no haya evitado el evento paste.

También es posible evitar que se pegue contenido fuera de un objeto de escucha de eventos paste. Lighthouse no detecta esa situación.

Cómo habilitar el pegado en campos de contraseña

Cómo encontrar el código que impide que se pegue contenido

Para buscar e inspeccionar rápidamente el código que impide que se pegue el código, haz lo siguiente:

1. Expande el panel Event Listener Breakpoints.
2. Expande la lista Portapapeles.
3. Selecciona la casilla de verificación paste.
4. Pega texto en un campo de contraseña de tu página.
5. Las Herramientas para desarrolladores deben hacer una pausa en la primera línea de código del objeto de escucha de eventos paste relevante.

Quita el código que impide que se pegue contenido

A menudo, la fuente del problema es una llamada a preventDefault() dentro del objeto de escucha de eventos paste que está asociado con el elemento de entrada de la contraseña:

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

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

Si solo escuchas pegar eventos para interrumpirlos, quita todo el objeto de escucha de eventos.

Recursos

Código fuente de la auditoría Impide que los usuarios peguen contenido en los campos de entrada