Cómo solucionar los navegadores características de "guardar contraseña" y "autocompletar contraseña"

Todos están familiarizados con las funciones de "guardar contraseña" y de autocompletar del navegador que brindan una experiencia de usuario fluida y cómoda al completar formularios e iniciar sesión en sus sitios web favoritos.

¿Pero qué sucede cuando se ve obligado a deshabilitar el llenado automático de la contraseña por razones de seguridad? O peor aún, ¿qué sucede si necesita evitar que el navegador sugiera guardar contraseñas? Aquí es donde se complica.

Autocompletar = apagado está muerto

Entonces, ¿ha estado buscando una forma de deshabilitar la función de autocompletar en su formulario HTML pero descubrió que Chrome ignora el atributo autocompletar = "off"? gorrón.

Hay muchas publicaciones al respecto y un hilo muy largo del equipo de chromium, pero la conclusión es que no hay una solución integrada que le permita deshabilitar esta característica. No hay una solución de navegador cruzado, que es un estándar HTML.

Explicaré cómo solucionar el autocompletado de contraseña para Chrome y Firefox, pero tenga en cuenta que, por lo que he comprobado, no funciona en Safari. La idea es engañar al navegador para que complete automáticamente el campo de entrada incorrecto.
Lo sé, suena estúpido, pero funciona de maravilla y he visto sitios web de los principales bancos que implementan el mismo truco.

¿Como funciona?
Supongamos que su formulario HTML es un formulario de inicio de sesión simple que contiene los siguientes elementos:


La forma de engañar al navegador es agregar otro campo de entrada de contraseña justo encima del campo de contraseña existente. Esta vez estará oculto y el navegador lo rellenará automáticamente mientras ignora el campo de entrada de contraseña visible real.

Nuevamente, tenga en cuenta que esto no es un navegador cruzado y no se sabe cuánto tiempo durará esta solución.

¿Guardar contraseña? ¡no gracias!

Trabajar con aplicaciones seguras y reglas PCI DSS me llevó al punto en el que necesitaba deshabilitar la función de guardar contraseña del navegador. No era una demanda oficial, sino una parte del intento de desactivar la función de autocompletar; si no puede guardar la contraseña, el navegador no puede autocompletarla. ¡Dulce!

La peor parte de la función de guardar contraseña es que puede ver las contraseñas guardadas como texto sin formato dentro de la configuración de seguridad del navegador (!). En Chrome, se le solicita que proporcione las credenciales de Windows, pero no en Firefox. Firefox solo te preguntará si estás seguro de que quieres ver las contraseñas guardadas ... cojo.

Inicios de sesión guardados en Firefox: puede ver las contraseñas guardadas como texto sin formato

¿Cómo sabe el navegador cuándo sugerir la ventana emergente de guardar contraseña?
No profundicé en investigar esto, pero sí sé que todo lo que se necesita es tener una contraseña de tipo de entrada en su HTML. Ni siquiera necesita tener un elemento

.

Resulta que si reemplaza con el navegador ya no ofrece guardar la contraseña. Esa es una gran noticia, pero ¿qué hay de enmascarar la contraseña? Después de todo, la idea de la entrada HTML especial es enmascarar la contraseña para que nadie a su alrededor vea lo que está escribiendo.

La solución para enmascarar el texto la realiza CSS.
Aquí hay un ejemplo de lo que necesita para lograr el enmascaramiento. Esto se probó con éxito en Chrome, Safari y Firefox.

entrada {
    seguridad de texto: disco;
    -webkit-text-security: disco;
    -mox-text-security: disco;
}

Por cierto, algunas personas informan que el uso de AJAX para enviar los datos de inicio de sesión no activó la función de guardar contraseña, pero no funcionó cuando la probé.

¿Esta solución está suficientemente asegurada?
No hay una respuesta directa a esta pregunta. Los impactos de seguridad de esta solución se discuten en stackoverflow.

En el momento de escribir esta publicación, no estoy seguro de que esta solución cumpla con los estándares de seguridad y estoy seguro de que a su oficial de cumplimiento de PCI no le gustará. pero, por otro lado, no hay otra forma de solucionarlo,

Todavía.