Auf Mobilgeräten mit Android oder iOS bzw. iPadOS sowie
auch bei interaktiven Boards bzw. Displays
mit der jeweils integrierten Onboard-Tastatur
tritt verbreitet das Problem auf,
dass bei jedem Passwort-Eingabefeld
im Browser das letzte Zeichen immer zuerst kurz
angezeigt und erst verzögert durch ein Ersatzzeichen
wie einen Bullet-Point ersetzt wird.
Das Problem besteht darin, dass Schülerinnen und Schüler bei einer
zeichenweisen Eingabe des Passworts der Lehrkraft im Klassenraum
dieses dann recht einfach mitlesen können.
Das zwischenzeitliche Deaktivieren der Anzeige über
z. B. Freeze oder Blank eines Beamers ist auf
interaktiven Boards nicht möglich und würde
im Unterrichtsalltag wohl meist auch vergessen.
Das manuelle Deaktivieren in den Systemeinstellungen
des jeweiligen Mobilsystems ist zwar prinzipiell möglich,
allerdings nicht allen Nutzenden zuzumuten.
Außerdem kann das Standardverhalten in bestimmten Fällen durchaus
sinnvoll sein, beispielsweise wenn die Passworteingabe eben nicht während
eines geteilten Bildschirms sondern in einem Einzelbüro bzw. alleine
genutzten Arbeitszimmer vorgenommen wird.
Bei schulischen Geräten, die auch von mehreren Nutzenden
geteilt werden, ist die automatische
Vervollständigung einer bereits auf dem
Gerät bzw. Browserprofil gespeicherten
Benutzernamen-Passwort-Kombination über autocomplete
ebenfalls nicht einsetzbar.
Schon bei normalen Nutzer-Accounts ergibt sich so das Risiko
einer Account-Übernahme.
Wenn eine Lehrkraft mit ihrem im Unterricht
genutzten Nutzer-Account
aber direkt zusätzlich
administrative Rollen erhält, resultiert daraus
ein hohes Risiko für die Datensicherheit mindestens hinsichtlich
der Vertraulichkeit, und in Abhängigkeit vom Umfang der verknüpften Berechtigungen
darüber hinaus ggfs. auch
der Integrität sowie
der Verfügbarkeit von Daten.
Die unten beschriebene Maßnahme kann daher zusammen mit
einer geeigneten Passwortrichtlinie
die Datensicherheit in der Praxis signifikant erhöhen.
Wenn man dem Passwort-Eingabefeld per CSS
eine vollständige Unicode-Schriftart
wie z. B.
bullets-unicode (Download s.u.)
zuweist, stellt der mobile Browser zwar weiterhin kurzzeitig
das eingegebene Original-Zeichen dar, allerdings immer nur
als Bullet, so dass die Passworteingabe nicht
direkt im Display ausgespäht werden kann.
In Desktop-Browsern wird in Passwort-Eingabefeldern
als Ersatzzeichen meist
ein Bullet • U+2022 (Chrome) oder
der Black Circle ● U+25CF (Firefox)
eingesetzt. Unter iOS und iPadOS hingegen
meist der Stern * U+002A (in jedem Browser).
Da in dieser Schriftart beide Zeichen identisch
definiert sind, ändert sich die Darstellung nicht.
Unter iOS bzw. iPadOS kann mit
-webkit-text-security:disc an Stelle des Sterns ebenfalls
ein Bullet eingestellt werden.
Gib auf einem Mobilgerät einfach die Zeichenfolge abc (⚠ kein echtes Passwort!) in die beiden folgenden Passwort-Eingabefelder ein und beobachte den Unterschied während der Eingabe:
Wenn dem Passwort-Eingabefeld die Bullet-Schriftart
über die Bedingung not
placeholder-shown
nur dann zugewiesen wird, wenn gerade kein Platzhalter sichtbar ist,
kann ein Placeholder grundsätzlich trotzdem verwendet werden.
Andernfalls würde auch der Platzhalter
mit den Ersatzzeichen angezeigt.
Es ist aber gemäß der
WCAG Richtlinien
unabhängig vom Platzhalter nötig, ein Beschriftungsfeld (Label) einzusetzen.
Da bei der Bullet-Schriftart-Variante die Hilfe
für die Nutzenden wegfällt, sollte alternativ eine
Möglichkeit zur Anzeige des bisher eingegebenen
Passworts angeboten werden.
Eine einfache Umsetzungsvariante ist z. B. beschrieben im
How TO - Toggle Password Visibility.
Zusätzlich zu der dort beschriebenen Lösung sollte
vor der Klartextanzeige des Passworts eine
Bestätigungsanfrage an den Nutzenden erfolgen,
um ein versehentliches Einblenden zu vermeiden.
Für Screenreader wäre es günstiger,
die Anzeige-Checkbox vor dem Passwort-Eingabefeld
zu positionieren.
Hinweis: Vor einem submit sollte im Falle einer Anzeige des Passworts der Typ des Eingabefelds von text wieder zurück zu password geändert werden.
Download von bullets-unicode.zip (dieses Archiv enthält die Bullet-Schriftart in verschiedenen Dateiformaten) und Ablegen auf dem Server im Beispiel in einem Verzeichnis fonts.
CSS-Schnipsel
HTML-Schnipsel
Hinweis: Weitere ggfs. sinnvolle Attribute wie required, pattern, inputmode oder minlength vgl. HTML-Referenz MDN Webdocs sind hier nicht berücksichtigt.
Hinweis: Bei den normalen Texteingabe-Feldern für den Benutzernamen
könnte es sinnvoll sein, die folgenden Attribute zu setzen:
autocorrect="off" autocapitalize="off" spellcheck="false"
Die häufig als Notlösung für den v.a. auf Mobilgeräten
automatisch gesetzten Anfangsgroßbuchstaben eingesetzte Lösung, den Benutzernamen vor der
Überprüfung immer in Kleinbuchstaben umzuwandeln und dann erst zu überprüfen,
schänkt die Sicherheit ebenfalls ein.