El llenado automático es una función notable que ofrece Dashlane, que permite a los usuarios rellenar cualquier formulario con un solo clic. Sin embargo, como desarrollador o simplemente como entusiasta de la web, puede ser consciente de que la codificación de sitios web varía significativamente, lo que plantea desafíos para nuestro motor de reconocimiento de formularios.
En este artículo ofreceremos información y técnicas valiosas para optimizar la compatibilidad de un sitio web con los administradores de contraseñas, centrándonos específicamente en Dashlane. Al poner en práctica estos trucos se puede mejorar la experiencia de llenado automático y optimizar el proceso de administración de contraseñas para los usuarios. Además, estos trucos también pueden hacer que el sitio web sea más accesible para todos los usuarios.
Comprensión de nuestro análisis de página
Manejo de escenarios básicos
El módulo de análisis de página que alimenta nuestro llenado automático emplea un enfoque sofisticado para comprender la estructura y el contexto de las páginas web. Profundicemos en los pasos clave implicados en el proceso usando un simple ejemplo de formulario de ingreso:
Identificación de etiquetas y campos de formulario: nuestro análisis comienza buscando etiquetas de formulario y sus campos de entrada asociados. Este paso nos garantiza localizar las áreas donde es precisa la entrada del usuario.
Extracción del contexto relevante: para recopilar información exhaustiva nuestro módulo extrae varios elementos de la página. Esto incluye capturar el título de la página, los encabezados dentro del formulario (como h1, h2, h3), las etiquetas relevantes usando el atributo for, el contenido de texto cercano y otros elementos de texto. Al tener en cuenta esta información contextual, mejoramos nuestra comprensión del propósito del formulario y sus campos asociados.
Aprovechamiento de la inteligencia artificial para la clasificación: mediante el aprendizaje automático, nuestro módulo clasifica los datos extraídos para dar sentido a la estructura del formulario y el papel de cada campo.
Los resultados obtenidos del módulo de análisis cumplen varias funciones esenciales:
Llenado automático de datos de formularios desde la caja fuerte del usuario: con la información obtenida del análisis, rellenamos los campos del formulario con datos de la caja fuerte del usuario.
Generación de contraseñas aleatorias para campos de formulario: al encontrar un campo de contraseña, nuestro módulo puede generar contraseñas seguras y únicas, lo que ofrece a los usuarios la comodidad de rellenar automáticamente ese campo con una contraseña segura.
Automatización del ingreso con validación de formularios: nuestro módulo de análisis hace posible nuestra función de ingreso automático, que valida automáticamente los formularios de ingreso en función de la información capturada. Esto elimina la necesidad de que los usuarios envíen el formulario de forma manual, lo que simplifica el proceso de ingreso.
Captura de datos de formularios completados: nuestro módulo puede ofrecer la captura de los datos del formulario introducidos manualmente por el usuario, lo que garantiza que toda la información relevante se almacene de forma segura y se pueda usar para el llenado automático.
Manejo de escenarios complejos
Además del proceso de análisis básico, nuestro módulo está diseñado para abordar escenarios más complejos, lo que garantiza un análisis óptimo en varias situaciones desafiantes. Exploremos algunos de estos escenarios y cómo los maneja nuestro módulo de análisis.
Páginas dinámicas: para las páginas web dinámicas que sufren cambios en el DOM, como animaciones, transiciones o modificaciones desencadenadas por las interacciones del usuario, nuestro módulo escucha activamente estos cambios. Cada vez que se produce una modificación, la página se vuelve a analizar para garantizar el reconocimiento y la interpretación precisos de los elementos del formulario. Sin embargo, para evitar el reanálisis excesivo y la posible congelación de la página, implementamos salvaguardas para limitar el análisis frecuente y mantener la facilidad de uso sin problemas.
Páginas que contienen iframes: nuestro módulo adopta un enfoque específico al encontrar páginas que contienen iframes. Cada iframe funciona dentro de su contexto JavaScript aislado, con la visibilidad limitada al DOM de su propio marco. Para garantizar el reconocimiento integral de formularios, nuestro módulo extrae datos de cada iframe de forma independiente. Usamos el envío de mensajes para agregar los datos capturados en el mainframe, lo que permite una integración perfecta de la información del formulario procedente de todos los iframes.
Componentes web encapsulados: la tecnología web shadow DOM permite la creación de componentes reutilizables siguiendo las especificaciones estándar del W3C. Sin embargo, como los métodos de exploración estándar como Element.querySelectorAll o Element.children se bloquean con esta técnica, el análisis de componentes encapsulados dentro del shadow DOM requiere el uso de técnicas alternativas.
Cómo se abordan las inexactitudes del análisis
Aunque nuestro módulo de análisis se esfuerza por ofrecer resultados precisos, pueden producirse inexactitudes. En tales casos, usamos varios enfoques para abordar y rectificar estos problemas. Estas son dos estrategias clave que usamos para mejorar la precisión del análisis:
Mejora del modelo mediante aprendizaje automático: para mejorar continuamente el rendimiento de nuestro módulo de análisis, aprovechamos las técnicas de aprendizaje automático. Esto implica extraer datos de las páginas web y etiquetar manualmente la información recopilada. Los datos etiquetados manualmente se agregan luego a nuestro conjunto de datos de entrenamiento. Al entrenar un nuevo modelo con este conjunto de datos ampliado, nuestro objetivo es mejorar la precisión de los resultados del análisis. El objetivo final es lograr un reconocimiento de formularios más preciso y fiable.
Correcciones manuales para sitios web importantes: para sitios web muy significativos que requieren atención especial, adoptamos un enfoque de mantenimiento más intensivo. Las correcciones manuales se implementan caso por caso. Esto implica mantener una lista seleccionada de sitios web junto con selectores y clasificaciones de elementos seleccionados manualmente. Este proceso de corrección manual nos permite afinar el análisis específicamente para estos sitios críticos, lo que mejora aún más su compatibilidad.
Prácticas recomendadas de codificación para el desarrollo web
La regla general es simple: respetar los estándares web. Seguir las prácticas establecidas de HTML, CSS y JavaScript garantiza que el sitio funcione de forma fiable en diferentes plataformas y dispositivos, incluidos los administradores de contraseñas.
Recomendaciones básicas
Use la etiqueta : al implementar formularios, use la etiqueta HTML estándar . Si trabaja con elementos personalizados, asegúrese de incluir el atributo role=”form”. Esto ayuda a los administradores de contraseñas a identificar y manejar los formularios de forma adecuada.
Evite el anidamiento de varios formularios: para mantener la compatibilidad, evite el anidamiento de varios formularios diferentes dentro del mismo elemento . Cada formulario debe tener su etiqueta dedicada para evitar confusiones de los administradores de contraseñas.
Use el atributo de autocompletado: aunque la compatibilidad con el atributo de autocompletado puede variar, sigue siendo útil incluirlo en las entradas de formulario.
Incluya la etiqueta : para cada campo de entrada, use la etiqueta ya sea con el atributo for o envolviendo el elemento de entrada directamente dentro del elemento . Esto garantiza la asociación adecuada entre las etiquetas y las entradas.
Asigne ID inequívocos a los campos de entrada: cada campo de entrada debe tener un atributo id único con valores descriptivos e inequívocos (si su marco lo permite).
Use los botones de envío adecuados: use input type=”submit” o button type=”submit” para el botón de envío de su formulario. Esto permite a los administradores de contraseñas reconocer y manejar el proceso de envío correctamente.
Ejemplo incorrecto:
div id=”myForm-body”>
Nombre de usuario:
Ejemplo correcto:
Un esfuerzo adicional
Tenga en cuenta las posibles interferencias: ciertas prácticas pueden interferir con la funcionalidad del administrador de contraseñas. Evite reescribir los datos introducidos por el usuario directamente en los campos de entrada, ya que esto puede interrumpir las funciones del administrador de contraseñas. Del mismo modo, algunas técnicas de validación de datos del lado del cliente pueden causar problemas. Recuerde siempre implementar la validación del lado del servidor (y, si es posible, solo del lado del servidor porque los atacantes pueden anular la validación del lado del cliente) y valore métodos de entrada alternativos (copiar y pegar, teclados virtuales, etc.) al desarrollar. Por ejemplo, la ejecución de la validación en eventos de teclado, como keyup o keydown, puede interrumpir el copiado y pegado. Le recomendamos usar el evento input o change dependiendo de sus necesidades.
Limite las mutaciones de página frecuentes: las mutaciones excesivas pueden afectar negativamente a los administradores de contraseñas, así como a otras extensiones. Esfuércese por hallar el equilibrio entre la funcionalidad y el rendimiento para minimizar el consumo de recursos en las máquinas de los usuarios.
Evite la sobrecarga de páginas con elementos invisibles: es importante no inundar las páginas web con elementos invisibles excesivos, como campos ocultos o divs. Estos elementos pueden confundir a los administradores de contraseñas y afectar a su capacidad para reconocer e interactuar con las entradas de formularios.
Tenga cuidado al usar diseños específicos: los formularios progresivos o en cascada (donde los campos aparecen o se vuelven editables a medida que avanza) pueden modificar los resultados del análisis de nuestro módulo. Del mismo modo, muchos administradores de contraseñas siguen teniendo una compatibilidad con Shadow DOM muy limitada (Dashlane comenzó a ofrecer compatibilidad en 2022).
Al adherirse a los estándares web y las directrices de accesibilidad, aumenta significativamente las posibilidades de lograr una compatibilidad óptima con los administradores de contraseñas. Dé prioridad al uso de elementos de formulario estándar, etiquetando las entradas correctamente y evitando las prácticas que puedan interferir con la funcionalidad del administrador de contraseñas.
Recuerde que un sitio web bien optimizado no solo mejora la experiencia del usuario, sino que también garantiza una administración de contraseñas segura y cómoda para sus usuarios.
¿Quiere profundizar más en la arquitectura de seguridad de Dashlane? Descargue nuestro Libro blanco de seguridad.
Consejos para el desarrollo móvil
Para el desarrollo móvil, las directrices para optimizar la compatibilidad con los administradores de contraseñas siguen siendo similares: codifique sus formularios de forma clara y directa. Sin embargo, hay algunas consideraciones adicionales a tener en cuenta específicamente para las plataformas móviles. Estos son dos puntos clave que hay que recordar:
Aproveche las API nativas para el rellenado automático: el rellenado automático en dispositivos móviles se basa en las API nativas proporcionadas por cada sistema operativo. Es esencial usar ID no ambiguos y tipos de entrada bien definidos, especialmente en dispositivos móviles. Por ejemplo, en una aplicación para iOS, hay cuatro tipos de UITextContentType disponibles: .username, .password, .newPassword y .oneTimeCode. Al usar estos tipos de entrada específicos, puede mejorar la experiencia de llenado automático en dispositivos móviles y garantizar la compatibilidad con los administradores de contraseñas.
Declare los dominios asociados para aplicaciones móviles: en el caso de las aplicaciones móviles, es necesario declarar el dominio asociado directamente dentro de su aplicación. Esto garantiza que los administradores de contraseñas puedan sugerir las credenciales correctas para la aplicación.
Caso práctico
Revisemos un ejemplo bueno y uno malo. Ambos formularios provienen de sitios web muy populares. Este es nuestro ejemplo bueno:
Uso del elemento
Uso del atributo id
Ubicación del botón de envío dentro del elemento
El uso de aria-label en lugar de también es bueno
Y este es el ejemplo no tan bueno:
No hay elemento
No hay id en los campos
No hay botón de envío claro
Todo esto hace que sea difícil para nuestro motor comprender qué tipo de formulario es. Por tanto, asegúrese de seguir el ejemplo bueno. Recuerde: seguir las prácticas recomendadas significa dar a sus usuarios acceso a la administración de contraseñas segura, y también permite herramientas de accesibilidad que benefician a todos los usuarios. ¡Feliz codificación!
Nota: usamos cookies en nuestro sitio para ofrecerle la mejor experiencia. Las cookies no esenciales se pueden desactivar seleccionando «Rechazar cookies no esenciales» más abajo. Respetamos las opciones globales de «no rastrear» y equivalentes en su navegador. Seleccione sus opciones aquí:
