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.

Los administradores de contraseñas suelen generar contraseñas seguras para los usuarios, almacenarlos de forma segura y pegarlos automáticamente en los campos de contraseñas cada vez que los usuarios deban acceder. Por lo general, este enfoque es más segura que obligar a los usuarios a escribir contraseñas que son lo suficientemente cortas para recordar.

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 impide 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 texto en cada uno de ellos y, luego, verifica que un controlador de eventos personalizado no haya impedido el evento paste.

También es posible evitar el pegado 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

Busca el código que impide el pegado

Para encontrar e inspeccionar con rapidez el código que impide el pegado, 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. DevTools debería detenerse en la primera línea de código del objeto de escucha de eventos paste relevante.

Quita el código que impide el pegado

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

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

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

Si solo escuchas eventos de pegado para anularlos, 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