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:
![La auditoría de Lighthouse muestra que la página impide que los usuarios peguen contenido en un campo de contraseña](https://developer.chrome.com/static/docs/lighthouse/best-practices/paste-preventing-inputs/image/lighthouse-audit-shows-pa-37a53608e65b1.png?authuser=7&hl=es)
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:
- Expande el panel Event Listener Breakpoints.
- Expande la lista Portapapeles.
- Selecciona la casilla de verificación
paste
. - Pega texto en un campo de contraseña de tu página.
- 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