Le motif sombre de remplissage automatique —

Un « modèle sombre » est un modèle UX trompeur qui incite les utilisateurs à faire des choses qu'ils ne veulent peut-être pas vraiment faire. Dans cet article, Alvaro Montoro fait une petite expérience pour découvrir dans quelle mesure la confidentialité est supprimée des utilisateurs sur trois navigateurs différents.

Un formulaire d'inscription à un journal comportait des champs pour le nom, l'adresse e-mail et le mot de passe. J'ai donc commencé à taper dans le champ du nom et la saisie automatique a suggéré mon profil. Mais il y avait quelque chose de funky . La suggestion de saisie semi-automatique incluait mon adresse postale. Inutile de dire que c'était déroutant : l'adresse n'était pas un champ dans le formulaire. Pourquoi a-t-il même été suggéré ?

Au moment où cette question a commencé à se former dans mon esprit, mon cerveau avait déjà signalé à mon doigt de cliquer sur la suggestion, et c'était fait. Ensuite, j'ai été dirigé vers une deuxième page de formulaire qui demandait des informations supplémentaires telles que l'adresse, le téléphone, la date de naissance, etc. Et tous ces champs avaient également été pré-remplis par la fonctionnalité de remplissage automatique.

J'ai soupiré de soulagement. Il s'agissait d'un formulaire « en plusieurs étapes » et non d'une astuce du site Web. C'était un journal réputé, après tout. J'ai supprimé toutes les informations facultatives de la deuxième page, terminé l'inscription et continué.

Cette interaction (troublée) a mis en évidence l'un des risques liés à l'utilisation des fonctionnalités de saisie semi-automatique.

Saisie semi-automatique et saisie automatique

Ils peuvent semblent similaires, mais la saisie semi-automatique et le remplissage automatique ne sont pas la même chose . Bien qu'ils sont étroitement liés :

• Le remplissage automatique est une fonctionnalité de navigateur qui permet aux utilisateurs d'enregistrer des informations (sur le navigateur ou le système d'exploitation) et de les utiliser sur des formulaires Web.
• La saisie semi-automatique est un attribut HTML qui fournit des directives au navigateur sur la façon de (ou non) remplir automatiquement les champs d'un formulaire Web. stocke les données et essaie de les faire correspondre dans un formulaire Web (en fonction des champs nametype ou id), et la saisie semi-automatique guide le navigateur sur la façon de procéder (quelles informations sont attendues dans chaque champ).

  La saisie semi-automatique est une fonctionnalité puissante avec de nombreuses options qui permet de spécifier de nombreux types de valeurs différents :[19659008]Personnel : Nom, adresse, téléphone, date de naissance ;

• Financier : numéro de carte de crédit, nom, date d'expiration e;
• Données démographiques : emplacement, âge, sexe, langue ;
• Professionnel : entreprise et titre du poste.

Le remplissage automatique est une fonctionnalité répandue, par choix ou par accident : qui n'a pas accepté de laisser le navigateur enregistrer/utiliser les informations du formulaire Web, volontairement ou par erreur ? Et cela pourrait être un problème – particulièrement combiné avec une mauvaise utilisation de la saisie semi-automatique (et le nombre scandaleux ajouté d'e-mails de phishing et de SMS de nos jours.)

Risques pour la vie privée

Ces deux fonctionnalités présentent (au moins) deux risques principaux pour l'utilisateur, tous deux liés à ses données personnelles et à sa vie privée :

1. Des champs non visibles sont renseignés (ce n'est pas la même chose que des champs de type masqué) ;[19659013]Les informations saisies automatiquement peuvent être lues via JavaScript avant même que l'utilisateur ne soumette le formulaire.

Cela signifie que une fois qu'un utilisateur choisit de remplir automatiquement les informations, tous les champs seront disponibles pour que le développeur puisse les lire. Encore une fois, indépendamment de l'utilisateur soumettant ou non le formulaire, sans que l'utilisateur sache quels champs ont été réellement renseignés.

Cette dernière partie est relative : savoir quels champs sont renseignés dépendra du navigateur. Safari et Firefox font du bon travail à cet égard (comme nous le verrons bientôt ci-dessous). D'un autre côté, Chrome, le navigateur le plus populaire du moment, offre une mauvaise expérience qui peut inciter même les utilisateurs les plus avertis à partager leurs informations personnelles.

Si l'on considère également les moments où l'utilisateur choisit accidentellement de remplir les champs, cette question devient plus pertinente. Voyons cela plus en détail avec un exemple.

Une petite expérience

J'ai effectué une petite expérience en créant un formulaire avec de nombreux champs et en attachant l'attribut de saisie semi-automatique avec différentes valeurs. Ensuite, j'ai joué un peu avec la structure du formulaire :

• J'ai caché la plupart des champs en les mettant dans un conteneur hors écran (au lieu d'utiliser hidden ou type="hidden" );
• J'ai supprimé les champs visuellement masqués de l'ordre de tabulation (afin que les utilisateurs du clavier ignorent les champs masqués);
• J'ai essayé de trier les champs dans un ordre différent (et à ma grande surprise, cela a eu un impact sur le remplissage automatique !) .

Au final, le code du formulaire ressemblait à ceci :

  Nom complet

  Email

  ZIP
  

    
    Prénom

    Nom


    honorific-prefix

    Organisation 

    Téléphone


    adresse

    Ville

    État

    Niveau3

    Niveau4

    Pays


    Anniversaire

    Langue

    Sexe

    Photo

    URL

     ]IMPP


    Nom d'utilisateur

    Mot de passe

    Mot de passe Nouveau

    Mot de passe actuel


    CC#

    CC Nom

    CC expiration

    CC Code postal

  
  S ubmit

Remarque : J'ai créé cette démo il y a quelque temps, et le standard est un document vivant. Depuis lors, certains des noms de saisie semi-automatique ont changé. Par exemple, nous pouvons maintenant spécifier new-password et current-password ou plus de détails pour l'adresse ou la carte de crédit qui n'étaient pas disponibles auparavant.

Ce formulaire avait trois champs visibles (nome-mail et code postal). Bien que ce formulaire soit courant parmi les compagnies d'assurance, le câble et d'autres fournisseurs de services, il n'est peut-être pas trop répandu, j'ai donc réduit le formulaire encore plus avec un seul champ de courrier électronique. Nous voyons cela partout pour vous inscrire à des sites Web, des newsletters ou des mises à jour. Vous pouvez voir une démo en cours ici :

Si vous avez utilisé la saisie semi-automatique pour remplir le formulaire, vous avez déjà partagé plus d'informations que ce que vous voulu (ne vous inquiétez pas, tout est local et non partagé avec moi). Et dans Chrome, cela aurait même pu ressembler à un formulaire d'abonnement tout à fait normal.

Si vous n'avez pas / n'utilisez pas le remplissage automatique, ne vous inquiétez pas. Voici un résumé de l'expérience sur trois navigateurs différents.

Remarque : Tous ces tests supposent l'utilisation du remplissage automatique et sont basés sur un faux profil !

Safari[19659071]Lorsque vous cliquez sur un contrôle de formulaire, Safari affiche une icône sur le côté droit du champ. En cliquant dessus, une fenêtre contextuelle s'affichera avec les informations que le navigateur partagera avec le formulaire :

Une bonne chose : il affiche toutes les données qui seront partagées dans le cadre du formulaire. Non seulement les données des champs visibles, mais tous. À ce stade, l'utilisateur peut soupçonner que quelque chose ne va pas tout à fait. Il y a quelque chose de louche.

Lorsque j'ai réduit le formulaire au champ de courrier électronique, Safari a fait quelque chose d'intéressant. La fenêtre contextuelle de remplissage automatique était différente :

Il indique qu'il ne partagera que l'e-mail (et il ne partagera que cette information). Mais les coordonnées ci-dessous peuvent être plus délicates. Lorsque nous cliquons sur ce bouton, le navigateur affiche un résumé du profil avec ses données partagées. Mais ce n'est clairement indiqué nulle part. Cela ressemble simplement à une carte de contact ordinaire avec des options « partager/ne pas partager ». Après avoir cliqué sur le bouton « Remplissage automatique », le formulaire est rempli avec toutes les données. Pas seulement l'e-mail :

