¿Cómo se desactiva la función de autocompletar del navegador en el campo del formulario web/etiqueta de entrada?

https://stackoverflow.com/questions/2530

08-06-2019
|

Pregunta

¿Cómo se desactiva? autocomplete en los principales navegadores para un tema específico input (o form field)?

Solución

Firefox 30 ignora autocomplete="off" para las contraseñas, optando por preguntarle al usuario si la contraseña debe almacenarse en el cliente.Tenga en cuenta lo 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.

De acuerdo con la Red de desarrolladores de Mozilla documentación, el atributo del elemento de formulario booleano autocomplete evita que los datos del formulario se almacenen en caché en navegadores más antiguos.

<input type="text" name="foo" autocomplete="off" />

Otros consejos

Además de 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é?Se agregaron muchos bancos y otros sitios web de "alta seguridad". autocomplete=off a sus 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 la función de autocompletar no funciona.

Hace mucho tiempo que 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/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 observa que hay 2 campos de contraseña y desactiva la función de autocompletar en este caso, suponiendo 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
Cromo 34, desafortunadamente, intentará autocompletar 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.

A veces incluso autocompletar = desactivado haría no impide llenar en las credenciales en campos incorrectos, pero no en el campo de usuario o apodo.

Esta solución alternativa se suma a la publicación de apinstein sobre el comportamiento del navegador.

corrige el autocompletado del navegador en modo de solo lectura y establece la opción de escritura en el foco (haga clic y tabule)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

Actualizar:Mobile Safari coloca el cursor en el campo, pero no muestra el teclado virtual.New Fix 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();  }" />

Demo en vivo https://jsfiddle.net/danielsuess/n0scguv6/

// Fin de actualización

¿Porque el navegador completa automáticamente las credenciales en el campo de texto incorrecto?

Noto este comportamiento extraño en Chrome y Safari, cuando hay campos de contraseña en la misma forma. 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 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.

La solución para Chrome es agregar autocomplete="new-password" al tipo de entrada contraseña.

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 completa automáticamente los datos si encuentra un cuadro de escriba contraseña, solo lo suficiente para indicar para esa casilla autocomplete = "new-password".

Esto funciona bien para mi.

Nota:asegúrate con F12 que tus cambios surtan efecto, muchas veces los navegadores guardan la página en caché, esto me dio una mala impresión de que no funcionó, pero en realidad el navegador no trajo los cambios.

Como han dicho otros, la respuesta es autocomplete="off"

Sin embargo, creo que vale la pena señalar por qué Es una buena idea usar esto en ciertos casos como algunas respuestas a esto y duplicar Las preguntas han sugerido que es mejor no apagarlo.

No se debe dejar en manos de los usuarios impedir que los navegadores almacenen números de tarjetas de crédito.Muchos usuarios ni siquiera se darán cuenta de que es un problema.

Es particularmente importante desactivarlo en los campos de códigos de seguridad de tarjetas de crédito.Como esta página estados:

"Nunca guardes el código de seguridad...su valor depende de la presunción de que la única forma de suministrarlo es leerlo en la tarjeta de crédito física, demostrando que la persona que lo suministra realmente posee la tarjeta."

El problema es que, si se trata de un ordenador público (cibercafé, biblioteca, etc.), es fácil para otros usuarios robar los datos de su tarjeta, e incluso en su propio ordenador un sitio web malicioso podría robar datos de autocompletar.

Tendría que discrepar con esas respuestas que dicen evitar deshabilitar la función de autocompletar.

Lo primero que debe mencionarse es que la función de autocompletar que no está explícitamente deshabilitada en los campos del formulario de inicio de sesión es una falla de PCI-DSS.Además, si la máquina local de un usuario se ve comprometida, un atacante puede obtener trivialmente los datos de autocompletar debido a que se almacenan sin cifrar.

Ciertamente existe un argumento a favor de la usabilidad, sin embargo, hay un equilibrio muy fino cuando se trata de qué campos del formulario deberían tener la función de autocompletar deshabilitada y cuáles no.

Tres opciones:Primero:

<input type='text' autocomplete='off' />

Segundo:

<form action='' autocomplete='off'>

Tercero (código javascript):

$('input').attr('autocomplete', 'off');

Resolví la lucha interminable con Google Chrome con el uso de caracteres aleatorios.Cuando siempre procesas el autocompletado con una cadena aleatoria, nunca recordará nada.

<input name="name" type="text" autocomplete="rutjfkde">

Espero que ayude a otras personas.

En una nota relacionada o en realidad, completamente opuesta:

"Si usted es el usuario del formulario mencionado anteriormente y desea volver a habilitar la funcionalidad de autocompletación, use el marcador 'Recuerde contraseña' de esto página de marcadores.Elimina todo autocomplete="off" atributos de todos los formularios de la página.¡Sigue peleando la buena pelea! "

En realidad usamos sasbLa idea de un sitio.Era una aplicación web de software médico para administrar un consultorio médico.Sin embargo, muchos de nuestros clientes eran cirujanos que utilizaban muchas estaciones de trabajo diferentes, incluidas terminales semipúblicas.Por lo tanto, querían asegurarse de que un médico que no comprende las implicaciones de las contraseñas guardadas automáticamente o que no presta atención no pueda dejar accidentalmente su información de inicio de sesión fácilmente accesible.Por supuesto, esto fue antes de la idea de la navegación privada que está empezando a aparecer en IE8, FF3.1, etc.Aun así, muchos médicos se ven obligados a utilizar navegadores de la vieja escuela en hospitales con TI que no cambia.

Entonces, hicimos que la página de inicio de sesión generara nombres de campos aleatorios que solo funcionarían para esa publicación.Sí, es menos conveniente, pero simplemente molesta al usuario por no almacenar información de inicio de sesión en terminales públicas.

Solo configura autocomplete="off".Hay una muy buena razón para hacer esto:¡Quieres proporcionar tu propia función de autocompletar!

He estado probando infinitas soluciones y luego encontré esto:

En lugar de autocomplete="off" simplemente simplemente usa autocomplete="false"

¡Tan simple como eso, y también funciona de maravilla en Google Chrome!

Creo autocomplete=off es compatible con HTML 5.

Pregúntate por qué quieres hacer esto; puede tener sentido en algunas situaciones, pero no lo hagas sólo por hacerlo.

Es menos conveniente para los usuarios y ni siquiera es un problema de seguridad en OS X (mencionado por Soren a continuación).Si le preocupa que a las personas les roben sus contraseñas de forma remota, un registrador de pulsaciones de teclas aún podría hacerlo aunque su aplicación utilice autcomplete=off.

Como usuario que elige que un navegador recuerde (la mayor parte) de mi información, me resultaría molesto si su sitio no recordara la mía.

Ninguna de las soluciones funcionó para mí en esta conversación.

Finalmente descubrí una solución HTML pura eso requiere sin javascript, funciona en navegadores modernos (excepto IE;tenía que haber al menos 1 captura, ¿verdad?) y no requiere que deshabilites la función de autocompletar para todo el formulario.

Simplemente desactive la función de autocompletar en el form y luego enciéndalo para cualquier input desea que funcione dentro del formulario.Por ejemplo:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

Era una forma no estándar de hacer esto (creo que Mozilla e Internet Explorer todavía lo admiten), pero alterar las expectativas de los usuarios es una mala idea.

Si el usuario ingresa los datos de su tarjeta de crédito en un formulario y luego deja que otra persona use ese navegador, no es de su incumbencia.:)

Esto funciona para mí.

<input name="pass" type="password" autocomplete="new-password" />

También podemos usar esta estrategia en otros controles como texto, selección, etc.

Un poco tarde para el juego... pero me encontré con este problema e intenté varias fallas, pero esta funciona para mí, encontrada en MDN

En algún caso, el navegador seguirá sugiriendo valores de autocompleto incluso si el atributo de autocompleto se establece en OFF.Este comportamiento inesperado puede ser bastante desconcertante para los desarrolladores.El truco para realmente forzar el no completado es asignar una cadena aleatoria al atributo así:

autocomplete="nope"

La mejor solucion:

Evite el autocompletado de nombre de usuario (o correo electrónico) y contraseña:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

Evitar autocompletar un campo:

<input type="text" name="field" autocomplete="nope">

Explicación:autocomplete continúa trabajando en <input>, autocomplete="off" No funciona, pero puedes cambiar. off a una cadena aleatoria, como nope.

Trabaja en:

Cromo:49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 y 64
Firefox:44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 y 58

Añadiendo el

autocomplete="off"

a la etiqueta del formulario deshabilitará el autocompletado del navegador (lo que se escribió previamente en ese campo) de todos input campos dentro de ese formulario en particular.

Probado en:

Firefox 3.5, 4 BETA
Internet Explorer 8
Cromo

Intenta agregar

readonly onfocus="this.removeAttribute('readonly');"

además de

autocompletar = "desactivado"

a las entradas que no desea recordar datos del formulario (username, password, etc.) como se muestra a continuación:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

Actualizar: A continuación se muestra un ejemplo completo basado en este enfoque que evita arrastrar y soltar, Copiar, pegar, etc.

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

Probado en las últimas versiones de los principales navegadores, es decir. Google Chrome, Mozilla Firefox, Microsoft Edge, etc.y funcionando sin ningún problema.Espero que esto ayude...

Utilice un nombre y una identificación no estándar para los campos, de modo que en lugar de "nombre", utilice "nombre_".Los navegadores entonces no lo verán como el campo de nombre.La mejor parte de esto es que puede hacer esto en algunos campos, pero no en todos, y se completarán automáticamente algunos, pero no todos.

Para evitar el XHTML no válido, puede configurar este atributo usando javascript.Ejemplo usando jQuery:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

El problema es que los usuarios sin JavaScript obtendrán la función de autocompletar.

Añadiendo autocomplete="off" no va a ser suficiente.

Cambiar el atributo de tipo de entrada a type="search".
Google no aplica el autocompletar a las entradas con un tipo de búsqueda.

prueba estos también si solo autocomplete="off" no funciona:

autocorrect="off" autocapitalize="off" autocomplete="off"

No puedo creer que esto siga siendo un problema tanto tiempo después de que se informó.Las soluciones anteriores no funcionaron para mí, ya que Safari parecía saber cuándo el elemento no se mostraba o estaba fuera de la pantalla; sin embargo, lo siguiente sí funcionó para mí:

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

¡Espero que sea útil para alguien!

Este es un problema de seguridad que los navegadores ahora ignoran.Los navegadores identifican y almacenan contenido utilizando nombres de entrada, incluso si los desarrolladores consideran que la información es confidencial y no debe almacenarse.Hacer que un nombre de entrada sea diferente entre 2 solicitudes resolverá el problema (pero aún se guardará en la memoria caché del navegador y también aumentará la memoria caché del navegador).Pedir al usuario que active o desactive opciones en la configuración de su navegador no es una buena solución.El problema se puede solucionar en el backend.

Aquí está mi solución.Un enfoque que he implementado en mi marco.Todos los elementos de autocompletar se generan con una entrada oculta como esta:

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

Luego, el servidor procesa variables de publicación como esta:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

Se puede acceder al valor como de costumbre.

var_dump($_POST['username']);

Y el navegador no podrá sugerir información de la solicitud anterior ni de usuarios anteriores.

Todo funciona de maravilla, incluso si los navegadores se actualizan, quieran ignorar el autocompletado o no.Esa ha sido la mejor manera de solucionar el problema para mí.

Ninguno de los trucos mencionados aquí funcionó para mí en Chrome.Hay una discusión sobre el tema aquí: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Agregando esto dentro de un <form> funciona (al menos por ahora):

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Así que aquí está:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow