html - password - Desactivar el autocompletado de Safari en nombres de usuario y contraseñas

input autocomplete javascript (15)

Es posible que ya sepas que Safari tiene un desagradable error de autocompletar que llena los campos de correo electrónico, nombre de usuario y contraseña, independientemente de que configures autocomplete="off" o no.

Aquí hay una forma básica:

<form action="/" method="post"> <p> <label>E-mail</label> <input type="text" name="email" value="" /> </p> <p> <label>Password</label> <input type="password" name="password" value="" /> </p> </form>

... Safari autocompleta esos campos en la carga de la página como debería, ¡trabajo bien hecho!

Si pones autocomplete="off" en los campos y / o en el elemento de formulario, Safari todavía autocompleta esos campos:

<form action="/" method="post" autocomplete="off"> <p> <label>E-mail</label> <input type="text" name="email" value="" autocomplete="off" /> </p> <p> <label>Password</label> <input type="password" name="password" value="" autocomplete="off" /> </p> </form>

Incluso esto no funciona:

<form action="/" method="post" autocomplete="off"> <p> <label>E-mail</label> <input type="text" name="secretfield1" value="" autocomplete="off"/> </p> <p> <label>Password</label> <input type="password" name="secretfield2" value="" autocomplete="off" /> </p> </form>

... ya que Safari busca esos elementos <label> si contienen palabras "E-mail", "Contraseña", etc. y continúa con el autocompletado.

¡Aaaahhhhha!, Pensé, e intenté esto:

<form action="/" method="post" autocomplete="off"> <p> <label>%REPLACE_EMAIL_TITLE%</label> <input type="text" name="%REPLACE_EMAIL_NAME%" value="" autocomplete="off"/> </p> <p> <label>%REPLACE_PASSWORD_TITLE%</label> <input type="password" name="%REPLACE_PASSWORD_NAME%" value="" autocomplete="off" /> </p> </form>

... y reemplaza% TAGS% con los nombres reales usando JavaScript. Se activa la función Autocompletar de Safari. No importa si configura un tiempo de espera de 10 segundos para el reemplazo.

Entonces, ¿esta es realmente la única opción?

<form action="/" method="post" autocomplete="off"> <p> <label>That electronic postal address we all use, but can''t write the title here because Safari fills this with YOUR information if you have autofill turned on</label> <input type="text" name="someelectronicpostaladdress" value="" autocomplete="off"/> </p> <p> <label>A set of characters, letters, numbers and special characters that is so secret that only you or the user you are changing it for knows, but can''t write the title here because Safari sucks</label> <input type="password" name="setofseeecretcharacters" value="" autocomplete="off" /> </p> </form>

¿Espero que no?

ACTUALIZACIÓN: @skithund señaló en Twitter , que Safari está recibiendo una actualización 4.0.3 , que menciona "Iniciar Autocompletar". ¿Alguien sabe si esa actualización va a solucionar esto?

Después de escanear las páginas HTML de Safari de Apple y no encontrar nada en la autocompletar, investigué y pensé.

Después de leer una pregunta (moderadamente) relacionada en las discusiones de Apple, recordé que el valor predeterminado es no permitir contraseñas recordadas, etc. (que pueden habilitarse en la configuración del sistema de iDevice o en el aviso). Dado que Apple ha movido esta función fuera del navegador y dentro de su sistema operativo (propietario, i) ( capturas de pantalla en este artículo ), creo que ignoran por completo la propiedad de formulario / campo HTML.

A menos que cambien su mentalidad en cuanto a esta característica, como estoy seguro de que este es su comportamiento esperado, en sus dispositivos bloqueados, trabajaría bajo la suposición de que esto no va a desaparecer. Esto es probablemente diferente para las aplicaciones nativas de iOS. Definitivamente mantenga el formulario autocomplete = "off" y es de esperar que un día vuelvan al estándar HTML5 para la función.

Sé que esto no incluye ninguna solución alternativa, pero creo que si llegas a un acuerdo con que es una ''característica'' no de navegador en iDevices, tiene sentido (en una especie de forma de Apple).

Eliminar el elemento <form> . Para mantener el comportamiento de la forma, puede escuchar el evento de keypress para campos de entrada para manejar la tecla enter presionada. Solo en caso de que quite input type="submit" también. Puede usar button type="button" .

Esta pregunta ya se ha respondido con éxito, pero a partir de la fecha de hoy, la solución no funcionó para mí sin hacer algunos cambios extrañamente particulares, así que lo mencionaré aquí como referencia mía si decido volver a él. como para todos los demás.

La entrada falsa debe ser después de la entrada de correo electrónico real en el dom.
La entrada falsa requiere una etiqueta falsa.
La etiqueta falsa no puede ser posicionada absolutamente.
No se puede usar la visualización, la visibilidad o la opacidad para ocultar los elementos falsos.

La única solución que encontré fue recortar la visibilidad de los elementos falsos con overflow: hidden .

<label for="user_email">Email</label> <input autocomplete="off" type="text" value="[email protected]" name="user[email]" id="user_email">  <label for="fake_email" aria-hidden="true" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)">Email</label> <input type="text" name="fake[email]" id="fake_email" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)" tab-index="-1" aria-hidden="true">

Para el registro, el caso particular en el que resultó útil este truco fue uno en el que un administrador está editando el perfil de otros usuarios y Safari reemplazó el correo electrónico del usuario con el correo electrónico del administrador. Hemos decidido que, por la pequeña (pero frustrante) cantidad de solicitudes de asistencia que crea esta ''función'' de Safari, no vale la pena mantener un truco que parece necesitar evolucionar a medida que Safari se ajusta y, en su lugar, brinda asistencia a esos usuarios. sobre cómo desactivar el autocompletar.

La display: none CSS display: none soluciones mencionadas aquí no funcionó para mí (octubre de 2016). Solucioné este problema con JavaScript.

No me importa que el navegador recuerde las contraseñas, pero quería evitar un mal autocompletado. En mi caso, un formulario con un campo de contraseña y ningún campo de nombre de usuario asociado. (Formulario de edición de usuario en el sitio de Drupal 7, donde el campo de contraseña se requiere solo para algunas operaciones). Cualquier cosa que intenté, Safari encontraría un campo de víctima para el nombre de usuario de la contraseña autocompletada (el campo colocado visualmente antes, por ejemplo).

Restauro el valor original tan pronto como Safari realiza el autocompletado. Lo intento solo durante los primeros 2 segundos después de la carga de la página. Probablemente, incluso un valor menor está bien. Mis pruebas mostraron que el autocompletado ocurre alrededor de 250 ms después de la carga de la página (aunque imagino que este número depende mucho de cómo se construya y cargue la página).

Aquí está mi código de JavaScript (con jQuery):

// Workaround for Safari autofill of the e-mail field with the username. // Try every 50ms during 2s to reset the e-mail to its original value. // Prevent this reset if user might have changed the e-mail himself, by // detecting focus on the field. if ($(''#edit-mail'').length) { var element = $(''#edit-mail''); var original = element.attr(''value''); var interval = setInterval(function() { if ($(document.activeElement).is(element)) { stop(); } else if (element.val() != original) { element.val(original); stop(); } }, 50); var stop = function() { clearTimeout(timeout); clearInterval(interval); } var timeout = setTimeout(function() { clearInterval(interval); }, 2000); }

La razón por la que los navegadores ignoran la función autocomplete=off es porque ha habido algunos sitios web que intentaron desactivar la autocompletación de las contraseñas.

Eso está mal.

Y en julio de 2014, Firefox fue el último navegador importante en implementar finalmente el cambio para ignorar cualquier sitio web que intente desactivar el autocompletado de contraseñas.

Una de las principales quejas de los usuarios sobre nuestra función Autocompletar formularios HTML es "No funciona, no veo ninguno de los textos ingresados previamente". Al depurar estos casos, generalmente encontramos que el sitio ha inhabilitado explícitamente la función utilizando el atributo proporcionado, pero, por supuesto, los usuarios no tienen idea de que el sitio lo ha hecho y simplemente suponen que IE tiene errores. Según mi experiencia, cuando las funciones se ocultan o reemplazan, los usuarios generalmente culpan al navegador, no al sitio web.

Cualquier intento por parte de cualquier sitio web de eludir las preferencias del navegador es incorrecto, es por eso que los navegadores lo ignoran. No hay ninguna razón conocida por qué un sitio web debería intentar deshabilitar el almacenamiento de contraseñas.

Chrome lo ignora
Safari lo ignora
IE lo ignora
Firefox lo ignora

En este punto, los desarrolladores web suelen protestar "¡Pero no haría esto en todas partes, solo en unos pocos pedazos donde tiene sentido!". Incluso si eso es cierto, desafortunadamente, este es otro caso en el que el navegador no tiene forma de hacerlo. para ver la diferencia Recuerde que las ventanas emergentes alguna vez fueron una parte útil y feliz de la experiencia de navegación web, hasta que el abuso por parte de los anunciantes las convirtió en la pesadilla de los usuarios en todas partes. Inevitablemente, todos los navegadores comenzaron a bloquear ventanas emergentes, rompiendo incluso los sitios "buenos" que usaban ventanas emergentes con buen gusto y discreción.

¿Qué pasa si soy un snowflake especial?

Hay personas que plantean un buen caso de uso:

Tengo una computadora compartida, de área pública y de kiosco. No queremos que alguien (accidental o intencionalmente) guarde su contraseña para que el próximo usuario pueda usarla.

Eso no viola la declaración:

Cualquier intento por parte de cualquier sitio web de eludir las preferencias del navegador es incorrecto

Eso es porque en el caso de un quiosco compartido:

no es el servidor web el que tiene la política de los extraños
es el agente de usuario del cliente que tiene la política de bicho raro

El navegador (la computadora compartida) es el que tiene el requisito de que no intente guardar las contraseñas.

La forma correcta de evitar que el navegador guarde las contraseñas
es configurar el navegador para no guardar contraseñas.

Como ha bloqueado y controlado esta computadora de kiosco: usted controla la configuración. Eso incluye la opción de guardar contraseñas.

En Chrome e Internet Explorer, configure esas opciones usando Políticas de grupo (por ejemplo, claves de registro).

De la lista de políticas de Chrome :

AutoFillEnabled
Habilitar Autocompletar
Tipo de datos: booleano (REG_DWORD)
Ubicación del registro de Windows: Software / Policies / Chromium / AutoFillEnabled
Descripción: Habilita la función Autocompletar de Chromium y permite a los usuarios completar automáticamente formularios web utilizando información previamente almacenada, como la dirección o la información de la tarjeta de crédito. Si deshabilita esta configuración, Autocompletar será inaccesible para los usuarios. Si habilita esta configuración o no establece un valor, Autocompletar permanecerá bajo el control del usuario. Esto les permitirá configurar los perfiles de Autocompletar y activar o desactivar Autocompletar según su propio criterio.

Pase la voz a los gerentes corporativos de que intentar deshabilitar el autocompletado de la contraseña es incorrecto. Está tan mal que los navegadores ignoran intencionalmente a cualquiera que intente hacerlo. Esas personas deberían dejar de hacer lo incorrecto. ™

Mejor que utilizar JS para borrar el contenido, simplemente falsifique el campo de contraseña:

<input type="text" name="user" /> <input fake_pass type="password" style="display:none"/> <input type="password" name="pass" />

Un tipo de password duplicado pone el navegador en incertidumbre por lo que autocompleta solo el nombre de usuario

fake_pass input fake_pass no debería tener el atributo de name para mantener $_POST limpio!

No puedo creer que esto siga siendo un problema mucho después de que se haya informado. Las soluciones anteriores no funcionaron para mí, ya que Safari parecía saber cuándo el elemento no se mostraba o no, pero me funcionó lo siguiente:

<div style="position:absolute;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!

Parece que los programadores de navegador creen que saben más que los escritores de sitios web. Si bien a veces es útil permitir al usuario guardar contraseñas, hay otros momentos en los que es un riesgo para la seguridad. Para esos momentos, esta solución podría ayudar:

Comience usando una entrada de texto convencional, en lugar de un tipo de ''contraseña''.

Password: &nbsp <input type="text" id="fkpass" name="bxpass" class="tinp" size="20" />

Luego, si lo desea, establezca el foco en el campo de entrada.

<BODY onLoad="fitform()">

Coloque el JS al final de la página.

<script type="text/javascript"> document.entry.fkpass.focus(); function fitform() { document.getElementById(''fkpass'').autocomplete = ''off''; } </script>

Ahora tiene un campo de formulario convencional. ¿De qué sirve eso?
Cambie el estilo CSS para esa entrada, de modo que use una fuente que sea todo ''viñetas'' en lugar de caracteres.

