CAPTCHA MIT CSS

Als ich eben so ein scheiß Captcha-Feld ausfüllen musste, deren Buchstaben so verstümmelt und deswegen nicht zu lesen waren, dass ich erst nach dem sechsten Versuch eine gültige Eingabe hatte, habe ich mir kurz ein paar Gedanken gemacht.
Manche Dienste sind auf Captchas angewiesen, Blogs eher weniger und in Foren-Suchen sind die total nervig, aber wenn es mit andere Schutzmaßnahmen nicht geht, dann ist ein Captcha die sicherste Methode.

Ich halte auch von diesem reCAPTCHA-Projekt eher wenig, vielleicht eine gute Idee aber teilweise werden so unlesbare Zeichen angezeigt, dass ich das keinem User zutrauen würde.

Ich habe mir dann mal einfach etwas überlegt, dass vielleicht auch nicht 100% sicher ist, aber mit herkömmlichen Captcha-Scanner nicht so einfach zu scannen wäre, trotzdem aber für den User sehr gut zu erkennen ist.

Generiert wird ein Bild mit mehreren Zeilen. In jeder Zeile ist eine Zeichenfolge mit sehr gut lesbarem Text. Aber in nur einer Zeile ist der gültige Code. Per CSS-Eigenschaft background-position wird nur diese Stelle dem User angezeigt. Die restlichen Zeilen bleiben versteckt.
Man könnte das auch horizontal oder als Matrix darstellen, vielleicht auch mehrere einzelne DIVs deren Zeichen irgendwie aus der Bild-Matrix zu einem ganzen Code zusammen gesetzt werden.

Ein Scanner müsste also die HTML- und CSS-Datei parsen und herauszufinden welcher Code jetzt der richtige ist. Im php-Code steht es ja fest und die CSS-Werte werden dann angepasst. Die CSS-Angaben könnte man auch komplexer machen, also nicht irgendwie einfach per ID zuweisen, sondern die Elternelemte dazu bauen. Für jeden Browser ein Kinderspiel das dann richtig anzuzeigen, sogar für den IE.

Der CAPTCHA-Scanner weiß nicht was er scannen soll, der Besucher sieht gut lesbare Buchstaben.

Ist das nicht mal was?
Naja … genug überlegt. Ich geh’ schlafen.

Auf’s Blog gehauen am 18.01.2008 01:06 · Kommentare [2]

Gepunkteter Rahmen bei Links unter Firefox

Aktive und fokussierte Links bekommen unter’m Firefox automatisch einen grau gepunkteten Rahmen um das Element. In den meisten Fällen vielleicht praktisch, da viele Webdesigner vergessen diesen Pseudoelementen Werte zuzuweisen um sie von anderen Zuständen zu unterscheiden, aber in einigen Fällen sieht das nicht so schön aus.
Z. B. wenn Linkelemente aus gestalterischen Gründen aus Grafiken bestehen.

Die Rahmengestaltung kann man beeinflussen oder den Rahmen ganz weg bekommen, indem man der Pseudo-Klassen :focus und :active die selten benutzte Eigenschaft outline mit den bestimmten Werten zuweist.

Wenn es also ganz weg soll:

a:active, a:focus{outline: none}

Aber nicht vergessen focus und active optisch mit den anderen Zuständen zu unterscheiden. Sonst ist es nicht möglich zu erkennen auf welchem Element man gerade fokussiert ist, wenn man mit dem Tab arbeitet.

Auf’s Blog gehauen am 27.11.2007 09:34 · Kommentare [13]