Das dunkle Autofill-Muster

Veröffentlicht: 2022-03-10
Kurze Zusammenfassung ↬ Ein „dunkles Muster“ ist ein irreführendes UX-Muster, das Benutzer dazu verleitet, Dinge zu tun, die sie möglicherweise nicht wirklich tun möchten. In diesem Artikel führt Alvaro Montoro ein kleines Experiment durch, um herauszufinden, wie viel Privatsphäre den Benutzern in drei verschiedenen Browsern genommen wird.

Ein Anmeldeformular für Zeitungen hatte Felder für Name, E-Mail und Passwort. Also fing ich an, in das Namensfeld zu tippen, und das automatische Ausfüllen schlug mein Profil vor. Aber da war etwas Funky . Der Vorschlag zur automatischen Vervollständigung enthielt meine Postanschrift. Unnötig zu erwähnen, dass es verwirrend war: Die Adresse war kein Feld im Formular. Warum wurde es überhaupt vorgeschlagen?

Als sich diese Frage in meinem Kopf zu bilden begann, hatte mein Gehirn meinem Finger bereits signalisiert, auf den Vorschlag zu klicken, und es war erledigt. Als nächstes wurde ich zu einer zweiten Formularseite weitergeleitet, auf der zusätzliche Informationen wie Adresse, Telefonnummer, Geburtsdatum usw. angefordert wurden. Und all diese Felder wurden auch durch die Autofill-Funktionalität vorab ausgefüllt.

Ich seufzte erleichtert. Es war ein „mehrstufiges“ Formular und kein Trick der Website. Immerhin war es eine seriöse Zeitung. Ich habe alle optionalen Informationen von der zweiten Seite gelöscht, die Anmeldung abgeschlossen und bin weitergefahren.

Diese (problematische) Interaktion verdeutlichte eines der Risiken bei der Verwendung von Autovervollständigungsfunktionen .

Autocomplete und Autofill

Sie mögen ähnlich klingen, aber autocomplete und Autofill sind nicht dasselbe . Obwohl sie eng miteinander verwandt sind:

  • AutoFill ist eine Browserfunktion, die es Benutzern ermöglicht, Informationen (im Browser oder Betriebssystem) zu speichern und sie in Webformularen zu verwenden.
  • autocomplete ist ein HTML-Attribut, das dem Browser Richtlinien zum automatischen Ausfüllen von Feldern in einem Webformular bereitstellt (oder nicht).

Wir könnten sagen, dass die automatische Vervollständigung das „Was“ ist, während die automatische Vervollständigung das „Wie“ ist, dh die autofill speichert Daten und versucht, sie in einem Webformular abzugleichen (basierend auf dem name , type oder der id der Felder), und die autocomplete leitet den Browser wie es gemacht wird (welche Informationen werden in jedem Feld erwartet).

Die automatische Vervollständigung ist eine leistungsstarke Funktion mit vielen Optionen, die es ermöglicht, viele verschiedene Arten von Werten anzugeben:

  • Persönlich : Name, Adresse, Telefon, Geburtsdatum;
  • Finanziell : Kreditkartennummer, Name, Ablaufdatum;
  • Demographie : Ort, Alter, Geschlecht, Sprache;
  • Beruflich : Firma und Berufsbezeichnung.

AutoFill ist ein weit verbreitetes Feature, entweder freiwillig oder aus Versehen: Wer hat nicht akzeptiert, dass der Browser absichtlich oder aus Versehen Webformularinformationen speichert/verwendet? Und das könnte ein Problem sein – besonders in Kombination mit der schlechten Verwendung der autocomplete (und der zusätzlichen unverschämten Anzahl von Phishing-E-Mails und SMS-Nachrichten heutzutage).

Datenschutzrisiken

