javascript - type - Chrome Autocompletar/Autocompletar sin valor para contraseña
input type password no autocomplete (18)
Cuando haya guardado el nombre de usuario y la contraseña para algún sitio, Chrome completará automáticamente ese nombre de usuario y contraseña, pero si intenta obtener el valor para el campo de entrada de la contraseña, está vacía Cadena, aunque haya un valor allí ******.
Si hace clic en algún lugar de la página, no importa dónde se rellenará el valor del
input type="password"
.
Este es Fiddle
user/pass
de la estructura del html y el comando
console.log
.
No se puede ver aquí, pero se puede reproducir en cada página que tiene un formulario de inicio de sesión y el nombre de usuario y la contraseña se completan automáticamente en la carga de la página.
Si inspecciona el valor del campo antes de hacer clic en cualquier otro lugar del sitio, estará vacío String.
Este no es el caso en Firefox o Internet Explorer, llenará el valor del elemento de
input
con la contraseña.
Estoy usando el sistema operativo Windows 7 Ultimate de 64 bits y la versión de Google Chrome es 48.0.2564.97 m
¿Es este comportamiento normal, error o?
ACTUALIZAR:
Si hace clic en F5 para volver a cargar la página e inspeccionar el campo de contraseña, el valor de la contraseña estará allí. Si hace clic en el botón de recarga en Chrome en la esquina superior izquierda, el valor para el campo de contraseña será una cadena vacía.
Otra opción a partir del 16 de diciembre / Chrome 54
No puedo obtener el valor del campo de contraseña, pero, después de "un corto tiempo", puedo obtener la longitud de la contraseña seleccionándola, que es suficiente para habilitar el botón de envío.
$(document).ready(function(){
if ( $("input:-webkit-autofill").length ){
$(".error").text("Chrome autofill detected. Please click anywhere.");
}
});
$(document).click(function(){
$(".error").text("");
});
Respuesta de trabajo al 8 de julio de 2016
Adam dijo correctamente que esto es un error (o comportamiento previsto). Sin embargo, ninguna de las respuestas anteriores realmente dice cómo solucionar esto, así que aquí hay un método para obligar a Chrome a tratar el valor autocompletado como un valor real.
Deben ocurrir varias cosas en orden, y esto solo debe ejecutarse en Chrome y no en Firefox, de ahí el
if
.
Primero nos enfocamos en el elemento.
Luego creamos un nuevo
TextEvent
, y ejecutamos
initTextEvent
, que agrega una cadena personalizada que especificamos (usé "@@@@@") al comienzo del valor.
Esto provoca que Chrome comience a actuar como si el valor fuera real.
Luego podemos eliminar la cadena personalizada que agregamos, y luego desenfocamos.
Código:
input.focus();
var event = document.createEvent(''TextEvent'');
if ( event.initTextEvent ) {
event.initTextEvent(''textInput'', true, true, window, ''@@@@@'');
input.dispatchEvent(event);
input.value = input.value.replace(''@@@@@'','''');
}
input.blur();
Editar 10 de agosto de 2016
Esto solo funciona ahora en Chrome en Windows y Android. No funciona en OSX. Además, dejará de funcionar en septiembre de 2016, según:
https://www.chromestatus.com/features/5718803933560832
Además, he abierto un boleto de Chromium.
https://bugs.chromium.org/p/chromium/issues/detail?id=636425
A partir del 12 de agosto, un miembro del equipo de Chrome dijo en el boleto anterior que el comportamiento no cambiará porque no lo consideran un error.
Sugerencia de solución a largo plazo:
Dicho esto, el comportamiento actual ha sido modificado desde que se implementó por primera vez. El usuario ya no tiene que interactuar con la entrada de contraseña para que se informe el valor. El usuario ahora solo necesita interactuar (enviar un evento de mouse o teclado) con cualquier parte de la página. Eso significa que mientras se ejecuta la validación en la carga de la página todavía no funcionará, al hacer clic en el botón Enviar hará que Chrome informe correctamente el valor de la contraseña. La solución entonces es revalidar todas las entradas que podrían completarse automáticamente, si eso es lo que está tratando de hacer, al enviar.
Editar 13 de diciembre de 2016:
Se ha abierto un nuevo boleto de Chromium y se está recibiendo mejor. Si está interesado en cambiar este comportamiento de Chrome, marque este nuevo boleto:
Acabo de escribir una directiva angular relacionada con esto. Terminé con el siguiente código:
if (''password'' == $attrs.type) {
const _interval = $interval(() => { //interval required, chrome takes some time to autofill
if ($element.is('':-webkit-autofill'')) { //jQuery.is()
//your code
$interval.cancel(_interval);
}
}, 500, 10); //0.5s, 10 times
}
ps: no detectará el 100% de las veces, el cromo puede tardar más de 5 segundos en llenar la entrada.
Aquí está mi solución a este problema:
getComputedStyle(element).backgroundColor === "rgb(250, 255, 189)"
Básicamente, hacer clic hace que la entrada sea visible para el usuario, por lo que le pido que haga clic y, cuando lo hacen, oculto el mensaje.
No es la solución más elegante, pero probablemente la más rápida.
Con Angular, el nuevo comportamiento en Chrome (que solo permite leer los valores autocompletados después de que el usuario interactúa con la página) se manifiesta como un problema cuando se utiliza la funcionalidad de validación de Angular en ciertos escenarios (por ejemplo, utilizando métodos estándar / atributos de acción en forma). Como el controlador de envío se ejecuta de inmediato, no permite que los validadores de formularios capturen los valores autocompletados de Chrome.
Una solución que encontré para esto es llamar explícitamente a los controladores
$commitViewValue
función
$commitViewValue
en el controlador de envío para activar una revalidación antes de verificar el
form.$valid
form.invalid
o
form.invalid
etc.
Ejemplo:
function submit ($event) {
// Allow model to be updated by Chrome autofill
// @see http://.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password
$scope.loginModule.$commitViewValue();
if ($scope.loginModule.$invalid) {
// Disallow login
$scope.loginModule.$submitted = true;
$event.preventDefault();
} else {
// Allow login
}
}
Aunque esto nos está funcionando hasta ahora, estaría muy interesado si alguien ha encontrado otra solución más elegante para el problema.
Continuando con lo que dijo Andy Mercer , aquí está mi trabajo. Como muchas personas, no necesito el valor de contraseña real. Realmente solo necesito saber que el cuadro de contraseña se ha completado automáticamente, para poder mostrar los mensajes de validación adecuados.
Personalmente, no usaría la solución sugerida para detectar el cambio de color de fondo causado por el autocompletado de Chrome. Ese enfoque parece frágil. Depende de que el color amarillo nunca cambie. Pero eso podría ser cambiado por una extensión y ser diferente en otro navegador basado en Blink (es decir, Opera). Además, no hay promesa de que Google no use un color diferente en el futuro. Mi método funciona independientemente del estilo.
Primero, en CSS configuro el contenido de
INPUT
cuando se le
-webkit-autofil
la
-webkit-autofil
:
input:-webkit-autofill {
content: "/feff"
}
Luego, creé una rutina para verificar el contenido que se establecerá:
const autofillContent = `"${String.fromCharCode(0xFEFF)}"`;
function checkAutofill(input) {
if (!input.value) {
const style = window.getComputedStyle(input);
if (style.content !== autofillContent)
return false;
}
//the autofill was detected
input.classList.add(''valid''); //replace this. do want you want to the input
return true;
}
Por último, sondeé la
input
para permitir que se complete el tiempo de llenado automático:
const input = document.querySelector("input[type=password]");
if (!checkAutofill(input)) {
let interval = 0;
const intervalId = setInterval(() => {
if (checkAutofill(input) || interval++ >= 20)
clearInterval(intervalId);
}, 100);
}
El comportamiento previsto de Chrome es que una contraseña rellenada automáticamente tiene un
value
vacío en el DOM hasta que el usuario interactúa con el marco de alguna manera, momento en el que Chrome realmente llena el valor.
Hasta este punto, cualquier validación del lado del cliente o intento de enviar el formulario ajax verá la contraseña como vacía.
Este comportamiento de ''rellenar el valor de la contraseña en la interacción del marco'' es inconsistente. Descubrí que cuando el formulario está alojado en un iframe del mismo origen, solo funciona en la primera carga y nunca en las siguientes.
Esto es más evidente en los formularios ajax donde la contraseña de autocompletar se completa en la primera carga, sin embargo, si esa contraseña no es válida y el envío de ajax vuelve a mostrar el formulario DOM, la contraseña autocompletada vuelve a aparecer visualmente pero el
value
nunca se completa, independientemente de la interacción .
Ninguna de las soluciones mencionadas como desencadenar
blur
o eventos de
input
funcionó en este escenario.
La única solución que he encontrado es restablecer el valor del campo de contraseña después de que el proceso ajax vuelve a procesar el formulario, por ejemplo:
$(''input[type="password"]'').val("");
Después de lo anterior, Chrome vuelve a completar automáticamente la contraseña pero con el
value
realmente completado.
En mi caso de uso actual, estoy usando Ajax.BeginForm de ASP.NET y uso la solución anterior en la devolución de llamada AjaxOptions.OnSuccess.
Esto parece ser un error en Chrome.
Cuando Chrome llena automáticamente una contraseña en una carga de página inicial (pero no una actualización), el valor aparece en el campo de formulario en la pantalla, pero al consultar
passwordField.value
en Javascript devuelve una cadena vacía.
Si depende de ver ese valor en Javascript, esto le impide hacerlo.
Una vez que el usuario realiza cualquier otra acción en la página, como hacer clic en cualquier lugar de la página, el valor de repente se vuelve visible para Javascript.
En realidad, no estoy 100% seguro de si esto es un error, o si hay una razón de seguridad para hacerlo, como evitar que un marco oculto robe su contraseña engañando al navegador para que la complete.
Una solución alternativa que hemos utilizado es detectar el cambio de color de fondo que Chrome realiza en los campos que se ha llenado automáticamente. Chrome colorea de amarillo el fondo de los campos de relleno automático, y este cambio siempre es visible para Javascript, incluso cuando el valor no lo es. Detectar esto en Javascript nos permite saber que el campo se rellenó automáticamente con un valor, a pesar de que vemos el valor en blanco en Javascript. En nuestro caso, tenemos un formulario de inicio de sesión donde el botón de envío no está habilitado hasta que complete algo en el campo de contraseña, y detectar un valor o el color de fondo de autocompletar es lo suficientemente bueno como para determinar que algo está en el campo . Entonces podemos habilitar el botón de enviar, y al hacer clic en el botón (o presionar enter) instantáneamente el valor del campo de contraseña es visible para Javascript porque la interacción con la página soluciona el problema, por lo que podemos proceder normalmente desde allí.
He encontrado una solución a este problema que funciona al menos para mis propósitos.
Tengo un formulario de inicio de sesión en el que solo quiero presionar enter tan pronto como se cargue, pero me encontré con el problema de contraseña en blanco en Chrome.
Lo siguiente parece funcionar, permitiendo que la tecla de ingreso inicial falle y vuelva a intentarlo una vez que Chrome se despierte y proporcione el valor de la contraseña.
$(function(){
// bind form submit loginOnSubmit
$(''#loginForm'').submit(loginOnSubmit);
// submit form when enter pressed on username or password inputs
$(''#username,#password'').keydown(function(e) {
if (e.keyCode == 13) {
$(''#loginForm'').submit(e);
return false;
}
});
});
function loginOnSubmit(e, passwordRetry) {
// on submit check if password is blank, if so run this again in 100 milliseconds
// passwordRetry flag prevents an infinite loop
if(password.value == "" && passwordRetry != true)
{
setTimeout(function(){loginOnSubmit(e,true);},100);
return false;
}
// login logic here
}
La función de autocompletar se ha deshabilitado correctamente. ¡Funciona!
[HTML]
<div id="login_screen" style="min-height: 45px;">
<input id="password_1" type="text" name="password">
</div>
[JQuery]
$("#login_screen").on(''keyup keydown mousedown'', ''#password_1'', function (e) {
let elem = $(this);
if (elem.val().length > 0 && elem.attr("type") === "text") {
elem.attr("type", "password");
} else {
setTimeout(function () {
if (elem.val().length === 0) {
elem.attr("type", "text");
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
}, 1);
}
if (elem.val() === "" && e.type === "mousedown") {
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
});
La solución alternativa especificada por Adam:
... detecta el cambio de color de fondo que Chrome hace en los campos que se ha llenado automáticamente. Chrome colorea de amarillo el fondo de los campos de relleno automático, y este cambio siempre es visible para Javascript, incluso cuando el valor no lo es. Detectar esto en Javascript nos permite saber que el campo se rellenó automáticamente con un valor, aunque vemos el valor en blanco en Javascript
Me gustó esto: -
setTimeout(function() {
// get the password field
var pwd = document.getElementById(''pwd'');
pwd.focus();
pwd.select();
var noChars = pwd.selectionEnd;
// move focus to username field for first-time visitors
document.getElementById(''username'').focus()
if (noChars > 0) {
document.getElementById(''loginBtn'').disabled = false;
}
}, 100);
donde rgb (250, 255, 189) es el color amarillo que Chrome aplica a las entradas con relleno automático.
Mencionaste:
Si hace clic en algún lugar de la página, sin importar dónde se completará el valor de la entrada type = "password".
Es por eso que simplemente uso
$(''body'').click();
para simular este primer clic, después del cual el valor está disponible en JavaScript.
Además, configuro
autocomplete="new-password"
en mi campo de contraseña del formulario de registro, para que el campo no se complete automáticamente y los usuarios tengan que completar una nueva contraseña.
Vea esta página de Google Developers para más información.
No es un error. Es un problema de seguridad. Imagínese si uno pudiera usar javascript para recuperar contraseñas autocompletadas sin el reconocimiento de los usuarios.
Para mí, ninguna de estas soluciones parecía funcionar.
Creo que vale la pena mencionar que si desea usarlo para el estilo CSS, debe usar la propiedad -webkit-autofill de esta manera:
input:-webkit-autofill~.label, input:-webkit-autofill:hover~.label, input:-webkit-autofill:focus~.label input:focus~.label, input:not(.empty)~.label { top: -12px; font-size: 12px; color: rgba(0, 0, 0, .4); font-weight: 600 }
Si desea que la entrada se vea cumplida, intente
blur
:
$(''input[type="password"]'').blur();
Simplemente configure el atributo de autocompletar en nombre de usuario para el campo de nombre de usuario y nueva contraseña para el campo de contraseña;
<input type="text" id="username" autocomplete="username">
<input type="password" id="password" autocomplete="new-password" >
var txtInput = $(sTxt);
txtInput.focus();
txtInput.select();
Esta solución funcionó en mi caso. Usando jQuery 3.1.1.
$element.is("*:-webkit-autofill")
funciona para mi