¿Cómo se desactiva el autocompletado del navegador en el campo del formulario web/etiquetas de entrada?
¿Cómo se desactiva la función de autocompletar en los principales navegadores para una entrada específica (o campo de formulario)?
Firefox 30 ignora autocomplete="off"las contraseñas y opta por preguntar al usuario si la contraseña debe almacenarse en el cliente. Tenga en cuenta el siguiente comentario del 5 de mayo de 2014:
- El administrador de contraseñas siempre le pregunta si quiere guardar una contraseña. Las contraseñas no se guardan sin el permiso del usuario.
- Somos el tercer navegador en implementar este cambio, después de IE y Chrome.
Según la documentación de Mozilla Developer Network , el atributo del elemento de formulario booleano autocompleteevita que los datos del formulario se almacenen en caché en navegadores más antiguos.
<input type="text" name="foo" autocomplete="off" />
Además de configurar autocomplete=off, también puede hacer que los nombres de los campos de su formulario sean aleatorios según el código que genera la página, tal vez agregando alguna cadena específica de la sesión al final de los nombres.
Cuando se envía el formulario, puede quitar esa parte antes de procesarla en el lado del servidor. Esto evitaría que el navegador web encuentre contexto para su campo y también podría ayudar a prevenir ataques XSRF porque un atacante no podría adivinar los nombres de los campos para el envío de un formulario.
La mayoría de los principales navegadores y administradores de contraseñas (correctamente, en mi humilde opinión) ahora ignoran autocomplete=off.
¿Por qué? Muchos bancos y otros sitios web de "alta seguridad" agregaron autocomplete=offsus páginas de inicio de sesión "por motivos de seguridad", pero esto en realidad disminuye la seguridad ya que hace que las personas cambien las contraseñas en estos sitios de alta seguridad para que sean fáciles de recordar (y por lo tanto descifrar) ya que se completa automáticamente. estaba rota.
Hace mucho tiempo, la mayoría de los administradores de contraseñas comenzaron a ignorar autocomplete=off, y ahora los navegadores están comenzando a hacer lo mismo solo para las entradas de nombre de usuario y contraseña.
Desafortunadamente, los errores en las implementaciones de autocompletar insertan información de nombre de usuario y/o contraseña en campos de formulario inapropiados, lo que provoca errores de validación del formulario o, peor aún, inserta accidentalmente nombres de usuario en campos que el usuario dejó intencionalmente en blanco.
¿Qué debe hacer un desarrollador web?
- Si puede mantener todos los campos de contraseña en una página por sí solos, es un gran comienzo, ya que parece que la presencia de un campo de contraseña es el principal desencadenante para que se active el autocompletado de usuario/contraseña. De lo contrario, lea los consejos a continuación.
- Safari nota que hay 2 campos de contraseña y desactiva la función de autocompletar en este caso, asumiendo que debe ser un formulario de cambio de contraseña, no un formulario de inicio de sesión. Así que asegúrese de utilizar 2 campos de contraseña (nueva y confirmar nueva) para cualquier formulario en el que permita
Desafortunadamente, Chrome 34 intentará completar automáticamente los campos con usuario/contraseña cada vez que vea un campo de contraseña. Este es un error bastante grave que, con suerte, cambiará el comportamiento de Safari. Sin embargo, agregar esto en la parte superior de su formulario parece deshabilitar el autocompletar de contraseña:
<input type="text" style="display:none"> <input type="password" style="display:none">
Todavía no he investigado a fondo IE o Firefox, pero estaré encantado de actualizar la respuesta si otros tienen información en los comentarios.
La solución para Chrome es agregar autocomplete="new-password"al tipo de entrada contraseña. Por favor consulte el siguiente ejemplo.
Ejemplo:
<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>
Chrome siempre autocompleta los datos si encuentra un cuadro de tipo contraseña , solo lo suficiente para indicarlo en ese cuadro autocomplete = "new-password".
Esto funciona bien para mi.
Nota: asegúrese de F12que sus cambios surtan efecto. Muchas veces los navegadores guardan la página en el caché, y esto me dio la mala impresión de que no funcionaba, pero en realidad el navegador no traía los cambios.
A veces, incluso autocompletar=off no impediría completar las credenciales en los campos incorrectos, pero no en un campo de usuario o apodo.
Esta solución alternativa se suma a la publicación de apinstein sobre el comportamiento del navegador.
Se corrige el autocompletado del navegador en modo de solo lectura y se establece la opción de escritura en el foco (haga clic y tabule)
<input type="password" readonly
onfocus="this.removeAttribute('readonly');"
onblur="this.setAttribute('readonly', true);"/>
Actualizar:
Mobile Safari coloca el cursor en el campo, pero no muestra el teclado virtual. La nueva solución funciona como antes, pero maneja el teclado virtual:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
Demostración en vivo https://jsfiddle.net/danielsuess/n0scguv6/
// Fin de actualización
¿Porque el navegador completa automáticamente las credenciales en un campo de texto incorrecto?
Noto este comportamiento extraño en Chrome y Safari, cuando hay campos de contraseña en el mismo formulario. Supongo que el navegador busca un campo de contraseña para insertar sus credenciales guardadas. Luego completa automáticamente (solo adivinando debido a la observación) el campo de entrada de texto más cercano, que aparece antes del campo de contraseña en el DOM. Como el navegador es la última instancia y no puedes controlarlo.
Esta solución de solo lectura anterior funcionó para mí.
<form name="form1" id="form1" method="post"
autocomplete="off" action="http://www.example.com/form.cgi">
Esto funcionará en Internet Explorer y Mozilla Firefox. La desventaja es que no es el estándar XHTML.