<style type="text/css"> @font-face { font-family: fdot; src: url(''images/dot5.ttf''); } @font-face { font-family: idot; src: url(''images/dot5.eot''); } @font-face { font-family: wdot; src: url(''images/dot5.woff''); } @font-face { font-family: w2dot; src: url(''images/dot5.woff2''); } .tinp { font-family: fdot, idot, wdot, w2dot; color: #000; font-size:18px; } </style>

Sí, podría ''poner en orden'' el código y agregar .svg a él.

De cualquier manera, el resultado final es indistinguible de la entrada de contraseña ''real'', y el navegador no ofrecerá guardarlo.

Si quieres la fuente, está here . Fue creado con CorelDraw y convertido con una utilidad de conversión de webfont en línea. (dot_webfont_kit.zip 19.3k)

Espero que esto ayude.

Puedes probar esta variante. Esto funciona para mi. Si cambia el valor del campo una vez, Safari lo cambiará de nuevo. Si el usuario hizo clic en este campo, después de esto el valor no sería modificado por Safari automáticamente.

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); if($.browser.chrome){ $.browser.safari = false; } var isChanged=false; $(''#Email'').change(function () { if ($.browser.safari && !isChanged) { $(''#Email'').val(''@Model.Email''); } }); $(''#Email'').click(function () { if ( $.browser.safari && !isChanged) { isChanged = true; } }); var isChangePassword = false; $(''#OldPassword'').change(function () { if ($.browser.safari && !isChangePassword) { $(''#OldPassword'').val(''''); } }); $(''#OldPassword'').click(function () { if ($.browser.safari && !isChangePassword) { isChangePassword= true; } });

También me ha mordido el raro comportamiento de autocompletado predeterminado de Safari, pero en lugar de deshabilitarlo por completo, logré que funcionara para mí siguiendo las pautas en https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands .

Específicamente, puse autocomplete="username" en el campo username y autocomplete="password-current" en el campo de contraseña. Esto le dice al navegador qué campos rellenar automáticamente, en lugar de tener que adivinar, y arregló la función de autocompletar para mi caso de uso.

Este enfoque funciona tanto para los formularios de inicio de sesión de "correo electrónico primero" (campo de contraseña no visible inmediatamente, por ejemplo, inicio de sesión de Google) como para los formularios de inicio de sesión convencionales con campos de nombre de usuario y contraseña visibles.

Tuve el mismo problema de repente en un SPA con React en Mobile Safari 10.3.1

No necesito soluciones complicadas antes en todos los navegadores probados, incluso Mobile Safari IOS 10.2

Pero dado que 10.3.1 nombre de usuario o contraseña serán completados en campos que mencionan las palabras ''contraseña'', ''correo electrónico'', ''nombre de usuario'' en cualquier formulario después de iniciar sesión con la opción de recordar activa. Parece que el árbol DOM renderizado se ''analiza'' usando una búsqueda de texto completo y luego el agente de usuario completa los datos sin respetar ninguna configuración de autocompletar = "apagado". Ocurre divertido también en el texto de marcador de posición para un campo. Por lo tanto, debe ser muy cuidadoso con la nomenclatura, cuando no desee tener un nombre de usuario o contraseña previamente rellenado en los lugares donde estos datos no son útiles.

La única solución después de horas de investigación fue la solución aquí publicada también. Proporcione un campo de entrada llamado "correo electrónico" y oculte el div que contiene con la altura: 0px, desbordamiento: oculto.

Yo tuve el mismo problema. Y aunque mi solución no es perfecta, parece que funciona. Básicamente, Safari parece buscar un campo de entrada con contraseña y nombre de usuario, y siempre intenta llenarlo. Entonces, mi solución fue agregar un campo falso de nombre de usuario y contraseña antes del actual que Safari podría llenar. Intenté usar style="display: none;" Pero eso no funcionó. Entonces, finalmente, acabo de usar style="position:absolute; top:-50px;" y esto escondía el campo de entrada fuera de la vista y parecía funcionar bien. No quería usar JavaScript, pero creo que podrías esconderlo con JavaScript.

Ahora Safari nunca completó automáticamente mis campos de nombre de usuario y contraseña.

Mi problema: tengo una sección en un área de administración que permite a los usuarios establecer todos los valores del idioma, algunos de los cuales contienen las palabras "contraseña", "correo electrónico", "dirección de correo electrónico", etc. No quiero que se llenen estos valores con los detalles del usuario, son para crear traducciones a otro idioma. Esta es entonces una excepción válida al "evitar las preferencias del navegador" mencionado.

Mi solución: simplemente creé nombres alternativos:

$name = str_replace(''email'',''em___l'',$name); $name = str_replace(''password'',''pa___d'',$name);

<input type="text" name="<?=$name?>" id="<?=$name?>" />

Luego, cuando se publique el formulario:

foreach($_POST as $name=>$value) { $name=str_replace(''em___l'',''email'',$name); $name=str_replace(''pa___d'',''password'',$name); $_POST[$name]=$value; }

Este es el único método que funcionó para mí.

Solución: la función de autocompletar del navegador está en modo de solo lectura y se puede escribir en el foco

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

(focus = al hacer clic con el mouse y tabular a través de los campos)

Actualización: Mobile Safari establece el cursor en el campo, pero no muestra el teclado virtual. El nuevo 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(); }" />

Demostración en vivo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Explicación: ¿El navegador llena automáticamente las credenciales al campo de texto incorrecto?

Ok, acabas de notar eso:

La copia de seguridad automática de Safari entra en acción. No importa [qué nombre llevan los campos] @Jari

y hay una suposición de que:

Safari parece buscar un campo de entrada con contraseña y nombre de usuario y siempre intenta llenarlo @ user3172174

A veces noto este extraño comportamiento 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 tus credenciales guardadas. Luego, carga automáticamente el nombre de usuario en el campo de entrada de texto similar más cercano, que aparece antes del campo de contraseña en DOM (simplemente adivinando debido a la observación). Como el navegador es la última instancia y no puedes controlarlo,

a veces incluso el autocompletar = apagado no impediría completar las credenciales en campos incorrectos, pero no en el campo de usuario o sobrenombre.

Esta solución de solo lectura anterior funcionó para mí.

::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button { visibility: hidden; pointer-events: none; position: absolute; right: 0; }