html - img - Cómo evitar que un navegador almacene contraseña

title html css

Question

Necesito evitar que los navegadores almacenen los valores de nombre de usuario y contraseña, porque estoy trabajando en una aplicación web que contiene datos más seguros. Mi cliente me pidió que hiciera esto.

autocomplete="off" atributo autocomplete="off" en los campos de formulario y contraseña HTML. Pero no está funcionando en los últimos navegadores como Chrome 55, Firefox 38+, IE 11 ... etc.

¿Cuál es la mejor solución para esto?

Answer 1

Aquí hay una solución HTML / CSS pura para Chrome probada en la versión 65.0.3325.162 (compilación oficial) (64 bits) .

Establezca el type="text" entrada type="text" y use CSS text-security:disc para imitar el type="password" .

<input type="text" name="username">
<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;">

• Nota: Funciona en FireFox pero CSS moz-text-security está obsoleto / eliminado. Para solucionar esto, cree una font-face CSS hecha solo de puntos y use font-family: ''dotsfont''; .

  Fuente: Obtenga el tipo de entrada = texto para que parezca tipo = contraseña

  La Fuente de arriba contiene un enlace a una -webkit-text-security propiedad CSS moz-text-security y -webkit-text-security .

  Fuente: https://github.com/kylewelsby/dotsfont

  Hasta donde he probado, esta solución funciona para Chrome , FireFox versión 59.0 (64 bits) , IE versión 11.0.9600 y los emuladores IE ie5 y superiores.

Answer 2

Creo que no es posible en los últimos navegadores. La única manera de hacerlo es tomar otro campo de contraseña oculta y usarlo para su lógica después de tomar el valor del campo de contraseña visible al enviar y colocar una cadena de relleno en el campo de contraseña visible. En este caso, el navegador puede almacenar una cadena ficticia en lugar de una contraseña real.

Answer 3

Debes poder crear una contraseña falsa para evitarlo.

<form>
  <div style="display:none">
    <input type="password" tabindex="-1"/>
  </div>
  <input type="text" name="username" placeholder="username"/>
  <input type="password" name="password" placeholder="password"/>
</form>

Answer 4

Esto no es posible en los navegadores modernos, y por una buena razón. Los navegadores modernos ofrecen administradores de contraseñas, que permiten a los usuarios usar contraseñas más seguras de lo normal.

Como lo explicó MDN: Cómo desactivar el autocompletado de formularios :

Los navegadores modernos implementan la administración de contraseñas integrada: cuando el usuario ingresa un nombre de usuario y contraseña para un sitio, el navegador ofrece recordarlos para el usuario. Cuando el usuario visita el sitio nuevamente, el navegador completa automáticamente los campos de inicio de sesión con los valores almacenados.

Además, el navegador permite al usuario elegir una contraseña maestra que utilizará para cifrar los datos de inicio de sesión almacenados.

Incluso sin una contraseña maestra, la administración de contraseñas en el navegador generalmente se considera una ganancia neta para la seguridad . Dado que los usuarios no tienen que recordar las contraseñas que el navegador almacena para ellos, pueden elegir contraseñas más seguras de lo que lo harían de otra manera.

Por esta razón, muchos navegadores modernos no admiten autocomplete="off" para los campos de inicio de sesión:

• Si un sitio establece autocomplete="off" para un formulario, y el formulario incluye campos de ingreso de nombre de usuario y contraseña, entonces el navegador aún ofrecerá recordar este inicio de sesión, y si el usuario está de acuerdo, el navegador llenará automáticamente esos campos la próxima vez que El usuario visita la página.

• Si un sitio configura autocomplete="off" para los campos de ingreso de nombre de usuario y contraseña, el navegador aún ofrecerá recordar este inicio de sesión, y si el usuario está de acuerdo, el navegador llenará automáticamente esos campos la próxima vez que el usuario visite la página.

Este es el comportamiento en Firefox (desde la versión 38), Google Chrome (desde el 34) e Internet Explorer (desde la versión 11).

Si un autor desea evitar el autocompletado de los campos de contraseña en las páginas de administración de usuarios donde un usuario puede especificar una nueva contraseña para otra persona, se debe especificar autocomplete="new-password" , aunque el soporte para esto no se ha implementado en todos los navegadores todavía.

Answer 5

Gracias por darme una respuesta. Seguí el siguiente enlace

