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, luego, las pegan automáticamente en los campos de contraseña 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>.

Por qué 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:

La auditoría de Lighthouse muestra que la página impide que los usuarios peguen contenido en un campo de contraseña

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 rápidamente 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 Evita que los usuarios peguen contenido en los campos de entrada