Das Autovervollständigen ist eine bemerkenswerte Funktion von Dashlane, die es Benutzern erlaubt, jedes Formular mit nur einem Klick auszufüllen. Als Entwickler oder Internetexperte wissen Sie jedoch, dass die Kodierung von Websites stark variieren kann. Das stellt unsere Formularerkennungs-Engine vor einige Herausforderungen.
In diesem Artikel werde ich Ihnen hilfreiche Tipps und Techniken vorstellen, mit denen Sie die Kompatibilität Ihrer Website mit Passwort-Managern optimieren können. Dabei werde ich insbesondere auf Dashlane eingehen. Durch eine Anwendung dieser Tricks können Sie das Erlebnis beim Autovervollständigen verbessern und Ihren Benutzern die Passwortverwaltung erleichtern. Außerdem können Sie dafür sorgen, dass Ihre Website für alle Benutzer besser zugänglich wird.
Verständnis unserer Webseiten-Analyse
Handhabung grundlegender Szenarien
Das Webseiten-Analyse-Modul, das unsere Autovervollständigen-Funktion unterstützt, nutzt einen ausgeklügelten Ansatz, um die Struktur und den Kontext von Webseiten zu verstehen. Lassen Sie uns die wichtigsten Schritte des Prozesses genauer ansehen, indem wir als Beispiel ein einfaches Anmeldeformular verwenden:
Identifizieren von Formular-Tags und Feldern: Unsere Analyse beginnt mit der Suche nach Formular-Tags und den zugehörigen Eingabefeldern. Mit diesem Schritt stellen wir sicher, dass wir die Bereiche kennen, in denen Benutzereingaben erforderlich sind.
Extrahieren von relevantem Kontext: Zum Sammeln umfassender Informationen extrahiert unser Modul aus der Seite verschiedene Elemente. Dazu gehört das Erfassen des Seitentitels, der Header im Formular (wie h1, h2, h3), relevanter Kennzeichnungen mit dem Attribut for, benachbarter Textinhalte und anderer Textelemente. Durch Berücksichtigung dieser kontextbezogenen Daten können wir unser Verständnis für den Zweck des Formulars und der damit verbundenen Felder verbessern.
Nutzen von KI zur Klassifizierung: Unser Modul klassifiziert die extrahierten Daten mithilfe von maschinellem Lernen, um die Struktur des Formulars und die Rolle der einzelnen Felder zu verstehen.
Die mit dem Analysemodul gewonnenen Ergebnisse erfüllen verschiedene wesentliche Aufgaben:
Automatisches Ausfüllen mit Formulardaten aus dem Tresor des Benutzers: Mit den bei der Analyse gewonnenen Erkenntnissen füllen wir die Formularfelder mit Daten aus dem Tresor des Benutzers aus.
Generieren von zufälligen Passwörtern für Formularfelder: Wenn ein Passwortfeld gefunden wird, kann unser Modul starke und einzigartige Passwörter generieren, sodass Benutzer das Feld bequem und automatisch mit einem sicheren Passwort ausfüllen können.
Automatisieren der Anmeldung durch Formularvalidierung: Unser Analysemodul dient als Grundlage für unsere Funktion zum Auto-Anmelden, die Login-Formulare anhand der erfassten Daten automatisch validiert. Das heißt, dass Benutzer das Formular nicht mehr manuell absenden müssen, was den Anmeldeprozess vereinfacht.
Erfassen von Daten aus ausgefüllten Formularen: Unser Modul kann die vom Benutzer manuell eingegebenen Formulardaten erfassen, um sicherzustellen, dass alle relevanten Daten sicher gespeichert werden und sich für das Autovervollständigen verwenden lassen.
Handhabung komplexer Szenarien
Zusätzlich zum grundlegenden Analyseprozess ist unser Modul darauf ausgelegt, komplexere Szenarien zu adressieren und in verschiedenen herausfordernden Situationen eine optimale Analyse zu gewährleisten. Lassen Sie uns einige dieser Szenarien ansehen und erkunden, wie sie von unserem Analysemodul gehandhabt werden.
Dynamische Webseiten: Bei dynamischen Webseiten, die im DOM Änderungen wie Animationen, Übergänge oder Modifikationen erfahren (ausgelöst durch Interaktionen des Benutzers), prüft unser Modul aktiv auf solche Änderungen. Bei jeder Änderung wird die Seite neu analysiert, um eine genaue Erkennung und Interpretation der Formularelemente zu ermöglichen. Um ein übermäßiges Neuanalysieren und potenzielles Einfrieren der Seite zu verhindern, implementieren wir jedoch Maßnahmen, um die Zahl der Analysen zu begrenzen und für reibungslose Anwenderfreundlichkeit zu sorgen.
Webseiten, die IFrames enthalten: Unser Modul verfolgt einen spezifischen Ansatz, wenn es auf Seiten trifft, die IFrames enthalten. Jeder IFrame operiert innerhalb seines isolierten JavaScript-Kontexts, wobei die Sichtbarkeit auf das DOM des eigenen Frames beschränkt ist. Für eine umfassende Formularerkennung extrahiert unser Modul Daten einzeln aus jedem IFrame. Wir nutzen Nachrichtenversand, um die erfassten Daten im Mainframe zu aggregieren. So lassen sich Formulardaten aus allen iFrames nahtlos integrieren.
Gekapselte Webkomponenten: Die Shadow DOM-Web-Technologie ermöglicht eine Erstellung wiederverwendbarer Komponenten gemäß den W3C-Standardspezifikationen. Da Standardexplorationsmethoden wie Element.querySelectorAll oder Element.children mit dieser Technik blockiert werden, erfordert die Analyse von Komponenten, die im Shadow DOM gekapselt sind, eine Verwendung alternativer Verfahren.
Adressierung von Analyseungenauigkeiten
Unser Analysemodul ist zwar bestrebt, genaue Ergebnisse zu liefern, es können jedoch Ungenauigkeiten auftreten. In solchen Fällen verwenden wir verschiedene Ansätze, um die Probleme zu beheben. Hier sind zwei wichtige Strategien, die wir zur Verbesserung der Analysegenauigkeit verwenden:
Optimierung des ML-Modells: Zur kontinuierlichen Verbesserung der Leistung unseres Analysemoduls nutzen wir Techniken, die auf maschinellem Lernen basieren. Das beinhaltet, dass Daten aus Webseiten extrahiert und manuell gekennzeichnet werden. Dann werden die manuell gekennzeichneten Daten unserem Trainingsdatensatz hinzugefügt. Durch das Trainieren eines neuen Modells mit diesem erweiterten Datensatz möchten wir die Genauigkeit der Analyseergebnisse verbessern. Letztendlich besteht das Ziel darin, eine präzisere und zuverlässigere Formularerkennung zu erreichen.
Manuelle Korrekturen bei wichtigen Websites: Bei sehr wichtigen Websites, die besondere Aufmerksamkeit erfordern, verfolgen wir einen intensiveren Ansatz hinsichtlich der Pflege. Manuelle Korrekturen werden von Fall zu Fall vorgenommen. Das umfasst die Verwaltung einer kuratierten Liste von Websites zusammen mit manuell ausgewählten Elementselektoren und Klassifizierungen. Durch diese manuelle Korrektur können wir die Analyse speziell für diese kritischen Websites feinjustieren und so ihre Kompatibilität weiter erhöhen.
Best Practices für die Kodierung und Web-Entwicklung
Die allgemeine Faustregel ist ganz einfach: Halten Sie sich an Webstandards. Durch das Befolgen etablierter HTML-, CSS- und JavaScript-Praktiken können Sie sicherstellen, dass Ihre Website mit verschiedenen Plattformen und Geräten zuverlässig funktioniert, einschließlich Passwort-Managern.
Grundlegende Empfehlungen
Verwenden Sie das : Nutzen Sie beim Implementieren von Formularen das Standard-HTML--Tag. Wenn Sie mit benutzerdefinierten Elementen arbeiten, geben Sie unbedingt das Attribut role=”form” mit an. So helfen Sie Passwort-Managern dabei, Formulare richtig zu erkennen und zu behandeln.
Vermeiden Sie eine Verschachtelung verschiedener Formulare: Vermeiden Sie zur Sicherstellung der Kompatibilität, verschiedene Formulare im selben -Element zu verschachteln. Jedes Formular sollte ein eigenes -Tag aufweisen, um Passwort-Manager nicht zu verwirren.
Verwenden Sie das autocomplete-Attribut: Zwar kann die Unterstützung für das Attribut autocomplete variieren, doch ist es sinnvoll, es in Ihre Formulareingaben aufzunehmen.
Fügen Sie bei Eingabefeldern das : Verwenden Sie bei jedem Eingabefeld das -Tag, entweder mit dem Attribut for oder durch direktes Einschließen des Eingabeelements innerhalb des -Elements. So wird eine angemessene Zuordnung zwischen Kennzeichnungen und Eingaben erreicht.
Weisen Sie Eingabefeldern eindeutige IDs zu: Jedes Eingabefeld sollte ein einzigartiges id-Attribut mit beschreibenden und eindeutigen Werten aufweisen (wenn Ihr Framework das zulässt).
Verwenden Sie geeignete Schaltflächen zum Absenden: Nutzen Sie als Schaltfläche zum Absenden Ihres Formulars entweder input type=”submit” oder button type=”submit”. So können Passwort-Manager die Übermittlung richtig erkennen und verwalten.
Fehlerhaftes Beispiel:
div id=”myForm-body”>
Benutzername:
Richtiges Beispiel:
Gehen Sie einen Schritt weiter
Berücksichtigen Sie potenzielle Störungen: Bestimmte Praktiken können die Funktionalität von Passwort-Managern beeinträchtigen. Vermeiden Sie es, direkt in Eingabefeldern vom Benutzer eingegebene Daten neu zu schreiben, da dadurch Funktionen von Passwort-Managern beeinträchtigt werden können. Manche clientseitige Techniken zur Datenvalidierung können ebenfalls Probleme verursachen. Achten Sie stets darauf, serverseitige Validierung zu implementieren (und, wenn möglich, ausschließlich serverseitig, da clientseitige Validierung von Angreifern umgangen werden kann) und bei der Entwicklung alternative Eingabemethoden in Betracht zu ziehen (Kopieren und Einfügen, virtuelle Tastaturen usw.). Das Ausführen einer Validierung bei Tastaturereignissen wie keyup oder keydown kann das Kopieren und Einfügen beispielsweise stören. Wir empfehlen, je nach Bedarf das Ereignis input oder change zu verwenden.
Begrenzen Sie die Häufigkeit von Seitenmutationen: Übermäßige Mutationen können Passwort-Manager sowie andere Erweiterungen beeinträchtigen. Streben Sie ein Gleichgewicht zwischen Funktionalität und Leistung an, um den Ressourcenverbrauch auf den Geräten von Benutzern zu minimieren.
Vermeiden Sie es, Seiten mit unsichtbaren Elementen zu überfrachten: Webseiten sollten nicht mit übermäßig vielen unsichtbaren Elementen (wie verborgenen Feldern oder divs) überfrachtet werden. Solche Elemente können es Passwort-Managern erschweren, Formulareingaben richtig zu erkennen und damit zu interagieren.
Seien Sie vorsichtig mit der Verwendung bestimmter Layouts: Progressive oder kaskadierende Formulare (bei denen Felder nach und nach angezeigt werden oder bearbeitet werden können) können die Ergebnisse der Analyse unseres Moduls verändern. Zudem bieten viele Passwort-Manager noch sehr begrenzte Shadow DOM-Unterstützung (Dashlane hat damit 2022 begonnen).
Durch Einhaltung von Webstandards und Richtlinien für Barrierefreiheit erhöhen Sie die Chancen erheblich, bei Passwort-Managern eine optimale Kompatibilität zu erreichen. Sorgen Sie für eine Verwendung von standardmäßigen Formularelementen, die richtige Kennzeichnung von Eingaben und das Vermeiden von Praktiken, die die Funktionalität von Passwort-Managern beeinträchtigen könnten.
Denken Sie daran: Eine optimierte Website verbessert nicht nur das Benutzererlebnis, sondern ermöglicht Anwendern auch eine sichere und bequeme Passwortverwaltung.
Sie wollen die Sicherheitsarchitektur von Dashlane genauer kennenlernen? Laden Sie unser Whitepaper zum Thema Sicherheit herunter.
Tipps zur Entwicklung für mobile Endgeräte
Bei der Entwicklung für mobile Endgeräte ähneln die Richtlinien zur Optimierung der Kompatibilität jenen für Passwort-Manager: Kodieren Sie Ihre Formulare also klar und übersichtlich. Es gibt jedoch einige zusätzliche Aspekte, die speziell bei mobilen Plattformen zu beachten sind. Hier sind zwei wichtige Punkte, die Sie berücksichtigen sollten:
Nutzen Sie für das Autovervollständigen native APIs: Das Autovervollständigen auf mobilen Geräten beruht auf den nativen APIs, die vom jeweiligen Betriebssystem bereitgestellt werden. Sie sollten eindeutige IDs und klar definierte Eingabetypen verwenden, insbesondere bei mobilen Endgeräten. In einer iOS-App gibt es beispielsweise vier Arten von UITextContentType: .username, .password, .newPassword und .oneTimeCode. Durch Verwendung dieser spezifischen Eingabetypen können Sie das Erlebnis beim Autovervollständigen auf mobilen Geräten verbessern und die Kompatibilität mit Passwort-Managern erhöhen.
Deklarieren Sie für mobile Apps zugehörige Domains: Bei mobilen Apps müssen Sie die zugehörige Domain direkt in Ihrer App deklarieren. So sorgen Sie dafür, dass Passwort-Manager die richtigen Anmeldedaten für die App vorschlagen können.
Fallstudie
Lassen Sie uns ein positives und ein negatives Beispiel ansehen. Beide Formulare stammen von sehr beliebten Websites. Hier ist unser positives Beispiel:
Verwendung des
Verwendung des id-Attributs
Platzierung der Schaltfläche zum Absenden im -Element
Das Verwenden von aria-label anstelle von ist ebenfalls eine gute Praxis
Und hier ist das negative Beispiel:
Kein -Element
Keine id in Feldern
Keine klare Schaltfläche zum Absenden
All das erschwert es unserer Engine zu verstehen, um welche Art von Formular es sich handelt. Stellen Sie also sicher, dass Sie dem positiven Beispiel folgen! Vergessen Sie nicht: Durch das Befolgen von Best Practices können Sie Ihren Benutzern Zugriff auf eine sichere Passwortverwaltung gewähren und Tools für Barrierefreiheit bereitstellen, von denen alle Benutzer profitieren. Viel Spaß beim Codieren!
Bitte beachten Sie: Wir verwenden Cookies auf unserer Website, um Ihnen das bestmögliche Erlebnis zu bieten. Wenn Sie nicht essenzielle Cookies deaktivieren möchten, klicken Sie bitte unten auf „Nicht essenzielle Cookies ablehnen“. Wir halten uns an globale „Do not track“ und gleichwertige Einstellungen in Ihrem Browser. Wählen Sie Ihre Einstellungen bitte hier:
