Tipo de entrada = contraseña, no permita que el navegador recuerde la contraseña

101

Recuerdo haber visto una forma de tener una <input type="password" />tal que el navegador no le pedirá al usuario que guarde la contraseña. Pero me estoy quedando en blanco. ¿Existe un atributo HTML o algún truco de JavaScript que haga esto?

DavGarcia
fuente
4
Duplicado de stackoverflow.com/questions/32369/…
Jon Skeet

Respuestas:

123

Intente usar autocomplete="off". Sin embargo, no estoy seguro de si todos los navegadores lo admiten. Documentos de MSDN aquí .

EDITAR : Nota: la mayoría de los navegadores han dejado de admitir este atributo. Consulte ¿Es autocomplete = "off" compatible con todos los navegadores modernos?

Podría decirse que esto es algo que debería dejarse en manos del usuario y no del diseñador del sitio web.

tvanfosson
fuente
2
También puede entregar la página con HTTPS y mediante el encabezado HTTP o la etiqueta META evitar el almacenamiento en caché. De esa forma, la contraseña tampoco se almacenará (al menos en Internet Explorer).
doekman
En cuanto a la validación, HTML5 agrega el atributo de autocompletar a la especificación, por lo que ahora está bien
VictorySaber
9
Nota para los futuros lectores: todos los principales navegadores se están moviendo hacia ignorar el atributo. (ver stackoverflow.com/a/21348793/37706 )
rdans
@RyanDansie gracias por señalar eso. Actualicé la respuesta. La vieja respuesta es ... vieja.
tvanfosson
8
"Podría decirse que esto es algo que debería dejarse en manos del usuario y no del diseñador del sitio web". existen razones técnicas y no técnicas para tener esto. Las contraseñas de un solo uso no deben recordarse, por ejemplo. Los sitios bancarios con "ingrese el primer dígito de su PIN" es otro. No olvide que un analista de negocios puede decidir que quiere un campo de contraseña y eliminar la opción del desarrollador.
Sprague
61

<input type="password" autocomplete="off" />

Solo me gustaría agregar que, como usuario, creo que esto es muy molesto y complicado de superar. Recomiendo encarecidamente no usar esto, ya que es muy probable que agrave a sus usuarios.

Las contraseñas ya no están almacenadas en la MRU y las máquinas públicas configuradas correctamente ni siquiera guardarán el nombre de usuario.

matpie
fuente
23
+1 para "no molestes a tus usuarios". Eso es exactamente lo que hace este tipo de función. Al igual que los sitios que fuerzan el almacenamiento en caché, el botón Atrás borra el formulario. EXTREMADAMENTE irritante.
cletus
6
+1 Estoy completamente de acuerdo. Es para una página de perfil de cliente de edición de administrador donde solo ingresa una contraseña si tiene la intención de cambiarla. De esa forma, los administradores no cambian la contraseña cada vez que van a editar la información del cliente.
DavGarcia
14
Es muy útil para los campos de números de tarjetas de crédito. El formulario de PayPal se almacena en todos los navegadores, y cualquier persona que use su computadora puede volver a ingresar todos los datos, por lo que debe ir y eliminar manualmente todos los campos recordados.
Egor Pavlikhin
31
En un formulario en el que el usuario puede establecer una contraseña que no tiene nada que ver con su inicio de sesión, habilitar el autocompletado es en realidad la opción más molesta: el navegador puede ofrecer guardar una contraseña con la que en realidad no puede hacer nada. Además, si la seguridad es un tema delicado, no asumiría que todas las máquinas públicas están configuradas correctamente.
Jrb
3
Estoy usando esto para una contraseña de uso único. Como dijo jrb, sería muy molesto si el navegador lo almacenara.
Danation
12

Resolví de otra manera. Puedes probar esto.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

#de otra manera

 <script type="text/javascript">    
 function setAutoCompleteOFF(tm){
    if(typeof tm =="undefined"){tm=10;}
    try{
    var inputs=$(".auto-complete-off,input[autocomplete=off]"); 
    setTimeout(function(){
        inputs.each(function(){     
            var old_value=$(this).attr("value");            
            var thisobj=$(this);            
            setTimeout(function(){  
                thisobj.removeClass("auto-complete-off").addClass("auto-complete-off-processed");
                thisobj.val(old_value);
            },tm);
         });
     },tm); 
    }catch(e){}
  }
 $(function(){                                              
        setAutoCompleteOFF();
    });
</script>

// necesita agregar el atributo autocomplete = "off" o puede agregar class .auto-complete-off en el cuadro de entrada y disfrutar

Ejemplo:

  <input id="passfld" type="password" autocomplete="off" />
    OR
  <input id="passfld" class="auto-complete-off" type="password"  />
Sarwar Hasan
fuente
4
Esto evita que el navegador almacene la contraseña en lugar de evitar el autocompletado, que es una mejor solución en mi escenario.
Pau Fracés
Gracias, funcionó para mí en la última versión de Chrome. Nota: se usa en un sistema interno donde solo se permite Chrome, haga más pruebas si se usa en el sitio de producción.
Izion
@AntoVinish, espero que mi última solución funcione en firefox 40.
Sarwar Hasan
7

Intenté lo siguiente y parece que funciona en cualquier navegador:

<input id="passfld" type="text" autocomplete="off" />

<script type="text/javascript">
    $(function(){  
        var passElem = $("input#passfld");
        passElem.focus(function() { 
            passElem.prop("type", "password");                                             
        });
    });
</script>

De esta manera es mucho más seguro que usar técnicas de tiempo de espera, porque garantiza que el campo de entrada cederá a la contraseña cuando el usuario la enfoque.

Apostolidis
fuente
5

En cuanto a los problemas de seguridad, esto es lo que un consultor de seguridad le dirá sobre todo el tema de campo (esto es de una auditoría de seguridad independiente real):

Autocompletar HTML habilitado: los campos de contraseña en los formularios HTML tienen habilitado el autocompletado. La mayoría de los navegadores tienen la posibilidad de recordar las credenciales de usuario ingresadas en formularios HTML.

Riesgo relativo: bajo

Sistemas / dispositivos afectados: o https: // * ** * *** /

También estoy de acuerdo en que esto debería cubrir cualquier campo que contenga datos verdaderamente privados. Siento que está bien obligar a una persona a que siempre escriba la información de su tarjeta de crédito, código CVC, contraseñas, nombres de usuario, etc. siempre que ese sitio acceda a algo que deba mantenerse seguro [universalmente o por requisitos de cumplimiento legal]. Por ejemplo: formularios de compra, sitios bancarios / de crédito, sitios de impuestos, datos médicos, federales, nucleares, etc., no sitios como Stack Overflow o Facebook.

Otros tipos de sitios, por ejemplo, TimeStar Online para registrar la entrada y la salida del trabajo, es estúpido, ya que siempre uso la misma PC / cuenta en el trabajo, que no puedo guardar las credenciales en ese sitio, por extraño que parezca, puedo hacerlo en mi Android pero no en un iPad. Incluso en PC compartidas, esto no sería tan malo, ya que marcar la entrada / salida de otra persona realmente no hace nada más que molestar a su supervisor. (Deben ingresar y eliminar los golpes erróneos, simplemente elija no guardar en PC públicas).

Miguel
fuente
5
Simplemente agregue un comentario aquí por una razón por la que no desea guardar una contraseña. Mantengo un sitio web con cuentas de usuario donde los administradores pueden cambiar la contraseña de un usuario. Actualmente, el cliente está enfurecido porque Chrome ofrece guardar la contraseña ingresada en el formulario de "cambio de contraseña" cada vez para cada usuario , porque identifica erróneamente el formulario de edición de usuario como un formulario de inicio de sesión. Dar instrucciones simples como "simplemente haga clic en Nunca recordar contraseña" está más allá de ellos, aparentemente.
CharedUtensil
5
<input type="password" placeholder="Enter New Password" autocomplete="new-password">

Aqui tienes.

Bhaumik Thakkar
fuente
2
Este ES el camino, existen muchas soluciones alternativas, y es tan simple como esto, probado con la última versión de Firefox (v67) y Chrome (75).
Mariano Ruiz
Chrome 80 seguirá ofreciendo recordar la contraseña después de enviar el formulario.
Bouke
4

¡Aquí está la mejor respuesta y la más fácil! Coloque un campo de contraseña adicional delante de su inputcampo y configure el display:none, de modo que cuando el navegador lo complete, lo haga de una manera inputque no le interese.

Cambia esto:

<input type="password" name="password" size="25" class="input" id="password" value="">

a esto:

<input type="password" style="display:none;">
<input type="password" name="password" size="25" class="input" id="password" value="">
Capitán Fantástico
fuente
En realidad, funciona si hay 2 campos de contraseña en el formulario, pero el nuevo navegador ignora la segunda contraseña si no está visible y habilitada; (
Cedric Simon
1
El uso display:noneno me funciona (Chrome 61 OSX), pero esto sí:<input type="password" style="position: absolute; top: -1000px;">
John Hascall
2

Lea también esta respuesta donde está usando esta solución fácil que funciona en todas partes (consulte también la solución para Safari móvil):

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

Puede usar JQuery, seleccione el elemento por id:

$("input#Password").attr("autocomplete","off");

O seleccione el artículo por tipo:

$("input[type='password']").attr("autocomplete","off");

O también:

Puede usar Javascript puro:

document.getElementById('Password').autocomplete = 'off';
Fernando
fuente
1

también puedes usarlo como sigue

$('#Password').attr("autocomplete", "off");
setTimeout('$("#Password").val("");', 2000);
Chandrika Prajapati
fuente
1

dado que autocomplete = off está en desuso, sugiero una solución más reciente.

Establezca su campo de contraseña en un campo de texto normal y enmascare su entrada con "discos" usando CSS. el código debería verse así:

<input type="text" class="myPassword" /> 

input .myPassword{
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

Tenga en cuenta que es posible que esto no funcione correctamente en los navegadores Firefox y que se necesita un recorrido adicional. Lea más sobre esto aquí: https://stackoverflow.com/a/49304708/5477548 .

La solución se tomó de este enlace , pero para cumplir con SO "no-hotlinks" la resumí aquí.

yoad w
fuente
0

En el caso de la mayoría de los principales navegadores, tener una entrada fuera de y no conectado a ningún formulario engaña al navegador haciéndole creer que no hubo envío. En este caso, tendría que utilizar la validación JS pura para su inicio de sesión y también sería necesario el cifrado de sus contraseñas.

Antes de:

<form action="..."><input type="password"/></form>

Después:

<input type="password"/>
Cannicida
fuente
1
Por cierto, este es un truco que probablemente no deberías usar. Al no utilizar una etiqueta de formulario, su código se convierte en HTML4 de forma predeterminada y dificulta la validación de las cuentas de sus usuarios.
Cannicide
0

Encontré los siguientes trabajos en Firefox y Chrome.

<form ... > <!-- more stuff -->
<input name="person" type="text" size=30 value="">
<input name="mypswd" type="password" size=6 value="" autocomplete="off">
<input name="userid" type="text" value="security" style="display:none">
<input name="passwd" type="password" value="faker" style="display:none">
<!-- more stuff --> </form>

Todos estos están dentro de la sección de formularios. "person" y "mypswd" es lo que desea, pero el navegador guardará "userid" y "passwd" una vez, y nunca más, ya que no cambian. Puede eliminar el campo "persona" si realmente no lo necesita. En ese caso, todo lo que desea es el campo "mypswd", que podría cambiar de alguna manera conocida por el usuario de su página web.

Dick Guertin
fuente
0

La única forma en que puedo hacer que Firefox, Edge e Internet Explorer desactiven el autocompletado es agregar autocomplete = "false" en mi declaración de formulario como:

  <form action="postingpage.php" autocomplete="false" method="post">

y tengo que agregar el autocomplete = "off" a la entrada de mi formulario y cambiar el tipo a texto Me gusta:

     <input type="text" autocomplete="off">

Parece que este código html debe estandarizarse con los navegadores. el formulario type = password debe revisarse para que anule la configuración del navegador. El único problema que tengo es que perdí mi máscara de entrada. Pero en el lado positivo, el molesto "este sitio no es seguro" no aparece en Firefox.

para mí, no es un gran problema ya que el usuario ya está autenticado y es mi parte de cambio de nombre de usuario y contraseña

drtechno
fuente
2
NO HAGAS ESTO. Los datos se seguirán enviando en texto plano a través de la red, que es todo el problema con HTTP (no HTTPS) en primer lugar, de ahí su mensaje de advertencia "molesto". No importa que el usuario ya esté autenticado porque un hombre en el medio aún puede ver los datos de texto sin formato y el registro del lado del servidor puede configurarse de manera diferente (podría almacenar los encabezados de solicitud, mientras que hay otros problemas en conjunto si hubiera almacenado POST datos en HTTPS).
Jacob
https cifra el tráfico. Si está usando esto como parte de una aplicación de Internet que es pública, hágalo de todos modos. El método de publicación evita los marcadores, y los iframes múltiples de código php dentro de un HTML evitan la inyección de URL. Técnicamente, se supone que debe ingresar su ruta completa. Si está implementando, recomendaría cargar una variable $ _SESSION con la URL base que está escrita en texto en lugar de mirar las variables $ _SERVER. $ _SERVER ['HTTP_HOST'] y $ _SERVER ['PHP_SELF'] solo deben usarse en entornos no públicos porque ambos tienen varios exploits.
drtechno
Por cierto, mi ejemplo es para sistemas cerrados que no están conectados a Internet de ninguna manera
drtechno
nadie ha mencionado el uso de un esquema de cifrado ejecutado con "java onclick" y luego envíe el formulario después de la rutina de cifrado.
drtechno