jQuery: Passwörter in Formularen anzeigen

| 8 Kommentare

Letztens bin ich wiedermal über ein simples, aber doch recht nützliches Plugin für jQuery gestolpert, welches showPassword heißt. Der Name ist dabei Programm, es zeigt auf Wunsch Passwörter in Passwort-Eingabefeldern an oder maskiert sie.

Viele, wenn nicht sogar die meisten, Registrierungs- oder Passwortvergessenformulare haben zwei Felder für das neue Passwort. Eines für die Eingabe und ein zweites um die erste Eingabe zu überprüfen, falls der Benutzer sich vertippt hat. Mich nervt sowas immer ein wenig und oft kopiere ich dann eh was hin und her.

Einfacher ist es doch, wenn ich mir das Passwort einfach nochmal ansehen kann. Solange mir nicht irgendwer über die Schulter schaut bleibt mein Passwort ja sicher. Der zweite Vorteil ist, dass das Passwort serverseitig nicht gegeneinander validiert werden muss.

Ein kleines Video in Davin’s Blog zeigt, wie einfach die Verwendung des Plugins ist. Leider funktioniert der Downloadlink in seinem Artikel nicht mehr. Ich habe das Script nun code.google.com bezogen. Mit dem Download der Version 1.3 kommt auch eine kleine Demo zum Probieren mit.

