À la conquête du Shadow DOM pour une meilleure expérience de remplissage automatique avec Dashlane

11 février 2022 | Daniel Glazman

L'utilisation de Shadow DOM sur une page Web donnée a toujours posé des problèmes aux gestionnaires de mots de passe car les champs « shadow » sont masqués pour les appels DOM normaux, ce qui signifie que le remplissage automatique ne peut pas marcher pour un identifiant de connexion, un formulaire d'adresse, ou toute autre donnée qui pourrait être pertinente pour la page donnée. Grâce aux ingénieurs de Dashlane, cette limitation a été surmontée, ouvrant la voie à une expérience encore meilleure sur un plus large éventail de sites Web qu'auparavant.

Définitions : Shadow DOM

Le Shadow DOM est une technologie Web standard mise en œuvre par tous les navigateurs modernes (Chrome, Firefox, Edge, Opera, Safari, sur ordinateur et sur mobile) qui vous permet de compartimenter le markup et les comportements Web. En bref, chaque composant (avec son balisage interne, ses styles et ses comportements basés sur JavaScript) est attaché à un élément hôte (l'hôte fantôme) qui « cache » tout le contenu interne (le DOM fantôme) des appels DOM réguliers. Par exemple, les appels à document.querySelectorAll().

Dashlane is a leading Password Manager and data protection provider. Users can install Dashlane on their mobile devices or as an extension to their Web browsers on desktop and laptop computers.

Le problème

Comment fonctionne un gestionnaire de mots de passe comme Dashlane dans une page Web ?

Nous analysons vos pages Web et détectons les formulaires et leurs champs de formulaire via des appels DOM. Nous avons récemment basculé notre moteur d'analyse vers l'apprentissage automatique et nous sommes fiers de la vitesse incroyable de ce nouveau noyau.

Nous ajoutons notre icône Dashlane aux champs que nous comprenons et pouvons remplir automatiquement avec des données (si vous avez des données pertinentes, bien sûr) ou dans lesquels vous pouvez générer un mot de passe.

Lorsque vous placez le curseur à l'intérieur d'un tel champ, nous affichons une interface proposant différents choix : remplissage automatique à partir des données de votre coffre-fort (identifiants, identité, adresses, informations de paiement, passeport, etc.), génération d'un mot de passe sécurisé, etc.

Nous détectons l’utilisation de nouveaux identifiants sur le site ou leur mise à jour et nous affichons une autre interface permettant aux utilisateurs de stocker les données dans leur coffre-fort de données.

Tout cela est basé sur la plate-forme Web et en particulier sur les requêtes DOM (Document Object Model) qui nous permettent de parcourir une arborescence de documents, d'interroger des éléments dans cette arborescence, etc.

Comme nous l'avons évoqué en introduction, le contenu interne d'un Shadow DOM est complètement « caché » des appels DOM normaux. Si on prend un Shadow DOM d'hôte <div id="host"> et contenant par exemple un <input id="username" class="loginField"> :

document.querySelector(".loginField") répondra null

document.getElementById("username") répondra null

document.getElementById("host").firstElementChild répondra null

Vous pouvez facilement voir le Shadow DOM en action en utilisant l'inspecteur de votre navigateur préféré. Dans la capture d'écran ci-dessous (Chrome), vous pouvez voir le formulaire de connexion d'une banque bien connue et une vue de son balisage. Celui-ci utilise un Shadow DOM qui est visible dans la capture d'écran de l'inspecteur.

BLOCK NOT FOUND

Inscrivez-vous pour connaître toute l'actualité de Dashlane

JavaScript

Daniel Glazman