Development Center
Development Center » Nachrichten » Schlüsselgenerator

29.04.2011, 11:54 Uhr
Schlüsselgenerator
Wie bereits auf Facebook angekündigt, haben wir ein neues Projekt fertiggestellt: Development Center Schlüsselgenerator. Dieses kleine, feine und nützliche Werkzeug tut genau das, was man erwartet: Es generiert Passwörter. Dabei bietet es eine Fülle an Einstellungen und Möglichkeiten, das Passwort so zu wählen, dass es den eigenen Bedürfnissen angepasst ist.
In der heutigen Zeit werden immer mehr Passwörter benötigt, gerade im Internet. Da ist es an der Zeit auf eine starken Zufallsgenerator zu vertrauen!
Was sich auf den ersten Blick vielleicht etwas einfach und schlicht liest, hat aber allerhand zu bieten. Neben einer browserübergreifenden, sehr intuitiv zu bedienenden Oberfläche bis hin zu stark randomisierten Zufallswerten bietet dieses kleine Projekt alles. Das ganze Werkzeug ist höchst dynamisch und erlaubt schnelles Benutzen ohne Wartezeiten. Wir möchten hier zunächst die Funktionen vorstellen und danach die technischen Details erläutern, von Ajax bis hin zu Sprites.

Im Einleitungstext zum Schlüsselgenerator wird ziemlich gut die Funktion dieses Projekts erklärt:
Es kommt immer häufiger vor, dass man für einen neuen Account im Internet ein Passwort benötigt. Sei es ein E-Mail-Account, ein Forenaccount, Facebook, Google, YouTube, ... eine endlose Liste an Accounts. Und sie alle wollen mit Passwörtern versehen sein.
Da es sehr unsicher ist, bekannte Wörter oder Wortkombinationen als Passwort zu wählen, empfiehlt sich ein Tool, das die Aufgabe der Passwortgenerierung übernimmt. Am besten ist es, wenn dieses Tool zufällig arbeitet, man den Zufall aber beeinflussen kann: Das erlaubt - ganz einfach - der Development Center Schlüsselgenerator!

Nun erlauben sehr viele dynamische Einstellungen die Konfiguration: Es kann die Minimallänge des Schlüssels eingegeben werden, Elementgruppen hinzugefügt und editiert werden. Dabei bilden diese Elementgruppen den Kernpunkt. In einer Elemengruppe liegen beliebige Elemente, die frei wählbar sein können (Typ: "Eigene") oder fest definiert sind (z.B. "Kleinbuchstaben"). Bei letzterem kann man dann aber aus den Elementen wählen, die von dem Schlüsselgenerator verwendet werden sollen. Dies alles funktioniert komplett dynamisch, ebenso das hinzufügen und entfernen der Elementgruppen.
Mit Plus/Minus-Buttons neben den Zahlfeldern lässt sich ganz schnell eine beliebige Zahl eingeben. Einmal klicken, verändert die Zahl um eins. Hält man die Maustaste jedoch gedrückt, so verändert sich die Zahl sehr schnell.
Für weitere Hilfestellungen und Erläuterungen reicht ein Blick an das Ende der Projektseite: Dort findet sich eine ausführliche Beschreibung.

Neben den Funktionen bietet dieses kleine Projekt auch viele technische Features, die man auf den ersten Blick eventuell nicht wahrnimmt, die aber in großen Projekten durchgehend im Einsatz sind. Wenn man versteht, wozu sie benötigt werden und was sie auszeichnet, lassen sich damit modernste High-End-Webanwendungen entwickeln.

Mit Sprites verzichten wir auf viele Einzelgrafiken. Im Web über http funktioniert die Übertragung einer Grafik etwa wie folgt: Der Server überträgt den HTML-Code, ein moderner Browser erkennt während der Übertragung, dass eine Grafik geladen werden muss. Dann muss er diese Grafik beim Server anfordern. Dieser sucht die Grafik heraus und sendet sie an den User. Dieser empfängt sie und bestätigt, dass sie komplett angekommen ist. Der Server erhält diese Bestätigung und der Vorgang ist beendet. Hat man nun eine Webseite mit vielen Icons, so müssen viele kleine Grafiken übertragen werden, was sehr viel Zeit kostet. Wohlgemerkt, der Flaschenhals ist nicht die Größe der Icons, sondern die Menge. Daher verwenden wir Sprites. Das heißt, alle Icons werden in eine einzige Grafik gepackt.
So ist nur eine einzige Übertragung für all diese Icons notwendig.
Es hat noch zwei weitere Vorteile: bei langsamen Verbindungen werden sofort alle Icons angezeigt und - bei langsamen Servern oder schlechten Verbindungen fällt das immer wieder auf - Hover-Effekte haben absolut keine Ladezeit mehr. Wenn man mit der Maus über eine Schaltfläche fährt, verändert sich diese SOFORT, es muss nicht erst noch eine Grafik geladen werden.
Diese Technik wird in Kombination mit CSS realisiert.

Seit 2007/2008 hat sich die Haltung gegenüber JavaScript stark geändert: Davor war es in den meisten Firmen grundsätzlich auf allen PCs mit Internet deaktiviert, damit dies keinen Schabernack anstellen konnte. Doch Sicherheitsupdates und grundlegende Funktionsänderungen lassen JavaScript heute unverzichtbar erscheinen für eine dynamische Oberfläche. Das muss die Webseite aber dem Nutzer mitteilen, falls dieser JavaScript deaktiviert hat. Probieren geht über studieren, man hat sich schnell selbst überzeugt was passiert, wenn man JavaSript deaktiviert: Development Center Schlüsselgenerator.

Wir zeigen hier außerdem, wie man eine dynamische Tabelle einsetzt. Durch entfernen und hinzufügen von Elementgruppen wird eine Tabelle dynamisch erzeugt, geladen und beschrieben. Außerdem behalten Tabellenzeilen ihre Eigenschaften. Verändert man also die Menge an Elementen aus einer Elementgruppe (Plus/Minus/Häkchen), so bleibt dies der Tabellenzeile zugeordnet. Dabei können beliebig viele Zeilen beliebigen Inhalts dargstellt werden. Auch bei Zeilen gleichen Elementtyps bleiben die Einstellungen trotzdem nur für diese Zeile gespeichert.
Aus dieser Tabelle wird dann auch ein dynamischer Wertinput generiert, der dem Schlüsselgenerator sagt, wie der Schlüssel zu randomisieren ist. Dieser Vorgang ist nicht bei allen Browsern identisch und daher kein trivialer Punkt.

Wählt man zu wenige Elemente, dann bekommt man einen Warnhinweis vom Schlüsselgenerator. Jedoch wird der Schlüssel dann nicht einfach verkürzt, was die Sicherheit unbewusst verringern würde. Stattdessen wird aus den vorhandenen Gruppen weiter aufgefüllt. Doch auch hier kann man wieder etwas neues entdeckten: eigene Checkboxen. Damit lassen sich die Elementgruppen markieren, die für das Auffüllen verwendet werden sollen. Wie man in der Spritegrafik schon sah, gibt es auch eigene Grafiken für die Checkbox. Da die heutigen Browser leider noch nicht in der Lage sind, Radiobuttons und Checkboxen im Aussehen zu verändern, haben wir hier eine Möglichkeit gezeigt, die überall funktioniert und genau das liefert, was gewünscht ist - sowohl im Look als auch in der Funkion.

Damit alle Einstellungen an den Schlüsselgenerator übertragen werden, müssen wir sie ihm zuschicken. Das geschieht via AJAX, damit das Ergebnis auch gleich angezeigt werden kann, ohne dass die Seite neu laden muss.

Neben weiteren Kleinigkeiten wie das Ineinandergreifen von JavaScript und CSS sowie CSS-Eigenschafts-Klassen steckt natürlich das Hauptgedankengut im Schlüsselgenerator selbst. Dort müssen die übergebenen Daten richtig interpretiert werden und der Schlüssel muss so generiert werden, dass er Angriffen standhalten kann.

Das Projekt Development Center Schlüsselgenerator bietet also neben der reinen Funktion als Schlüsselgenerator auch viele technische Details - diese werden zusammengefasst auch in unseren großen Projekten eingesetzt.


03.05.2011 - Update von 1.0 auf 1.01
Es wurden ein paar kleine Verbesserungen vorgenommen:
  • In einem Detailpopup können nun mit einem Klick alle/keine ausgewählt werden.
  • Nach dem Klick auf 'Schlüssel erzeugen' springt man nicht mehr über die Seite.
  • Selbst wenn genug Gruppen und Elemente übergeben werden, die alle leer sind, so wird nun auch ein (nicht leerer) Schlüssel generiert.
  • Eine fehlende Grafik wurde ergänzt.
  • Im Hilftetext wurde ergänzt, dass Min/Max immer automatisch gewählt werden. Dies war auch schon vorher implementiert, stand nur nicht im Hilfetext.

05.05.2011 - Update von 1.01 auf 1.02
Es wurde eine kleine Verbesserung vorgenommen:
  • Beträgt die Schlüssellänge mehr als eine Zeile der Ausgabebox lang ist, so werden die Zeilen nun schöner und ästhetischer umgebrochen.


Verfasst von: Christian A. Reuter

Ähnliche Meldungen

01.08.2011, 14:37 Uhr
Update: Downpour

02.12.2010, 12:13 Uhr
DTO, TFC: Support eingestellt

26.02.2008, 03:58 Uhr
Serverumzug *UPDATE*

» mehr

© 2002-2010 Development Center | Impressum