8 Kommentare

  1. Nun, auch wenn das Plugin für dich nützlich ist: Der gemeine Internetuser ist dumm, wir “erfahrene” User prüfen selbstredend unsere Eingaben routinemäßig. Eine Valideirung des Passwortes ist eine Plausibilitätsprüfung. Es reicht ja schon EIN vertauschen von zwei Zeichen – und bäm, Problem. Und der Mensch übersieht sehr gerne solch vertauschte Buchstaben. Außerdem geben die meisten User überall das selbe Passwort an – je öfter das passiert, desto routinemäßiger die Eingabe, desto weniger prüft man das Passwort nochmal nach, bevor man einen neuen Account registriert, weil man sich ja (völlig automatisch) “absolut sicher” ist, dass es richtig geschrieben ist. Darum ist diese Validierung zwingend Pflicht, meiner Meinung nach. Dieses Plugin dort, darf höchstens ein nettes Gimmick sein, aber nicht als einzige (Pseudo-)Plausibilitätsprüfung genutzt werden.

    Nur mal so in den raum geworfen.

  2. Moin,

    nettes Plugin. Für mich überwiegen hat das jedoch einen sehr negativen Nebeneffekt in Bezug auf gespeicherte Passwörter. Diese werden damit nämlich auch angezeigt. Damit kommen z.B. Gastsurfer ohne Eingabe eines Masterpassworts an mein gespeichertes Passwort ran. Halte ich für ungeschickt.

    Zitat:
    “Der zweite Vorteil ist, dass das Passwort serverseitig nicht gegeneinander validiert werden muss.”

    Den Punkt habe ich nicht verstanden. Könntest du den bitte noch einmal erläutern?

  3. @Patrick: Einen Vertipper kannst du mit doppelter Eingabe aber auch nicht ausschliessen und letztendlich ist die doppelte Eingabe ja auch nur der Tatsache geschuldet, dass man die Eingabe in Passwortfeldern nicht sehen kann. Sieh es einfach als eine Alternative.

    @Christian: An gespeicherte Passwörter kommst du auch über browsereigene Funktionen oder spätestens dann, wenn die Developer Toolbar oder was Vergleichbares installiert ist. Die Validierung bezieht sich auf die Prüfung beider Passworteingaben.

  4. Wichtiger als das Passwort sichtbar zu machen (das mache ich mit den Firefox-Plugin “Show Password” https://addons.mozilla.org/de/firefox/addon/show-password/ für Chrome gibt es so was auch), finde ich es, bei doppelten Passwortfeldern anzuzeigen, ob die Passworte gleich sind. Dazu nutze ich das ChromaHash-Script: http://mattt.github.com/Chroma-Hash/

  5. @Patrick

    Der gemeine Internetuser ist dumm

    Ja, allerdings empfiehlt auch der Usability Guru Jakob Nielsen dieses Verfahren seit 2 1/2 Jahren!
    http://www.useit.com/alertbox/passwords.html

    Dieses Plugin halte ich allerdings für nicht sehr gelungen, weil da wird das input Feld und die Attribute fürs Aussehen kopiert. Das kann aber problematisch sein, wenn man moderne Attribute wie pattern, min, max, required usw. nutzt und die auch für das Styling verwendet. Schöner wäre es gewesen, das input Feld einfach zu clonen und mit verändertem type Wert zurück zu kopieren. Das wäre auch kürzer gewesen.

  6. @Gabriel: Du hast dafür vielleicht ein Firefox-Plugin und damit steht dir diese Möglichkeit auf deinem Rechner zur Verfügung. Dieses Plugin macht die Funktion für alle Nutzer einer Seite zugänglich. ChromaHash scheint auch eine nette Sache zu sein und zeigt dem Benutzer wenigstens vor dem Absenden des Formulares, dass die Eingabe nicht stimmen kann.

    @Oliver: Interessanter Hinweis zur Umsetzung des Plugin und den Attributen.

  7. Ein jQuery Plugin oder ein Browser Plugin finde ich für diese Aufgabenstellung doch etwas reichlich übertrieben.
    Ein Bookmarklet reicht da vollkommen aus:
    var _input = document.getElementsByTagName(‘input’);
    for(i in _input) if(_input[i].type == ‘password’) _input[i].type = ‘text’;

  8. Danke für deinen Kommentar, Michael! Im Prinzip hast du Recht, da ja nur der Type geändert werden muss. Das Plugin erzeugt ein zweites Eingabefeld, damit das Standardverhalten nicht verändert wird, z.B. AutoComplete.

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.


Schlagwörter: A/B-Test, AbstractType, Adapter, AddOn, Administration, Ajax, Alühn, Alühn2, Amazon, Animation, Annotations, Anonyme Klasse, Ant, Apache, API, Array, ArrayAccess, Attachment, Auftrag, Ausbildung, Auswertung, Authentifizierung, AutoLoader, AWS, Backup, Bedienung, Bedingung, Benchmark, Berechtigung, Berlin, Bildbearbeitung, Bildschirmfoto, Blog, Blogroll, BOM, Bootstrap, Bot, Browser, Bugtracker, Byte Order Mark, Bücher, Cache, CakePHP, Call-Center, Callback, CamelCase, Canvas, Captcha, CDN, Cheatsheet, CLI, Clickout, Closure, Cloud, CodeSniffer, Collection, Community, Comparator, Config, Contest, Controller, Converter, CouchDB, Countable, Cronjob, CRUD, CSS, CSV, CustomLibrary, Custom_Model, Daemon, Data Mapper, Datei, Datenbank, Datensicherung, Datenstruktur, Datentypen, Dating, Datum, Debug, Decorator, Dekorierer, Design, Design Patterns, Doctrine, Dokumentation, Dump, Duplikat, each, EC2, Eclipse, Email, Entwicklung, Entwurfsmuster, Enum, Erweiterung, Event, Eventhandling, Exception-Handling, Extension, Facebook, Factory, Fallback, Fehler, Fehlermeldung, Filter, Firefox, Flash, flexigrid, Foreach, Formatierung, Formular, Framework, FTP, Funktion, Futon, ga:pi(), Getter, Gnome, Google Analytics, Hash, Hash-Bang, Header, htaccess, HTML5, htpasswd, HTTP, HTTPS, IDE, If, Implementierung, InnoDB, Interceptor, Interface, Internet Explorer, isset, Iterator, Java, JavaScript, Job, jQuery, Kommentar, Konfiguration, Konsole, Kontrollstruktur, kopieren, kostenlos, Kundenbetreuung, Late Static Binding, Layout, Links, Linux, Listeners, Lizenz, Logging, Löschen, Magento, Magic Methods, Manual, ManyToMany, Marketing, Methode, Model, Monolog, MVC, MySQL, NetBeans, Network, Nirvanix, Objekt, Observable, Observer, OneToMany, Online Tool, OOP, Open Source, Operator, OR-Mapper, Order, ORM, O’Reilly, Parameter, Partnersuche, Passwort, Performance, PHP, php.ini, PHP hates me, phpMyAdmin, PHPUnit, Plugin, Point and Click, Popup, Praktikum, Proxy, Prüfsumme, Prüfung, QR-Code, Qualitätssicherung, Query, Queue, Redesign, Refactoring, Reflection, Repository, Request, Response, Responsive Design, Rest-API, Rockstar, Rollback, Routing, S3, Samba, Scheifen, Schleife, Schutz, Screenshot, Secure Shell, Selbstreferenz, Server, Setter, setTimeout, Shop, Sicherheit, Sicherung, Sichtbarkeit, Singleton Pattern, Skin, SOAP, Social Network, Software, Sortierung, Sourcecode, Spam, Speicherproblem, Spickzettel, SPL, Splittest, SSH, SSL, Stammtisch, Statement, static, Statistik, Status, Stellvertreter, Strategy Pattern, Stream, String, Stuttgart, Stylesheet, Subversion, Sun VirtualBox, Support, SVN, Switch, Symfony, Symfony2, Symfony Live, Tag, Template, Template Method, Ternär Operator, Testing, Theme, Thumbnail, Tool, Tour, Tracking, Twig, Twitter, Type-Cast, Ubuntu, Umwandlung, Underscore, unset, Update, Upload, Url, User Story, Validierung, Vererbung, Versionskontrolle, Versionsnummer, Verzweigung, Video, Videospiel, Virtualisierung, Visitor Pattern, Vorschaubild, walk, Warteschlange, Webserver, Webservice, Weiterleitung, Werkzeug, Windows, WindowsAzure, WordPress, Wrapper, Writer, XML, Youtube, Zeitschleife, Zeitsteuerung, Zend Framework, Zend_Application, Zend_Cloud, Zend_CodeGenerator, Zend_Http_Client, Zend_Reflection, Zend_Service, ZPress, Zugangskontrolle, Zugriffsmethode