El patrón oscuro de autorrelleno

El formulario de registro de un periódico tenía campos para nombre, correo electrónico y contraseña. Entonces, comencé a escribir en el campo de nombre y el autocompletar sugirió mi perfil. Pero había algo funky . La sugerencia de autocompletar incluía mi dirección postal. No hace falta decir que fue desconcertante: la dirección no era un campo en el formulario. ¿Por qué se sugirió?

Cuando esta pregunta comenzó a formarse en mi mente, mi cerebro ya le había indicado a mi dedo que hiciera clic en la sugerencia, y ya estaba hecho. A continuación, fui llevado a una segunda página de formulario que solicitaba información adicional como dirección, teléfono, fecha de nacimiento, etc. Y todos esos campos también se completaron previamente con la funcionalidad de autocompletar.

Suspiré aliviado. Era un formulario de "múltiples pasos" y no un truco del sitio web. Después de todo, era un periódico respetable. Eliminé toda la información opcional de la segunda página, completé el registro y seguí adelante.

Esa interacción (problemática) resaltó uno de los riesgos de usar funciones de autocompletado .

Autocompletar y Autocompletar

Pueden sonar similares, pero autocomplete y autocompletar no son lo mismo . Aunque están muy relacionados:

• Autocompletar es una función del navegador que permite a las personas guardar información (en el navegador o en el sistema operativo) y usarla en formularios web.
• autocomplete es un atributo HTML que proporciona pautas al navegador sobre cómo (o no) autocompletar campos en un formulario web.

Podríamos decir que autocompletar es el "qué", mientras que autocompletar es "cómo", es decir, autofill almacena datos e intenta unirlos en un formulario web (basado en el name , type o id de los campos), y autocomplete guía al navegador. sobre cómo hacerlo (qué información se espera en cada campo).

Autocompletar es una característica poderosa con muchas opciones que permite especificar muchos tipos diferentes de valores:

• Personal : Nombre, dirección, teléfono, fecha de nacimiento;
• Financiero : número de tarjeta de crédito, nombre, fecha de vencimiento;
• Datos demográficos : ubicación, edad, sexo, idioma;
• Profesional : empresa y puesto de trabajo.

Autocompletar es una función muy extendida, ya sea por elección o por accidente: ¿quién no ha aceptado dejar que el navegador guarde/utilice la información del formulario web, ya sea a propósito o por error? Y eso podría ser un problema, especialmente combinado con el mal uso de la función de autocomplete (y la cantidad escandalosa adicional de correos electrónicos y mensajes SMS de phishing en la actualidad).

Riesgos de privacidad

Ambas características presentan (al menos) dos riesgos principales para el usuario, tanto en relación con sus datos personales como con su privacidad:

1. Los campos no visibles se rellenan (esto no es lo mismo que los campos con un tipo oculto);
2. La información autocompletada se puede leer a través de JavaScript incluso antes de que el usuario envíe el formulario.

Esto significa que una vez que un usuario selecciona autocompletar la información, todos los campos estarán disponibles para que el desarrollador los lea . Nuevamente, independientemente de que el usuario envíe o no el formulario, sin que el usuario sepa qué campos se completaron realmente.

Esta última parte es relativa: saber qué campos se rellenan dependerá del navegador. Safari y Firefox hacen un buen trabajo en esto (como pronto veremos a continuación). Por otro lado, Chrome, el navegador más popular en este momento, ofrece una mala experiencia que puede engañar incluso a los usuarios más informados para que compartan su información personal.

Si además consideramos los tiempos en los que el usuario elige accidentalmente llenar los campos, este tema se vuelve más relevante. Vamos a comprobarlo con más detalle con un ejemplo.

un pequeño experimento

Realicé un pequeño experimento creando un formulario con muchos campos y adjuntando el atributo de autocomplete con diferentes valores. Luego, jugué un poco con la estructura del formulario:

• Oculté la mayoría de los campos colocándolos en un contenedor fuera de la pantalla (en lugar de usar hidden o type="hidden" );
• Eliminé los campos visualmente ocultos del orden de tabulación (para que los usuarios del teclado pasaran por alto los campos ocultos);
• Intenté clasificar los campos en un orden diferente (y para mi sorpresa, ¡esto afectó el autocompletado!).

Al final, el código del formulario quedó así:

 <form method="post" action="javascript:alertData()"> <label for="name">Full name</label><input name="name" autocomplete="name" /><br/> <label for="email">Email</label><input name="email"/><br/> <label for="postal-code">ZIP</label><input name="postal-code" autocomplete="postal-code"/> <div class="hide-this"> <!-- Hidden --> <label for="firstname">First name</label><input tabindex="-1" type="hidden" name="firstname" autocomplete="given-name" /><br/> <label for="lastname">Last name</label><input tabindex="-1" name="lastname" autocomplete="family-name" /><br/> <label for="honorific-prefix">honorific-prefix</label><input tabindex="-1" name="honorific-prefix" autocomplete="honorific-prefix"/><br/> <label for="organization">Organization</label><input tabindex="-1" name="organization" /><br/> <label for="phone">Phone</label><input tabindex="-1" name="phone" autocomplete="tel" /><br/> <label for="address">address</label><input tabindex="-1" name="address" autocomplete="street-address" /><br/> <label for="city">City</label><input tabindex="-1" name="city" autocomplete="address-level2" /><br/> <label for="state">State</label><input tabindex="-1" name="state" autocomplete="address-level1" /><br/> <label for="level3">Level3</label><input tabindex="-1" name="state" autocomplete="address-level3" /><br/> <label for="level4">Level4</label><input tabindex="-1" name="state" autocomplete="address-level4" /><br/> <label for="country">Country</label><input tabindex="-1" name="country" autocomplete="country" /><br/> <label for="birthday">Birthday</label><input tabindex="-1" name="birthday" autocomplete="bday" /><br/> <label for="language">Language</label><input tabindex="-1" name="language" autocomplete="language" /><br/> <label for="sex">Sex</label><input tabindex="-1" name="sex" autocomplete="sex" /><br/> <label for="url">URL</label><input tabindex="-1" name="url" autocomplete="url" /><br/> <label for="photo">Photo</label><input tabindex="-1" name="photo" autocomplete="photo" /><br/> <label for="impp">IMPP</label><input tabindex="-1" name="impp" autocomplete="impp" /><br/> <label for="username">Username</label><input tabindex="-1" name="username" autocomplete="username" /><br/> <label for="password">Password</label><input tabindex="-1" name="password" autocomplete="password" /><br/> <label for="new-password">Password New</label><input tabindex="-1" name="new-password" autocomplete="new-password" /><br/> <label for="current-password">Password Current</label><input tabindex="-1" name="current-password" autocomplete="current-password" /><br/> <label for="cc">CC#</label><input tabindex="-1" name="cc" autocomplete="cc-number" /><br/> <label for="cc-name">CC Name</label><input tabindex="-1" name="cc-name" autocomplete="cc-name" /><br/> <label for="cc-expiration">CC expiration</label><input tabindex="-1" name="cc-expiration" autocomplete="cc-expiration" /><br/> <label for="cc-zipcode">CC Zipcode</label><input tabindex="-1" name="cc-zipcode" autocomplete="cc-postalcode" /><br/> </div> <button>Submit</button> </form>

Nota: Creé esta demostración hace un tiempo y el estándar es un documento vivo. Desde entonces, algunos de los nombres de autocompletar han cambiado. Por ejemplo, ahora podemos especificar new-password y una contraseña current-password o más detalles para la dirección o la tarjeta de crédito que no estaban disponibles antes.

Ese formulario tenía tres campos visibles ( name , email y zipcode ). Si bien ese formulario es común entre las compañías de seguros, el cable y otros proveedores de servicios, es posible que no esté muy extendido, por lo que reduje el formulario aún más con un solo campo de correo electrónico. Vemos eso en todas partes para suscribirse a sitios web, boletines o actualizaciones. Puede ver una demostración en ejecución aquí:

Si usó la función de autocompletar para completar el formulario, ya compartió más información de la que deseaba ( no se preocupe, todo es local y no se comparte conmigo ). Y en Chrome, incluso podría haber parecido un formulario de suscripción perfectamente normal.

Si no tiene o no usa autocompletar, no se preocupe. Aquí hay un resumen de cómo es la experiencia en tres navegadores diferentes.

Nota : ¡Todas estas pruebas asumen el uso de Autocompletar y se basan en un perfil falso!

Safari

Cuando hace clic en un control de formulario, Safari mostrará un icono en el lado derecho del campo. Al hacer clic en él, aparecerá una ventana emergente con la información que el navegador compartirá con el formulario:

Algo bueno: muestra todos los datos que se compartirán como parte del formulario. No solo los datos de los campos visibles sino todos. En este punto, el usuario puede sospechar que algo no está del todo bien. Hay algo sospechoso.

Cuando reduje el formulario al campo de correo electrónico, Safari hizo algo interesante. La ventana emergente de autocompletar era diferente:

Indica que solo compartirá el correo electrónico (y solo comparte esa información). Pero la información de contacto a continuación puede ser más complicada. Cuando hacemos clic en ese botón, el navegador muestra un resumen del perfil con sus datos compartidos. Pero eso no está claramente establecido en ninguna parte. Simplemente parece una tarjeta de contacto regular con algunas opciones de "compartir/no compartir". Después de hacer clic en el botón "Autocompletar", el formulario se completa con todos los datos. No solo el correo electrónico:

Entonces, hay una manera para que un usuario comparta información con el formulario sin darse cuenta. Es complicado pero no demasiado descabellado teniendo en cuenta que es el que está "resaltado" con un icono de las dos opciones posibles.

Lo curioso es que los navegadores separan los datos personales de los datos de la tarjeta de crédito, pero Safari completó parte de la información de la tarjeta de crédito en función de los datos personales (nombre y código postal).

Firefox

Usar el autocompletar en Firefox es un poco más complejo. No es automático como en Chrome, y no hay ícono como en Safari. Los usuarios deberán comenzar a escribir o hacer clic por segunda vez para ver la ventana emergente de autocompletar, que tendrá una nota con cada categoría que el navegador completará, no solo los campos visibles:

Probando con el formulario de solo correo electrónico, Firefox presentó la misma ventana emergente de autocompletar que indicaba qué categorías de campos completaría. No hay diferencia alguna.

Y de manera similar a los otros navegadores, después de que se ejecutó el autocompletado, pudimos leer todos los valores con JavaScript.

Firefox fue el mejor de los tres: establecía claramente qué información se compartiría con el formulario independientemente de los campos o su orden. Y ocultó la funcionalidad de autocompletar cuando ocurrió una segunda interacción del usuario.

Un usuario del teclado podría seleccionar el relleno automático sin darse cuenta, ingresando a la burbuja emergente y presionando la tecla de tabulación.

Cromo

Luego llegó el turno de Chrome. (Aquí uso "Chrome", pero los resultados fueron similares para varios navegadores basados ​​en Chromium probados). Hice clic en el campo y, sin más interacción, apareció la ventana emergente de autocompletar. Si bien Firefox y Safari tenían muchas cosas en común, Chrome es completamente diferente: solo muestra dos valores y ambos son visibles.

Esta pantalla fue por diseño. Elegí el orden de los campos a propósito para obtener esa combinación particular de controles visibles y sugerencias de autocompletar. Sin embargo, parece que Chrome da más "peso" a algunas propiedades de autocompletar para el segundo valor. Y eso hace que la ventana emergente cambie según el orden de los campos en el formulario.

Probar con la segunda versión del formulario no fue mucho mejor:

Si bien la ventana emergente muestra un campo que no está visible (el nombre), no está claro cuál es el propósito del nombre en la ventana emergente. Un usuario experimentado puede saber que esto sucede porque se comparte el nombre, pero un usuario promedio (e incluso los experimentados) puede pensar que el correo electrónico está asociado con el perfil con ese nombre. No hay ninguna indicación de los datos que el navegador compartirá con el formulario.

Y tan pronto como el usuario hace clic en el botón de autocompletar, los datos están disponibles para que el desarrollador los lea con JavaScript:

Chrome fue el peor infractor: compartió la información automáticamente, no estaba claro qué datos estaban involucrados y las sugerencias de autocompletar cambiaron según el orden y los atributos de los controles.

Los dos primeros problemas son comunes a todos/muchos navegadores, hasta el punto de que incluso puede considerarse una característica. Sin embargo, el tercer problema es exclusivo de los navegadores Chromium y facilita un patrón oscuro incompleto.

Este comportamiento sería más una anécdota y no un problema si no fuera porque Chrome tiene una participación considerable en el mercado de los navegadores en línea (incluye Chrome y los basados ​​en Chromium).

El patrón oscuro

Como probablemente sepa, un patrón oscuro es un patrón UX engañoso que engaña a los usuarios para que hagan cosas que en realidad no quieren hacer.