Il existe donc un moyen pour un utilisateur de partager des informations avec le formulaire par inadvertance. C'est délicat mais pas trop tiré par les cheveux étant donné que c'est celui « surligné » avec une icône parmi les deux options possibles.

Chose amusante, les navigateurs séparent les données personnelles des données de carte de crédit, mais Safari a rempli une partie du informations de carte de crédit basées sur les données personnelles (nom et code postal.)

Firefox

L'utilisation de la saisie automatique dans Firefox est un peu plus complexe. Ce n'est pas automatique comme dans Chrome, et il n'y a pas d'icône comme dans Safari. Les utilisateurs devront commencer à taper ou cliquer une deuxième fois pour voir la fenêtre contextuelle de remplissage automatique, qui comportera une note avec chaque catégorie que le navigateur remplira, pas seulement les champs visibles :

Test avec le formulaire de courrier électronique uniquement, Firefox a présenté la même fenêtre contextuelle de remplissage automatique indiquant les catégories de champs qu'il remplirait. Aucune différence.

Et comme pour les autres navigateurs, après le remplissage automatique, nous pouvions lire toutes les valeurs avec JavaScript.

Firefox était le meilleur des trois : il indiquait clairement quelles informations seraient partagées avec le formulaire indépendamment des champs ou de leur ordre. Et cela a caché la fonctionnalité de remplissage automatique, une deuxième interaction de l'utilisateur s'est produite.

Un utilisateur du clavier pouvait sélectionner le remplissage automatique sans s'en rendre compte, en entrant dans la bulle contextuelle et en appuyant sur la touche de tabulation.

Chrome

Puis vint le tour de Chrome. (Ici, j'utilise "Chrome", mais les résultats étaient similaires pour plusieurs navigateurs basés sur Chromium testés.) J'ai cliqué sur le champ et, sans aucune autre interaction, la fenêtre contextuelle de remplissage automatique s'est affichée. Alors que Firefox et Safari avaient beaucoup de choses en commun, Chrome est totalement différent : il n'affiche que deux valeurs, et les deux sont visibles. de la fenêtre contextuelle de remplissage automatique sur Chrome n'affichant que deux champs : nom et code postal, tous deux visibles. ( Grand aperçu)

Cet affichage était par conception. J'ai volontairement choisi l'ordre des champs pour obtenir cette combinaison particulière de contrôles visibles et de suggestions de saisie semi-automatique. Cependant, il semble que Chrome donne à certaines propriétés de saisie semi-automatique plus de « poids » pour la deuxième valeur. Et cela fait que la fenêtre contextuelle change en fonction de l'ordre des champs dans le formulaire.

Le test avec la deuxième version du formulaire n'était pas beaucoup mieux :

Bien que la fenêtre contextuelle affiche un champ qui n'est pas visible (le nom), l'objectif du nom dans la fenêtre contextuelle n'est pas clair. Un utilisateur expérimenté peut savoir que cela se produit parce que le nom est partagé, mais un utilisateur moyen (et même les plus expérimentés) peut penser que l'e-mail est associé au profil portant ce nom. Il n'y a aucune indication des données que le navigateur partagera avec le formulaire.

Et dès que l'utilisateur clique sur le bouton de remplissage automatique, les données sont disponibles pour que le développeur puisse les lire avec JavaScript :

Chrome était le pire des contrevenants : il partageait les informations automatiquement, les données impliquées n'étaient pas claires et les suggestions de remplissage automatique ont changé en fonction de l'ordre et des attributs des commandes.

Les deux premiers problèmes sont communs à tous/plusieurs. navigateurs, au point qu'il peut même être considéré comme une fonctionnalité. Cependant, le troisième problème est exclusif aux navigateurs Chromium, et il facilite un motif sombre fragmentaire. des navigateurs en ligne (y compris Chrome et Chromium). peut-être pas vraiment envie de le faire.

« Lorsque vous utilisez des sites Web et des applications, vous ne lisez pas chaque mot sur chaque page – vous parcourez la lecture et faites des hypothèses. Si une entreprise veut vous inciter à faire quelque chose, elle peut en tirer parti en donnant l'impression qu'une page dit une chose alors qu'elle en dit en fait une autre. »

— Harry Brignull, darkpatterns.org

Le comportement décrit dans les points précédents est clairement une expérience utilisateur trompeuse. Les utilisateurs non expérimentés ne se rendront pas compte qu'ils partagent leurs données personnelles. Même les personnes les plus férus de technologie peuvent être trompées car Chrome donne l'impression que l'option sélectionnée appartient à un profil au lieu d'indiquer clairement quelles informations sont partagées.

Les implémentations du navigateur provoquent ce comportement, mais cela nécessite que le développeur le fasse. le mettre en place pour l'exploiter. Malheureusement, il existe déjà des entreprises prêtes à l'exploiter, la vendant comme une fonctionnalité pour obtenir des prospects.

Tant qu'un modèle sombre persiste, il peut également être illégal. En effet, il enfreint de nombreux principes relatifs au traitement des données personnelles spécifiés à l'article 5 du Règlement général sur la protection des données (RGPD) européen :

• Légalité, équité et transparence
  Le processus est tout sauf transparent.
• Limitation de la finalité
  Les données sont traitées d'une manière incompatible avec la finalité initiale.
• Minimisation des données
  C'est tout le contraire. Optimisation des données : obtenez autant d'informations que possible.

Par exemple, si vous souhaitez vous inscrire à une newsletter ou demander des informations sur un produit et que vous fournissez votre adresse e-mail, le site Web n'a aucun droit légal d'obtenir votre nom, adresse , date de naissance, numéro de téléphone ou toute autre chose à votre insu ou sans votre consentement. Même si vous considérez que l'utilisateur a donné son autorisation en cliquant sur le remplissage automatique, le but des données obtenues ne correspond pas à l'intention originale du formulaire.

Solutions possibles

Pour éviter le problème, tous les acteurs doivent contribuer et aidez à résoudre le problème :

1. Utilisateurs
2. Développeurs et concepteurs
3. Navigateurs

1. Utilisateurs

La seule chose du côté de l'utilisateur serait de s'assurer que les données affichées dans la fenêtre contextuelle de remplissage automatique sont correctes.

Mais nous devons nous rappeler que l'utilisateur est ici la victime. On pourrait leur reprocher de ne pas faire assez attention en cliquant sur le remplissage automatique, mais ce serait injuste. De plus, il existe de nombreuses raisons pour lesquelles une personne pourrait cliquer sur le bouton par erreur et partager ses données par accident. Ainsi, même les utilisateurs bien intentionnés et avisés peuvent tomber dans le piège.

2. Développeurs et concepteurs

Soyons honnêtes. Bien que les développeurs ne soient pas à l'origine du problème, ils jouent un rôle clé dans l'exploitation du motif sombre. Soit accidentellement, soit avec une intention malveillante.

Et soyons responsables et honnêtes (cette fois de manière littérale), car c'est la chose que les développeurs et les concepteurs peuvent faire pour établir la confiance et faire bon usage de la Fonctionnalités de remplissage automatique et de saisie semi-automatique :

• Ne remplissez automatiquement que les données dont vous avez besoin.
• Déclarez clairement quelles données seront collectées.
• Ne masquez pas les champs de formulaire qui seront soumis ultérieurement.
• Ne pas induire en erreur ou inciter les utilisateurs à envoyer plus de données.

À titre de mesure extrême, essayez peut-être d'éviter la saisie semi-automatique de certains champs. Mais, bien sûr, cela pose d'autres problèmes car cela rendra le formulaire moins utilisable et accessible. Trouver un équilibre peut donc être délicat.

Tout cela sans considérer la possibilité d'une vulnérabilité XSS qui pourrait exploiter le motif sombre. Bien sûr, ce serait une histoire complètement différente et un problème encore plus important.

3. Navigateurs

Une grande partie du travail devrait être effectuée du côté du navigateur (en particulier du côté de Chromium). Mais permettez-moi de commencer par déclarer que tout n'est pas mauvais dans la façon dont les navigateurs Web gèrent le remplissage automatique/la saisie semi-automatique. Beaucoup de choses sont bonnes. Par exemple :

• Ils limitent les données qui peuvent être partagées
  Les navigateurs ont une liste de champs pour la saisie semi-automatique qui peuvent ne pas inclure toutes les valeurs décrites dans la norme HTML.
• Ils encapsulent et regroupent données
  Les navigateurs séparent les informations personnelles et financières pour protéger les valeurs critiques telles que les cartes de crédit. Safari a eu quelques problèmes avec cela, mais c'était mineur.
• Ils avertissent des données qui seront partagées
  Parfois, cela peut être incomplet (Chrome) ou pas clair (Safari), mais ils alertent l'utilisateur.[19659010] Néanmoins, certaines choses peuvent être améliorées par plusieurs ou tous les navigateurs Web. au lieu d'une simple liste partielle.) En outre, les informations doivent être clairement identifiées comme des données à partager au lieu d'être affichées comme une carte de contact ordinaire qui pourrait être trompeuse.

  Firefox a fait un excellent travail à ce stade, Safari a fait un bon travail en général, et Chrome était inférieur aux deux autres. ]Définition de saisie automatique dans la norme HTML :[19659110] « Le mécanisme de saisie semi-automatique doit être mis en œuvre par l'agent utilisateur agissant comme si l'utilisateur avait modifié les données du contrôle […]. déclenchant ainsi tous les événements, affichant les valeurs, etc. Même sur un champ non disponible visuellement.

  Empêcher ce comportement sur des éléments non visibles pourrait résoudre le problème. Mais valider si un champ de formulaire est visible ou non peut être coûteux pour le navigateur. De plus, cette solution n'est que partielle car les développeurs pourraient toujours lire les valeurs même sans que les entrées ne déclenchent d'événements. des valeurs de champ avant la soumission pour valider les valeurs (par exemple, lorsque l'utilisateur s'éloigne des entrées.) Mais cela aurait du sens : l'utilisateur ne veut pas partager les informations avant d'avoir soumis le formulaire, donc le navigateur ne devrait pas non plus .

  Une alternative à cela serait de fournir de fausses données lors de la lecture des valeurs autocomplétées. Les navigateurs Web font déjà quelque chose comme ça avec les liens visitéspourquoi ne pas faire la même chose avec les champs de formulaire remplis automatiquement ? Fournir du charabia comme nom, une adresse valide qui correspond aux autorités locales au lieu de l'adresse de l'utilisateur, un faux numéro de téléphone ? Cela pourrait résoudre les besoins de validation du développeur tout en protégeant les informations personnelles de l'utilisateur.

  L'affichage d'une liste complète des champs/valeurs que le navigateur partagera clairement avec le formulaire serait un grand pas en avant. Les deux autres sont des objectifs idéaux mais plus extensibles. Pourtant, ce sont des initiatives qui amélioreraient considérablement la confidentialité.

  Le motif sombre de remplissage automatique serait-il encore possible d'exploiter? Malheureusement oui. Mais ce serait beaucoup plus compliqué. Et à ce stade, il serait de la responsabilité de l'utilisateur et du devoir du développeur d'éviter une telle situation. ]interaction utilisateur pour sélectionner les informations. Cependant, nous pourrions également soutenir que la perte potentielle de données justifie une action appropriée. Et Chrome a apporté plus de modifications pour (relativement) des problèmes de sécurité/utilisabilité moins importants (voir alert()prompt() et confirm()[19659017]que ce qui pourrait être fait pour protéger les informations personnelles clés.

  Ensuite, nous avons le problème du motif sombre. Il peut être évité si chacun fait sa part :

  • Les utilisateurs doivent faire attention aux formulaires/données qu'ils remplissent automatiquement ;
  • Les développeurs doivent éviter d'exploiter ces données ;
  • Les navigateurs doivent mieux protéger les données des personnes.

  À la racine, ce motif sombre est un problème de navigateur (et principalement un problème Chrome ), et pas un petit (la confidentialité devrait être la clé en ligne). Mais il y a un choix. En fin de compte, exploiter ou non le motif sombre appartient aux développeurs. Alors choisissons judicieusement et faisons la bonne chose.

  Lectures complémentaires sur Smashing Magazine

  (vf, yk , il)