Diese beiden Funktionen stellen (mindestens) zwei Hauptrisiken für den Benutzer dar, die sich beide auf ihre persönlichen Daten und ihre Privatsphäre beziehen:

  1. Nicht sichtbare Felder werden ausgefüllt (dies ist nicht dasselbe wie Felder mit einem versteckten Typ);
  2. Autovervollständigte Informationen können über JavaScript gelesen werden, noch bevor der Benutzer das Formular absendet.

Das bedeutet, dass alle Felder für den Entwickler zum Lesen verfügbar sind, sobald ein Benutzer das automatische Ausfüllen der Informationen auswählt . Wiederum unabhängig davon, ob der Benutzer das Formular absendet oder nicht, ohne dass der Benutzer weiß, welche Felder tatsächlich ausgefüllt wurden.

Dieser letzte Teil ist relativ: Das Wissen, welche Felder ausgefüllt werden, hängt vom Browser ab. Safari und Firefox leisten hier gute Arbeit (wie wir gleich sehen werden). Auf der anderen Seite bietet Chrome, der derzeit beliebteste Browser, eine schlechte Erfahrung, die selbst die sachkundigsten Benutzer dazu verleiten kann, ihre persönlichen Daten weiterzugeben.

Wenn wir auch die Zeiten berücksichtigen, in denen der Benutzer versehentlich die Felder ausfüllt, wird dieses Problem relevanter. Lassen Sie uns das anhand eines Beispiels genauer überprüfen.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Ein kleines Experiment

Ich habe ein kleines Experiment durchgeführt, indem ich ein Formular mit vielen Feldern erstellt und das autocomplete Attribut mit unterschiedlichen Werten angehängt habe. Dann habe ich ein wenig mit der Struktur des Formulars gespielt:

  • Ich habe die meisten Felder ausgeblendet, indem ich sie außerhalb des Bildschirms in einen Container gelegt habe (anstatt hidden oder type="hidden" zu verwenden);
  • Ich habe die visuell ausgeblendeten Felder aus der Tab-Reihenfolge entfernt (damit Tastaturbenutzer die ausgeblendeten Felder übersehen würden);
  • Ich habe versucht, die Felder in einer anderen Reihenfolge zu sortieren (und zu meiner Überraschung wirkte sich dies auf das automatische Ausfüllen aus!).

Am Ende sah der Code für das Formular so aus:

 <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>

Hinweis: Ich habe diese Demo vor einiger Zeit erstellt, und der Standard ist ein lebendiges Dokument. Seitdem haben sich einige der Autocomplete-Namen geändert. Beispielsweise können wir jetzt das new-password und das current-password oder weitere Details für Adresse oder Kreditkarte angeben, die vorher nicht verfügbar waren.

Dieses Formular hatte drei sichtbare Felder ( name , E- email und zipcode ). Obwohl dieses Formular bei Versicherungsunternehmen, Kabel- und anderen Dienstanbietern üblich ist, ist es möglicherweise nicht allzu weit verbreitet, daher habe ich das Formular mit einem einzigen E-Mail-Feld noch weiter reduziert. Wir sehen das überall, um sich für Websites, Newsletter oder Updates anzumelden. Sie können eine laufende Demo hier sehen:

Siehe Pen [Showing autofill/autocomplete dark pattern (II)](https://codepen.io/smashingmag/pen/xxLKVga) von Alvaro Montoro.

Siehe Pen Showing Autofill/Autocomplete Dark Pattern (II) von Alvaro Montoro.

Wenn Sie zum Ausfüllen des Formulars die automatische Vervollständigung verwendet haben, haben Sie bereits mehr Informationen geteilt, als Sie wollten ( keine Sorge, es ist alles lokal und wird nicht mit mir geteilt ). Und in Chrome hätte es vielleicht sogar wie ein ganz normales Anmeldeformular ausgesehen.

Machen Sie sich keine Sorgen, wenn Sie kein automatisches Ausfüllen haben/verwenden. Hier ist eine Zusammenfassung, wie die Erfahrung auf drei verschiedenen Browsern ist.

Hinweis : Alle diese Tests setzen die Verwendung von Autofill voraus und basieren auf einem gefälschten Profil!

Safari

Wenn Sie auf ein Formularsteuerelement klicken, zeigt Safari ein Symbol auf der rechten Seite des Felds an. Wenn Sie darauf klicken, wird ein Popup mit den Informationen angezeigt, die der Browser mit dem Formular teilt:

Screenshot des Safari-Vorschlags zum automatischen Ausfüllen, der angibt, dass Adresse, Firma, Mobiltelefon, E-Mail-Adresse und Geburtstag geteilt werden
Screenshot des Safari-Vorschlags zum automatischen Ausfüllen, der anzeigt, dass Adresse, Firma, Mobiltelefon, E-Mail, Geburtstag usw. geteilt werden (große Vorschau)

Eine gute Sache: Es zeigt alle Daten an, die als Teil des Formulars geteilt werden. Nicht nur die Daten für die sichtbaren Felder, sondern alle. An diesem Punkt kann der Benutzer vermuten, dass etwas nicht ganz in Ordnung ist. Da ist etwas faul.

Als ich das Formular auf das E-Mail-Feld reduzierte, tat Safari etwas Interessantes. Das AutoFill-Popup war anders:

Screenshot des Safari-Vorschlags zum automatischen Ausfüllen mit der E-Mail und unterhalb des Profils
Screenshot des Safari-Vorschlags zum automatischen Ausfüllen mit der E-Mail und unterhalb des Profils. (Große Vorschau)

Es besagt, dass es nur die E-Mail teilt (und es teilt nur diese Information). Aber die Kontaktinformationen unten können kniffliger sein. Wenn wir auf diese Schaltfläche klicken, zeigt der Browser eine Zusammenfassung des Profils mit seinen freigegebenen Daten an. Aber das wird nirgends deutlich gesagt. Es sieht einfach aus wie eine normale Kontaktkarte mit einigen „Teilen/Nicht teilen“-Optionen. Nachdem Sie auf die Schaltfläche „Autofill“ geklickt haben, wird das Formular mit allen Daten ausgefüllt. Nicht nur die E-Mail:

Screenshot der Warnung auf Safari mit allen Daten
Screenshot der Warnung auf Safari mit allen Daten. (Große Vorschau)

Es gibt also eine Möglichkeit für einen Benutzer, versehentlich Informationen mit dem Formular zu teilen. Es ist knifflig, aber nicht zu weit hergeholt, wenn man bedenkt, dass es diejenige ist, die mit einem Symbol von den beiden möglichen Optionen „hervorgehoben“ ist.

Komischerweise trennen Browser die persönlichen Daten von den Kreditkartendaten, aber Safari hat einen Teil der Kreditkarteninformationen basierend auf den persönlichen Daten (Name und PLZ) ausgefüllt.

Feuerfuchs

Die Verwendung des automatischen Ausfüllens in Firefox ist etwas komplexer. Es ist nicht automatisch wie in Chrome und es gibt kein Symbol wie in Safari. Benutzer müssen mit der Eingabe beginnen oder ein zweites Mal klicken, um das AutoFill-Popup zu sehen, das eine Notiz mit jeder Kategorie enthält, die der Browser ausfüllt, nicht nur die sichtbaren Felder:

Screenshot des AutoFill-Popups in Firefox mit allen Steuerelementen, die ausgefüllt werden
Screenshot des AutoFill-Popups in Firefox mit allen Steuerelementen, die ausgefüllt werden. (Große Vorschau)

Beim Testen mit dem Nur-E-Mail-Formular präsentierte Firefox dasselbe Popup-Fenster zum automatischen Ausfüllen, das angibt, welche Feldkategorien es ausfüllen würde. Kein Unterschied.

Und ähnlich wie bei den anderen Browsern konnten wir nach dem Autofill alle Werte mit JavaScript auslesen.

Screenshot der Warnung in Firefox mit allen Daten
Screenshot der Warnung in Firefox mit allen Daten. (Große Vorschau)

Firefox war der beste der drei: Er gab klar an, welche Informationen mit dem Formular geteilt würden, unabhängig von den Feldern oder ihrer Reihenfolge. Und es hat die Autofill -Funktion ausgeblendet, als eine zweite Benutzerinteraktion stattfand.

Ein Tastaturbenutzer könnte das automatische Ausfüllen auswählen, ohne es zu merken, indem er in die Popup-Blase gelangt und die Tabulatortaste drückt.

Chrom

Dann war Chrome an der Reihe. (Hier verwende ich „Chrome“, aber die Ergebnisse waren bei mehreren getesteten Chromium-basierten Browsern ähnlich.) Ich klickte auf das Feld und ohne weitere Interaktion wurde das Popup-Fenster zum automatischen Ausfüllen angezeigt. Während Firefox und Safari viele Gemeinsamkeiten hatten, ist Chrome völlig anders: Es zeigt nur zwei Werte an, und beide sind sichtbar.

Screenshot des Popups zum automatischen Ausfüllen in Chrome mit nur zwei Feldern: Name und Postleitzahl, beide sichtbar
Screenshot des Popups zum automatischen Ausfüllen in Chrome mit nur zwei Feldern: Name und Postleitzahl, beide sichtbar. (Große Vorschau)

Diese Anzeige war beabsichtigt. Ich habe die Reihenfolge der Felder absichtlich ausgewählt, um diese bestimmte Kombination aus sichtbaren Steuerelementen und Vorschlägen zur automatischen Vervollständigung zu erhalten. Es sieht jedoch so aus, als würde Chrome einigen Autocomplete-Eigenschaften mehr „Gewicht“ für den zweiten Wert geben. Und das bewirkt, dass sich das Popup in Abhängigkeit von der Reihenfolge der Felder im Formular ändert.

Das Testen mit der zweiten Version des Formulars war nicht viel besser:

Screenshot des Popups zum automatischen Ausfüllen in Chrome mit nur zwei Feldern: E-Mail und Name (die einzige E-Mail ist sichtbar)
Screenshot des Popups zum automatischen Ausfüllen in Chrome mit nur zwei Feldern: E-Mail und Name (die einzige E-Mail ist sichtbar). (Große Vorschau)

Während das Popup ein nicht sichtbares Feld (den Namen) anzeigt, ist unklar, was der Zweck des Namens auf dem Popup ist. Ein erfahrener Benutzer weiß möglicherweise, dass dies geschieht, weil der Name geteilt wird, aber ein durchschnittlicher Benutzer (und sogar die erfahrenen) kann glauben, dass die E-Mail mit dem Profil mit diesem Namen verknüpft ist. Es gibt keinen Hinweis auf die Daten, die der Browser mit dem Formular teilt.

Und sobald der Nutzer auf den Autofill-Button klickt, stehen die Daten dem Entwickler mit JavaScript zum Lesen zur Verfügung:

Screenshot der Warnung in Chrome mit allen Informationen
Screenshot der Warnung in Chrome mit allen Informationen. (Große Vorschau)

Chrome war der schlimmste Übeltäter: Es gab die Informationen automatisch weiter, es war unklar, um welche Daten es sich handelte, und die Vorschläge zum automatischen Ausfüllen änderten sich basierend auf der Reihenfolge und den Attributen der Steuerelemente.

Die ersten beiden Probleme sind allen/vielen Browsern gemeinsam, bis zu dem Punkt, dass sie sogar als Feature betrachtet werden können. Das dritte Problem ist jedoch exklusiv für Chromium-Browser und ermöglicht ein skizzenhaftes dunkles Muster.

Dieses Verhalten wäre eher eine Anekdote und kein Problem, wenn dies nicht der Fall wäre, da Chrome einen beträchtlichen Marktanteil der Browser im Internet einnimmt (einschließlich Chrome und Chromium-basiert).

Das dunkle Muster

Wie Sie wahrscheinlich wissen, ist ein dunkles Muster ein irreführendes UX-Muster, das Benutzer dazu verleitet, Dinge zu tun, die sie möglicherweise nicht wirklich tun möchten.

„Wenn Sie Websites und Apps verwenden, lesen Sie nicht jedes Wort auf jeder Seite – Sie lesen nur oberflächlich und treffen Vermutungen. Wenn ein Unternehmen Sie dazu verleiten möchte, etwas zu tun, kann es dies ausnutzen, indem es eine Seite so aussehen lässt, als würde sie etwas sagen, obwohl sie tatsächlich etwas anderes sagt.“

— Harry Brignull, darkpatterns.org

Das in den vorherigen Punkten beschriebene Verhalten ist eindeutig eine täuschende Benutzererfahrung. Nicht erfahrene Benutzer werden nicht erkennen, dass sie ihre persönlichen Daten weitergeben . Sogar technisch versierte Leute können davon getäuscht werden, da Chrome es so aussehen lässt, als ob die ausgewählte Option zu einem Profil gehört, anstatt klar anzugeben, welche Informationen geteilt werden.

Die Browserimplementierungen verursachen dieses Verhalten, aber der Entwickler muss es einrichten, um es auszunutzen. Leider gibt es bereits Unternehmen, die bereit sind, es auszunutzen und es als Feature zu verkaufen, um Leads zu erhalten.

Solange ein dunkles Muster geht, kann es auch ein illegales sein. Denn es verstößt gegen viele Grundsätze in Bezug auf die Verarbeitung personenbezogener Daten, die in Artikel 5 der Europäischen Datenschutz-Grundverordnung (DSGVO) festgelegt sind:

  • Rechtmäßigkeit, Fairness und Transparenz
    Der Prozess ist alles andere als transparent.
  • Zweckbindung
    Die Daten werden in einer Weise verarbeitet, die mit dem ursprünglichen Zweck nicht vereinbar ist.
  • Datenminimierung
    Ganz im Gegenteil. Datenmaximierung: Erhalten Sie so viele Informationen wie möglich.

Wenn Sie sich beispielsweise für einen Newsletter anmelden oder Informationen zu einem Produkt anfordern möchten und Ihre E-Mail-Adresse angeben, hat die Website keinen Rechtsanspruch darauf, Ihren Namen, Ihre Adresse, Ihr Geburtsdatum, Ihre Telefonnummer oder irgendetwas anderes ohne Ihre zu erhalten Zustimmung oder Wissen. Auch wenn Sie davon ausgegangen sind, dass der Benutzer beim Klicken auf das automatische Ausfüllen die Erlaubnis erteilt hat, entspricht der Zweck der erhaltenen Daten nicht der ursprünglichen Absicht des Formulars.

Mögliche Lösungen

Um das Problem zu vermeiden, müssen alle Akteure einen Beitrag leisten und helfen, das Problem zu beheben:

  1. Benutzer
  2. Entwickler und Designer
  3. Browser

1. Benutzer

Das einzige, was auf der Benutzerseite zu tun wäre, wäre sicherzustellen, dass die im AutoFill-Popup angezeigten Daten korrekt sind .

Aber wir müssen uns daran erinnern, dass der Benutzer hier das Opfer ist. Wir könnten ihnen vorwerfen , dass sie beim Klicken auf das automatische Ausfüllen nicht genug Aufmerksamkeit geschenkt haben, aber das wäre unfair. Außerdem gibt es viele Gründe, warum eine Person versehentlich auf die Schaltfläche klicken und ihre Daten versehentlich teilen könnte. So können sogar gut gemeinte und versierte Benutzer darauf hereinfallen.

2. Entwickler und Designer

Lass uns ehrlich sein. Obwohl die Entwickler nicht die Hauptursache des Problems sind, spielen sie eine Schlüsselrolle bei der Ausnutzung des dunklen Musters. Entweder versehentlich oder mit böswilliger Absicht.

Und seien wir verantwortungsbewusst und ehrlich (diesmal im wahrsten Sinne des Wortes), denn das ist es, was Entwickler und Designer tun können, um Vertrauen aufzubauen und die Autofill- und Autocomplete-Funktionen sinnvoll zu nutzen:

  • Vervollständigen Sie nur die Daten, die Sie benötigen.
  • Geben Sie deutlich an, welche Daten erhoben werden.
  • Formularfelder, die später übermittelt werden, nicht ausblenden.
  • Führen Sie Benutzer nicht in die Irre oder verleiten Sie sie dazu, mehr Daten zu senden.

Versuchen Sie als extreme Maßnahme, das automatische Ausfüllen bestimmter Felder zu vermeiden. Aber natürlich bringt dies andere Probleme mit sich, da es das Formular weniger brauchbar und zugänglich macht. Es kann also schwierig sein, ein Gleichgewicht zu finden.

All dies ohne Berücksichtigung der Möglichkeit einer XSS-Schwachstelle, die das Dark Pattern ausnutzen könnte. Das wäre natürlich eine ganz andere Geschichte und ein noch bedeutenderes Problem.

3. Browser

Ein Großteil der Arbeit müsste von der Browserseite aus erledigt werden (insbesondere auf der Chromium-Seite). Aber lassen Sie mich damit beginnen, dass nicht alles schlecht ist, wenn Webbrowser mit Autofill/Autocomplete umgehen. Viele Dinge sind gut. Zum Beispiel:

  • Sie begrenzen die Daten, die geteilt werden können
    Browser verfügen über eine Liste von Feldern für die automatische Vervollständigung, die möglicherweise nicht alle im HTML-Standard beschriebenen Werte enthalten.
  • Sie kapseln und gruppieren Daten
    Browser trennen persönliche und finanzielle Informationen, um kritische Werte wie Kreditkarten zu schützen. Safari hatte einige Probleme damit, aber es war geringfügig.
  • Sie warnen vor den Daten, die weitergegeben werden
    Manchmal kann dies unvollständig (Chrome) oder nicht klar (Safari) sein, aber sie warnen den Benutzer.

Dennoch können einige Dinge von vielen oder allen Webbrowsern verbessert werden.

Alle Felder anzeigen, die automatisch ausgefüllt werden

Browser sollten immer eine Liste aller Felder anzeigen, die im AutoFill-Popup automatisch ausgefüllt werden (statt nur einer unvollständigen Liste). Außerdem sollten die Informationen eindeutig als zu teilende Daten gekennzeichnet sein, anstatt als normale Kontaktkarte angezeigt zu werden könnte irreführend sein.

Firefox hat zu diesem Zeitpunkt hervorragende Arbeit geleistet, Safari hat im Allgemeinen gute Arbeit geleistet, und Chrome war im Vergleich zu den anderen beiden unterdurchschnittlich.

Lösen Sie das onChange Ereignis nicht beim automatischen Ausfüllen aus

Dies wäre eine problematische Anforderung, da dieses Verhalten Teil der Autofill-Definition im HTML-Standard ist:

„Der Autovervollständigungsmechanismus muss vom Benutzeragenten so implementiert werden, als ob der Benutzer die Daten des Steuerelements geändert hätte […].“

Das bedeutet, dass Browser die automatisch vervollständigten Daten so behandeln sollten, als ob sie vom Benutzer eingegeben worden wären, wodurch alle Ereignisse ausgelöst, die Werte angezeigt werden usw. Auch in einem nicht visuell verfügbaren Feld.

Das Verhindern dieses Verhaltens bei nicht sichtbaren Elementen könnte das Problem lösen. Die Überprüfung, ob ein Formularsteuerelement sichtbar ist oder nicht, kann jedoch für den Browser kostspielig sein. Außerdem ist diese Lösung nur teilweise, da Entwickler die Werte auch lesen könnten, ohne dass die Eingaben Ereignisse auslösen.

Erlauben Sie Entwicklern nicht, automatisch ausgefüllte Felder vor der Übermittlung zu lesen

Dies wäre auch problematisch, da sich viele Entwickler oft darauf verlassen, die Feldwerte vor der Übermittlung zu lesen, um die Werte zu validieren (z. B. wenn sich der Benutzer von den Eingaben entfernt). Aber es wäre sinnvoll: Der Benutzer möchte die Informationen nicht teilen bis sie das Formular absenden, also sollte der Browser dies auch nicht tun.

Eine Alternative dazu wäre die Bereitstellung gefälschter Daten beim Lesen von automatisch vervollständigten Werten. Webbrowser machen so etwas bereits mit besuchten Links, warum nicht auch mit automatisch vervollständigten Formularfeldern? Geben Sie Kauderwelsch als Namen an, eine gültige Adresse, die den örtlichen Behörden entspricht, anstelle der Adresse des Benutzers, eine gefälschte Telefonnummer? Dies könnte die Validierungsanforderungen des Entwicklers lösen und gleichzeitig die persönlichen Informationen des Benutzers schützen.

Das Anzeigen einer vollständigen Liste der Felder/Werte, die der Browser eindeutig mit dem Formular teilt, wäre ein großer Schritt nach vorne. Die anderen beiden sind ideal, aber eher Stretch Goals. Dennoch handelt es sich um Initiativen, die den Datenschutz erheblich verbessern würden.

Wäre es noch möglich, das dunkle Muster zum automatischen Ausfüllen auszunutzen? Leider ja. Aber es wäre viel komplizierter. Und an dieser Stelle wäre es die Verantwortung des Benutzers und die Pflicht des Entwicklers, eine solche Situation zu vermeiden.

Fazit

Wir können argumentieren, dass die automatische Vervollständigung kein großes Sicherheitsproblem darstellt (nicht einmal in Chrome), da sie eine Benutzerinteraktion erfordert, um die Informationen auszuwählen. Wir könnten jedoch auch argumentieren, dass der potenzielle Datenverlust angemessene Maßnahmen rechtfertigt. Und Chrome hat mehr Änderungen für (relativ) weniger wichtige Sicherheits-/Benutzerfreundlichkeitsbedenken vorgenommen (siehe alert() , prompt() , und confirm() , als was getan werden könnte, um wichtige persönliche Informationen zu schützen.

Dann haben wir das Problem des dunklen Musters. Es kann vermieden werden, wenn jeder seinen Teil dazu beiträgt:

  • Benutzer sollten darauf achten, welche Formulare/Daten sie automatisch ausfüllen;
  • Entwickler sollten es vermeiden, diese Daten auszunutzen;
  • Browser sollten die Daten der Menschen besser schützen.

Im Grunde ist dieses dunkle Muster ein Browserproblem (und hauptsächlich ein Chrome-Problem) und kein kleines (Privatsphäre sollte online der Schlüssel sein). Aber es gibt eine Wahl. Am Ende liegt es an den Entwicklern, das dunkle Muster auszunutzen oder nicht. Also lasst uns weise auswählen und das Richtige tun.

Weiterführende Literatur zum Smashing Magazine

  • Besseres Formulardesign: Eine Sache pro Seite (Fallstudie), Adam Silver
  • Allgemeine Bedenken und Datenschutz in Webformularen, Vitaly Friedman
  • Vereinfachung von Formularstilen mit accent-color , Michelle Barker
  • HTML5-Eingabetypen: Wo sind sie jetzt?, Drew McLellan
  • Formulare und Validierung in Ionic React, Jerry Navi
  • Best Practices für das Design mobiler Formulare, Nick Babich