“Cuando usas sitios web y aplicaciones, no lees cada palabra en cada página, lees por encima y haces suposiciones. Si una empresa quiere engañarte para que hagas algo, puede aprovechar esto haciendo que una página parezca que dice una cosa cuando en realidad dice otra”.

— Harry Brignull, darkpatterns.org

El comportamiento descrito en los puntos anteriores es claramente una experiencia de usuario engañosa. Los usuarios sin experiencia no se darán cuenta de que están compartiendo sus datos personales . Incluso las personas más conocedoras de la tecnología pueden ser engañadas, ya que Chrome hace que parezca que la opción seleccionada pertenece a un perfil en lugar de indicar claramente qué información se comparte.

Las implementaciones del navegador causan este comportamiento, pero requiere que el desarrollador lo establezca para explotarlo. Desafortunadamente, ya hay empresas dispuestas a explotarlo, vendiéndolo como una función para obtener clientes potenciales.

Mientras siga un patrón oscuro, también puede ser ilegal. Esto se debe a que rompe muchos principios relacionados con el procesamiento de datos personales especificados en el artículo 5 del Reglamento General Europeo de Protección de Datos (GDPR):

• Legalidad, equidad y transparencia
  El proceso es casi transparente.
• Limitación de propósito
  Los datos son tratados de forma incompatible con la finalidad inicial.
• Minimización de datos
  Es todo lo contrario. Maximización de datos: obtenga la mayor cantidad de información posible.

Por ejemplo, si desea suscribirse a un boletín informativo o solicitar información sobre un producto y proporciona su correo electrónico, el sitio web no tiene ningún derecho legal para obtener su nombre, dirección, fecha de nacimiento, número de teléfono o cualquier otra cosa sin su consentimiento o conocimiento. Incluso si consideró que el usuario dio permiso al hacer clic en el autocompletar, el propósito de los datos obtenidos no coincide con la intención original del formulario.

Soluciones posibles

Para evitar el problema, todos los actores deben contribuir y ayudar a solucionar el problema:

1. Usuarios
2. Desarrolladores y diseñadores
3. navegadores

1. Usuarios

Lo único del lado del usuario sería asegurarse de que los datos que se muestran en la ventana emergente de autocompletar sean correctos .

Pero debemos recordar que el usuario es la víctima aquí. Podríamos culparlos por no prestar suficiente atención al hacer clic en el autocompletar, pero eso sería injusto. Además, hay muchas razones por las que una persona podría hacer clic en el botón por error y compartir sus datos por accidente. Por lo tanto, incluso los usuarios inteligentes y bien intencionados pueden caer en la trampa.

2. Desarrolladores y diseñadores

Seamos honestos. Si bien los desarrolladores no son la causa raíz del problema, juegan un papel clave en la explotación del patrón oscuro. Ya sea accidentalmente o con mala intención.

Y seamos responsables y honestos (esta vez de manera literal), porque eso es lo que los desarrolladores y diseñadores pueden hacer para generar confianza y hacer un buen uso de las funciones de autocompletar y autocompletar:

• Solo autocompleta los datos que necesitas.
• Indique claramente qué datos se recopilarán.
• No oculte campos de formulario que se enviarán más adelante.
• No engañe ni engañe a los usuarios para que envíen más datos.

Como medida extrema, tal vez intente evitar el autocompletado de ciertos campos. Pero, por supuesto, esto trae otros problemas, ya que hará que el formulario sea menos usable y accesible. Así que encontrar un equilibrio puede ser complicado.

Todo esto sin considerar la posibilidad de una vulnerabilidad XSS que podría explotar el patrón oscuro. Por supuesto, esa sería una historia completamente diferente y un problema aún más significativo.

3. Navegadores

Gran parte del trabajo tendría que hacerse desde el lado del navegador (especialmente en el lado de Chromium). Pero permítanme comenzar diciendo que no todo es malo en la forma en que los navegadores web manejan el autocompletado/autocompletado. Muchas cosas son buenas. Por ejemplo:

• Limitan los datos que se pueden compartir
  Los navegadores tienen una lista de campos para autocompletar que pueden no incluir todos los valores descritos en el estándar HTML.
• Encapsulan y agrupan datos
  Los navegadores separan la información personal y financiera para proteger valores críticos como las tarjetas de crédito. Safari tuvo algunos problemas con esto, pero fue menor.
• Advierten sobre los datos que serán compartidos
  A veces esto puede estar incompleto (Chrome) o no claro (Safari), pero alertan al usuario.

Aún así, muchos o todos los navegadores web pueden mejorar algunas cosas.

Mostrar todos los campos que se autocompletarán

Los navegadores siempre deben mostrar una lista de todos los campos que se completarán automáticamente dentro de la ventana emergente de autocompletar (en lugar de solo una lista parcial). Además, la información debe identificarse claramente como datos para compartir en lugar de mostrarse como una tarjeta de contacto regular que podría ser engañoso.

Firefox hizo un excelente trabajo en este punto, Safari hizo un buen trabajo en general y Chrome estuvo por debajo de los otros dos.

No activar el evento onChange en Autocompletar

Esta sería una solicitud problemática porque este comportamiento es parte de la definición de Autocompletar en el estándar HTML:

“El mecanismo de autocompletado debe ser implementado por el agente de usuario actuando como si el usuario hubiera modificado los datos del control […].”

Esto significa que los navegadores deben tratar los datos autocompletados como si los hubiera ingresado el usuario, activando así todos los eventos, mostrando los valores, etc. Incluso en un campo no disponible visualmente.

Evitar este comportamiento en elementos no visibles podría resolver el problema. Pero validar si un control de formulario está visible o no puede ser costoso para el navegador. Además, esta solución es solo parcial porque los desarrolladores aún podrían leer los valores incluso sin que las entradas activen eventos.

No permita que los desarrolladores lean los campos autocompletados antes del envío

Esto también sería problemático porque muchos desarrolladores a menudo confían en la lectura de los valores de campo antes del envío para validar los valores (por ejemplo, cuando el usuario se aleja de las entradas). Pero tendría sentido: el usuario no quiere compartir la información hasta que envíen el formulario, por lo que el navegador tampoco debería hacerlo.

Una alternativa a esto sería proporcionar datos falsos al leer valores autocompletados. Los navegadores web ya hacen algo como esto con los enlaces visitados, ¿por qué no hacer lo mismo con los campos de formulario autocompletados? Proporcione un galimatías como nombre, una dirección válida que coincida con las autoridades locales en lugar de la dirección del usuario, ¿un número de teléfono falso? Esto podría resolver las necesidades de validación del desarrollador mientras se protege la información personal del usuario.

Mostrar una lista completa de los campos/valores que el navegador compartirá claramente con el formulario sería un gran paso adelante. Los otros dos son ideales pero más de objetivos ambiciosos. Aún así, son iniciativas que mejorarían considerablemente la privacidad.

¿Seguiría siendo posible explotar el patrón oscuro de autocompletar? Por desgracia sí. Pero sería mucho más complicado. Y llegados a este punto, sería responsabilidad del usuario y deber del desarrollador evitar tal situación.

Conclusión

Podemos argumentar que el autocompletado no es un gran problema de seguridad (ni siquiera en Chrome) porque requiere la interacción del usuario para seleccionar la información. Sin embargo, también podríamos argumentar que la posible pérdida de datos justifica la acción adecuada. Y Chrome ha realizado más cambios por cuestiones de seguridad/usabilidad (relativamente) menos importantes (consulte alert() , prompt() y confirm() que lo que se podría hacer para proteger la información personal clave.

Luego tenemos el tema del patrón oscuro. Se puede evitar si cada uno hace su parte:

• Los usuarios deben tener cuidado con los formularios/datos que completan automáticamente;
• Los desarrolladores deben evitar explotar esos datos;
• Los navegadores deberían hacer un mejor trabajo en la protección de los datos de las personas.

En la raíz, este patrón oscuro es un problema del navegador (y principalmente un problema de Chrome), y no uno pequeño (la privacidad debe ser clave en línea). Pero hay una opción. Al final, explotar o no el patrón oscuro depende de los desarrolladores. Así que escojamos sabiamente y hagamos lo correcto.

Lectura adicional sobre la revista Smashing

• Mejor diseño de formularios: una cosa por página (estudio de caso), Adam Silver
• Inquietudes comunes y privacidad en formularios web, Vitaly Friedman
• Simplificación de estilos de forma con accent-color , Michelle Barker
• Tipos de entrada HTML5: ¿dónde están ahora?, Drew McLellan
• Formas y validación en Ionic React, Jerry Navi
• Mejores prácticas para el diseño de formularios móviles, Nick Babich