La saisie automatique est une fonctionnalité remarquable offerte par Dashlane, qui permet aux utilisateurs de remplir n’importe quel formulaire en un seul clic. Cependant, en tant que développeur ou simplement en tant que passionné(e) du Web, vous savez peut-être que le code peut varier sensiblement d’un site à l’autre, ce qui complexifie la tâche de notre moteur de reconnaissance de formulaire.
Dans cet article, je vais partager des informations et des techniques importantes pour optimiser la compatibilité de votre site Web avec les gestionnaires de mots de passe, en mettant l’accent sur Dashlane. Mettre en œuvre ces astuces vous permettra d’améliorer l’expérience de saisie automatique et de simplifier le processus de gestion des mots de passe pour vos utilisateurs. De plus, ces astuces peuvent également rendre votre site Web plus accessible à tous les utilisateurs.
Comprendre notre analyse de page
Gérer les scénarios de base
Le module d’analyse de page qui alimente notre fonctionnalité de saisie automatique utilise une approche sophistiquée pour comprendre la structure et le contexte des pages Web. Examinons les étapes clés du processus en nous appuyant sur l’exemple d’un simple formulaire de connexion :
Identifier les balises et les champs du formulaire : notre analyse commence par la recherche de balises de formulaire et des champs de saisie qui leurs sont associés. Cette étape garantit que nous localisons les zones où une saisie de l’utilisateur est nécessaire.
Extraire un contexte pertinent : pour recueillir des informations exhaustives, notre module extrait divers éléments de la page. Cela comprend la capture du titre de la page, des en-têtes dans le formulaire (comme h1, h2, h3), des étiquettes pertinentes à l’aide de l’attribut for, du texte à proximité et d’autres éléments textuels. En prenant en compte ces informations contextuelles, nous améliorons notre compréhension de l’objectif du formulaire et de ses champs associés.
Tirer parti de l’intelligence artificielle pour la classification : à l’aide du machine learning, notre module classifie les données extraites pour donner un sens à la structure du formulaire et au rôle de chaque champ.
Les résultats obtenus à partir du module d’analyse servent plusieurs fonctions essentielles :
Saisir automatiquement des données dans le formulaire à partir du coffre-fort de l’utilisateur : grâce aux informations obtenues par l’analyse, nous remplissons les champs du formulaire avec les données du coffre-fort de l’utilisateur.
Générer des mots de passe aléatoires pour les champs de formulaire : lorsque vous vous trouvez face à un champ de mots de passe, notre module peut générer des mots de passe forts et uniques, offrant ainsi aux utilisateurs la commodité de remplir automatiquement ce champ avec un mot de passe sécurisé.
Connexion automatique grâce à la validation des formulaires : notre module d’analyse rend possible notre fonctionnalité de connexion automatique, car il valide automatiquement les formulaires de connexion en fonction des informations capturées. Les utilisateurs n’ont ainsi plus besoin de soumettre manuellement le formulaire, ce qui simplifie le processus de connexion.
Capturer des données à partir de formulaires remplis : notre module peut offrir de capturer les données de formulaire saisies manuellement par l’utilisateur, ce qui garantit que toutes les informations pertinentes sont stockées en toute sécurité et peuvent être utilisées pour la saisie automatique.
Gérer des scénarios complexes
En plus du processus d’analyse de base, notre module est conçu pour gérer des scénarios plus complexes et garantir ainsi une analyse optimale dans diverses situations difficiles. Examinons quelques-uns de ces scénarios et comment notre module d’analyse les gère.
Pages dynamiques : pour les pages Web dynamiques qui subissent des modifications dans le DOM, telles que des animations, des transitions ou des modifications déclenchées par les interactions de l’utilisateur, notre module écoute activement ces modifications. Chaque fois qu’une modification se produit, la page est réexaminée pour garantir une reconnaissance et une interprétation précises des éléments de formulaire. Cependant, pour éviter un trop grand nombre d’analyses et le plantage potentiel de la page, nous mettons en œuvre des mesures de protection pour limiter leur fréquence et maintenir une utilisation fluide.
Pages comportant des iframes : notre module adopte une approche spécifique lorsque vous vous trouvez sur des pages qui comportent des iframes. Chaque iframe fonctionne dans son contexte JavaScript isolé, avec une visibilité limitée au DOM de son propre cadre. Pour garantir une reconnaissance complète du formulaire, notre module extrait des données de chaque iframe de manière indépendante. Nous utilisons l’envoi de messages pour agréger les données capturées dans l’unité centrale, ce qui permet une intégration transparente des informations de formulaire à partir de tous les iframes.
Composants Web encapsulés : la technologie Web Shadow DOM permet la création de composants réutilisables selon les spécifications W3C standard. Cependant, comme les méthodes d’exploration standard telles que Element.querySelectorAll ou Element.children sont bloquées si l’on emploie cette technique, l’analyse des composants encapsulés dans le Shadow DOM nécessite l’utilisation de méthodes alternatives.
Corriger les inexactitudes de l’analyse
Bien que notre module d’analyse s’efforce de fournir des résultats précis, des inexactitudes peuvent se produire. Dans ce cas, nous utilisons diverses approches pour résoudre et rectifier ces problèmes. Voici deux stratégies clés que nous utilisons pour améliorer la précision de l’analyse :
Amélioration du modèle de machine learning : nous exploitons des techniques de machine learning pour améliorer en permanence les performances de notre module d’analyse. Il s’agit d’extraire des données à partir de pages Web et d’étiqueter manuellement les informations collectées. Les données étiquetées manuellement sont ensuite ajoutées à notre jeu de données d’entraînement. Entrainer un nouveau modèle à l’aide de cet ensemble élargi de données a pour but d’améliorer la précision des résultats de l’analyse. L’objectif final est de parvenir à une reconnaissance de formulaire plus précise et fiable.
Corrections manuelles pour les sites Web importants : pour les sites Web très importants qui nécessitent une attention spéciale, nous adoptons une approche de maintenance plus intensive. Des corrections manuelles sont apportées au cas par cas. Cela implique la création d’une liste sélective de sites Web, ainsi que des sélecteurs et classificateurs d’éléments choisis manuellement. Ce processus de correction manuel nous permet d’affiner l’analyse spécifiquement pour ces sites critiques, ce qui améliore d’autant plus leur compatibilité.
Bonnes pratiques de codage pour le développement Web
La règle générale est simple : respecter les normes Web. Le respect des pratiques HTML, CSS et JavaScript établies garantit que votre site fonctionne de manière fiable sur différentes plates-formes et appareils, y compris avec les gestionnaires de mots de passe.
Recommandations de base
Utilisez la balise : lorsque vous ajoutez un formulaire, utilisez la balise HTML standard . Si vous travaillez avec des éléments personnalisés, assurez-vous d’inclure l’attribut role=”form”. Cela aide les gestionnaires de mots de passe à identifier et à gérer les formulaires correctement.
Ne pas imbriquer plusieurs formulaires : pour maintenir la compatibilité, évitez d’imbriquer plusieurs formulaires différents dans le même élément . Chaque formulaire doit avoir sa balise dédiée pour éviter toute confusion pour les gestionnaires de mots de passe.
Utiliser l’attribut autocomplete : bien que la prise en charge de l’attribut autocomplete ne soit pas toujours garantie, il est toujours utile de l’inclure à vos entrées de formulaire.
Inclure la balise : pour chaque champ de saisie, utilisez la balise soit avec l’attribut for, soit en incluant l’élément de saisie directement au sein de l’élément . Cela garantit l’association correcte entre les étiquettes et les entrées.
Attribuer des identifiants non ambigus aux champs de saisie : chaque champ de saisie doit avoir un attribut id unique, avec des valeurs descriptives et non ambiguës (si votre framework le permet).
Utiliser des boutons de soumission appropriés : utilisez soit input type=”submit” soit button type=”submit” en guise de bouton de soumission de votre formulaire. Cela permet aux gestionnaires de mots de passe de reconnaitre et de gérer correctement le processus de soumission.
Exemple incorrect :
div id=”myForm-body”>
Nom d'utilisateur :
Exemple correct :
Pour aller plus loin
Faites attention aux interférences potentielles : certaines pratiques peuvent interférer avec les fonctionnalités du gestionnaire de mots de passe. Évitez de réécrire les données saisies par l'utilisateur directement dans les champs de saisie, car cela peut perturber les fonctionnalités du gestionnaire de mots de passe. De même, certaines techniques de validation des données côté client peuvent causer des problèmes. N'oubliez pas de toujours mettre en œuvre une validation côté serveur (et uniquement côté serveur si possible, car la validation côté client peut être contournée par les pirates) et d'envisager des méthodes de saisie alternatives (copier-coller, claviers virtuels, etc.) lors du développement. Par exemple, l'exécution d'une validation sur des événements de clavier, tels que keyup ou keydown, peut perturber le copier-coller. Suivant vos besoins, nous vous recommandons d'utiliser l'événement input ou change.
Limiter les mutations de page fréquentes : des mutations excessives peuvent avoir un impact négatif sur les gestionnaires de mots de passe et sur d'autres extensions. Cherchez à trouver un équilibre entre fonctionnalités et performances pour minimiser l'utilisation des ressources sur les machines des utilisateurs.
Éviter de surcharger les pages avec des éléments invisibles : il est important de ne pas submerger les pages Web d'éléments invisibles, tels que des champs ou des div cachés. Ces éléments peuvent perturber les gestionnaires de mots de passe et impacter leur capacité à reconnaitre et à interagir avec les entrées d'un formulaire.
Faites attention lorsque vous utilisez des mises en page spécifiques : les formulaires progressifs ou en cascade (où des champs apparaissent ou deviennent modifiables au fur et à mesure de la progression de l'utilisateur) peuvent modifier les résultats de l'analyse de notre module. De même, de nombreux gestionnaires de mots de passe ont encore une prise en charge très limitée des Shadow DOM (Dashlane a commencé à les prendre en charge en 2022).
Adhérer aux normes Web et aux directives en matière d'accessibilité augmente de manière significative les chances d'une compatibilité optimale avec les gestionnaires de mots de passe. Donnez la priorité à l'utilisation d'éléments de formulaire standards, à l'étiquetage correct des entrées et évitez les pratiques qui peuvent interférer avec les fonctionnalités du gestionnaire de mots de passe.
N'oubliez pas qu'en plus d'améliorer l'expérience utilisateur, un site Web bien optimisé garantit une gestion sécurisée et pratique des mots de passe de vos utilisateurs.
Vous souhaitez vous plonger dans l'architecture de sécurité de Dashlane ? Téléchargez notre Livre blanc sur la sécurité.
Conseils pour le développement mobile
Pour le développement mobile, les directives pour optimiser la compatibilité avec les gestionnaires de mots de passe restent similaires : codez vos formulaires de manière claire et directe. Cependant, il y a quelques facteurs supplémentaires à garder à l'esprit spécifiquement pour les plates-formes mobiles. Voici deux points clés à retenir :
Tirer parti des API natives pour le remplissage automatique : le remplissage automatique sur mobile s'appuie sur les API natives fournies par chaque système d'exploitation. Il est essentiel d'utiliser des identifiants non ambigus et des types de saisie bien définis, surtout sur les appareils mobiles. Par exemple, dans une application iOS, il y a 4 types de UITextContentType disponibles : .username, .password, .newPassword et .oneTimeCode. En utilisant ces types de saisie spécifiques, vous pouvez améliorer l'expérience de saisie automatique sur mobile et garantir la compatibilité avec les gestionnaires de mots de passe.
Déclarer les domaines associés pour les applications mobiles : dans le cas des applications mobiles, il est nécessaire de déclarer le domaine associé directement dans votre application. Cela garantit que les gestionnaires de mots de passe peuvent suggérer les identifiants corrects pour l'application.
Étude de cas
Passons en revue un bon et un mauvais exemple. Les deux formulaires proviennent de sites Web très populaires. Voici notre bon exemple :
Utilisation de l'élément
Utilisation de l'attribut id
Placement du bouton de soumission à l'intérieur de l'élément
L'utilisation d'aria-label au lieu de fonctionne aussi
Et voici l'exemple moins bon :
Aucun élément
Pas d'id sur les champs
Aucun bouton de soumission clair
À cause de tout cela, notre moteur a du mal à comprendre de quel type de formulaire il s'agit. Assurez-vous donc de suivre le bon exemple ! N'oubliez pas : adhérer aux bonnes pratiques signifie donner accès à vos utilisateurs à une gestion sécurisée des mots de passe, en plus de permettre l'utilisation d'outils d'accessibilité qui profitent à tous les utilisateurs. Bon codage !
Remarque : nous utilisons des cookies sur notre site pour vous offrir la meilleure expérience possible. Veuillez les accepter ou modifier vos préférences ici :Préférences relatives aux cookies.