Deshabilitar la funcionalidad ''Guardar contraseña'' del navegador

onfocus="this.removeAttribute(''readonly'');" el problema simplemente agregando readonly & onfocus="this.removeAttribute(''readonly'');" atributos además de autocomplete="off" a las entradas 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'');" >

Esto está funcionando bien para mí.

Answer 6

Necesité esto hace un par de años para una situación específica: dos personas que conocen sus contraseñas de red acceden a la misma máquina al mismo tiempo para firmar un acuerdo legal. No desea que se guarde ninguna de las dos contraseñas en esa situación porque guardar una contraseña es un problema legal, no técnico, donde la presencia física y temporal de ambas personas es obligatoria. Ahora, estoy de acuerdo en que esta es una situación rara, pero tales situaciones existen y los administradores de contraseñas incorporados en los navegadores web no son útiles.

Mi solución técnica a lo anterior fue cambiar entre la password y text tipos de text y hacer que el color de fondo coincida con el color del texto cuando el campo es un campo de texto sin formato (por lo tanto, se sigue ocultando la contraseña). Los navegadores no solicitan guardar contraseñas que se almacenan en campos de texto sin formato.

plugin jQuery:

https://github.com/cubiclesoft/php-flexforms-modules/blob/master/password-manager/jquery.stoppasswordmanager.js

Código fuente relevante del enlace anterior:

(function($) {
$.fn.StopPasswordManager = function() {
    return this.each(function() {
        var $this = $(this);

        $this.addClass(''no-print'');
        $this.attr(''data-background-color'', $this.css(''background-color''));
        $this.css(''background-color'', $this.css(''color''));
        $this.attr(''type'', ''text'');
        $this.attr(''autocomplete'', ''off'');

        $this.focus(function() {
            $this.attr(''type'', ''password'');
            $this.css(''background-color'', $this.attr(''data-background-color''));
        });

        $this.blur(function() {
            $this.css(''background-color'', $this.css(''color''));
            $this.attr(''type'', ''text'');
            $this[0].selectionStart = $this[0].selectionEnd;
        });

        $this.on(''keydown'', function(e) {
            if (e.keyCode == 13)
            {
                $this.css(''background-color'', $this.css(''color''));
                $this.attr(''type'', ''text'');
                $this[0].selectionStart = $this[0].selectionEnd;
            }
        });
    });
}
}(jQuery));

Manifestación:

https://barebonescms.com/demos/admin_pack/admin.php

Haga clic en "Agregar entrada" en el menú y luego desplácese hasta la parte inferior de la página hasta "Módulo: detener el administrador de contraseñas".

Answer 7

Puede hacerlo de esta manera en google chrome yendo a Configuración / Contraseña y Formularios> Deshabilitar [Habilitar Autocompletar para completar formularios web con un solo clic] y Deshabilitar [Oferta para guardar contraseñas con Google Smart Lock for Passwords]

Answer 8

Si bien la solución dada anteriormente es muy correcta, si absolutamente necesita la función, puede imitar la situación con una entrada personalizada utilizando el campo de texto y javascript.

Para un uso seguro, puede utilizar cualquier técnica de criptografía. De esta manera, evitará el comportamiento de guardado de contraseña del navegador.

Si desea saber más sobre la idea, podemos discutirlo en el chat. Pero la esencia es discutida arriba y puedes tener la idea.

Answer 9

Una cosa que puede hacer es pedir a sus usuarios que deshabiliten guardar la contraseña de su sitio. Esto se puede hacer en todo el navegador o en todo el origen.

Otra cosa que puedes hacer es forzar las entradas para que estén vacías después de que se cargue la página (y después de que el navegador haya completado los campos). Coloca este script al final del elemento <body> .

userIdInputElement.value = "";
userPasswordInputElement.value = "";

Answer 10

Una forma sería generar nombres de entrada aleatorios y trabajar con ellos.

De esta manera, los navegadores se presentarán con el new formulario cada vez y no podrán rellenar previamente los campos de entrada. Si nos proporciona algún código de muestra (¿tiene una aplicación js spa o alguna representación del lado del servidor) me complacería ayudarle en la implementación?

Saludos,

Answer 11

intente esto puede ser de ayuda, para más información, visite Tipo de entrada = contraseña, no permita que el navegador recuerde la contraseña

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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="passfld" type="password" autocomplete="off" />
<input type="submit">