Barrierefreie CAPTCHAs (1/2)

Kategorie HTML & CSS

Datum: 25.02.2008, 14:11 - Autor: Manko10

Wer kennt sie nicht, die kleinen Bildchen mit willkürlichen Zeichenfolgen darauf, die es abzutippen gilt, um zwischen Mensch und Maschine zu unterscheiden. CAPTCHAs werden solche Grafiken genannt.
Dieses etwas wirre Akronym steht für Completely Automated Public Turing Test to Tell Computers and Humans Apart, was in etwa so viel heißt wie: Vollautomatischer Turing-Test zum Unterscheiden zwischen Menschen und Computern. Die meist verbreitete Art dieser Gattung der Rasse sind eben jene Text-Bildchen, die bestimmt schon jeden einmal in den Wahnsinn getrieben haben.

CAPTCHAs gelten als Allheilmittel. Sie scheinen ein sicherer Schutz vor Spambots zu sein, sehen toll aus und wirken professionell.
Die andere Seite von CAPTCHAs: groß, klobig, nervig und sie sperren User mit Textbrowsern aus, sofern diese keine Grafiken darstellen (von Menschen, die auf Screenreader angewiesen sind, ganz zu schweigen). Und mal ehrlich - wer hat schon arg Lust, CAPTCHAs abzutippen.

Nun stellt sich die Frage, wie man seine Formulare sonst vor Angriffen schützen soll. Die Lösung ist eigentlich ganz einfach: schlagen wir die unliebsamen Maschinen doch ganz einfach mit ihren eigenen Waffen. Ein Spambot ist ganz versessen darauf, alle Felder auszufüllen. Besonders, wenn diese auch noch email oder email_address heißen. Deshalb muss eigentlich nur ein Feld erstellt werden, das unter keinen Umständen ausgefüllt sein darf.

Definieren wir also ein Formular:

Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

<form action="" method="post">
    <div>
        <label for="name">Ihr Name:</label>
        <input type="text" name="name" id="name" size="40" />
        
        <label for="comment">Ihr Kommentar:</label>
        <textarea name="comment" id="comment" cols="40" rows="5"></textarea>
        
        <label for="email_address">Dieses Feld bitte nicht ausfüllen:</label>
        <input type="text" name="email_address" id="email_address" size="40" />
    </div>
</form>

Der vielleicht erwartete Weg, ein <input /> vom Typ hidden zu nehmen, ist nicht der Richtige. So dumm sind Bots nämlich auch nicht. Ein verstecktes Formularfeld ist für einen Seitenbesucher nicht sichtbar, also werden sie auch von Bots ignoriert.
Auch von einer Feldbennung wie security oder captcha rate ich ab. Wer Bots fangen will, der muss auch ansprechende Namen verwenden.

Achtung hierbei!

Übernimm diesen Code nicht 1:1, sondern variiere. Wenn die Bots zu oft auf das gleiche Formularfeld treffen, erregt dies Misstrauen. Auch andere Namen, wie url, homepage, icq, msn etc. sind ansprechend. Es kann auch nicht schaden, die Namen ab und zu zu wechseln.

Um das Feld nun zu verstecken, können wir einfach folgende CSS-Angabe verwenden:

Code:

1:
2:
3:

input#email_address, label[for="email_address"] {
    display:none;
}

Da ein Spam-Bot CSS wie JavaScript in der Regel ignoriert, wird das Feld nur für den Benutzer versteckt. Wer keine CSS-Unterstützung in seinem Client hat, weil er z.B. einen Screenreader benutzt, bekommt den zum Feld gehörenden Label-Text vorgelesen.

Was jetzt noch fehlt, ist die serverseitige Abfrage, ob das Feld auch wirklich leer ist.

PHP-Code:

1:
2:
3:

if ($_POST['email_address'] !== '') {
    exit('<h1>Es ist ein Fehler aufgetreten!</h1>Sie haben ein Feld ausgefüllt, das nicht ausgefüllt weden darf.');
}

Ich verwende bewusst kein trim(), da ja geprüft werden soll, ob das Feld wirklich leer ist.

Das ist alles. Ich freue mich über jeden konstruktiven Kommentar.

Weiterführende Links zum Thema:

Ausblick: Im zweiten Teil des Tutorials erläutere ich noch weitere sehr wirkungsvollen Methoden, um Spam-Bots das Leben schwer zu machen.

Seiten: (1/2) 1 2 »

18 Kommentare:

Ähm wie ?

Datum: 20.03.2008, 23:25 - Autor: Gast

also ich habe clanbook von php einfach.de und habe von php schreiben nullahnung habe gerade nach anleitung installiert undnun 3000 spam einträge!ui ging dass schnell kannst du mir bitte sagen wie undmi t was ich deinen tipp verwirklichen kann? bitteu man twort per e-mail sid@verkotzt.de Dankeim Vorraus

Super

Datum: 16.04.2008, 12:38 - Autor: Gast

Wirklich eine Geniale Idee, ich werde ab jetzt diese Methode probieren ? fals erfolg werde ich nochmal vorbei schauen !

danke !

E,K

Danke für den Kommentar

Datum: 16.04.2008, 13:39 - Autor: Manko10

Hallo,

du kannst ja mal eine Bot-Log aufstellen. Jedesmal, wenn ein Bot in die Falle tappt, wird das in einer Log festgehalten. Du wirst erstaunt sein, wie viele Bots sich da ansammeln.

Liebe Grüße
Manko10

Auf die Idee gebracht

Datum: 11.05.2008, 23:27 - Autor: Gast

Hallo,
durch diesen genialen Beitrag hier, kam auf die Idee, einfach mal das Alter, welches man bei mir im Gästebuch auch angeben kann, auf sinnvolle Werte zu prüfen. Die Bots haben das Feld immer gefüllt, mit dreistelligen Altersangaben ohne Sinn und Verstand. Eine Abfrage auf maximal 100 hat da ratz fatz für erheblich mehr Ruhe gesorgt ;-)

LG
Micha

Datum: 12.05.2008, 17:13 - Autor: Manko10

Hallo Micha,

ja, solche Methoden helfen erheblich.
Sinnvoll ist es auch, auf bekannte Spam-Wörter zu prüfen (ich kann sie jetzt hier nicht schreiben, sonst würde ich den Kommentar nicht senden können - aber du weißt schon: kleine Pillen für Manneskraft, kostenlose Softwaredownloads usw.) und ggf. den Eintrag zu verweigern. Auch das Prüfen auf übermäßig viele Links in Textareas kann manchmal Wunder bewirken.

Liebe Grüße
Manko10

klasse sache

Datum: 26.05.2008, 11:35 - Autor: Gast

das ist wirklich mal eine schöne idee, werde das so realisieren und die verhassten captcha-abfragen rauslassen.
danke für diese tolle anregung

lg
jan

andere lösung

Datum: 03.06.2008, 13:37 - Autor: Gast

ichfahre sehr gut mit einer logischen abfrage. Hab eine Seite für unsere 2. Seniorenmanschaft erstellt und als Spamschutz die Frage: Die seite welcher Manschaft ist das (Zahl)? nun braucht der nutzer nur noch eine 2 eintragen. seid dem hatte ich nie wieder nen Bot im Gästebuch

Datum: 03.06.2008, 13:45 - Autor: Manko10

Hallo,

die Lösung ist allemal besser, als grafische Captchas, da ein Screenreader die Frage vorlesen kann. Sie ist sogar besser, als die häufig verwendete Lösung einer Rechenaufgabe.
Das Problem ist nur, dass der User weiterhin eine Sicherheitsmaßnahme präsentiert bekommt. In Teil 1und Teil 2 dieses Tutorials geht es ja nicht nur darum, grafische Captchas abzuschaffen, sondern auch darum, wie man es schafft, Spamschutzmethoden zu entwickeln, von denen der User in der Regel nichts mitbekommt.

Aber vielen Dank für deine Ergänzung
Manko10

Datum: 21.06.2008, 20:44 - Autor: Manko10

Hallo koellmania,

vielen Dank für das Kompliment.
Zu deiner Frage: wie soll das schon aussehen? Du erstellst per Zufallsalgorithmus verschiedene Zahlen. Diese addierst du und speicherst das Ergebnis.
Dem User präsentierst du dann die einzelnen Zahlen, die er zusammenrechnen muss. Seine Rechnung kannst du dann mit dem gespeicherten Ergebnis vergleichen.

Die andere Variante mit der Frage "Die Seite welcher Mannschaft ist das (Zahl)?" hat den entscheidenden Nachteil, dass sie nur solange funktioniert, wie die Seite unbekannt ist. Immerhin muss immer dasselbe Ergebnis eingefügt werden. Es ist also ziemlich leicht, einen Bot auf dieses Formular zu spezialisieren.

Aber wie schon geschrieben: Teil 1 und Teil 2 dieses Tutorials sind dafür gedacht, grafische CAPTCHAs, aber auch andere "Nervabfragen" zu vermeiden.
Du musst immer bedenken: Logik-Abfragen sind zwar nicht so schlimm, wie grafische CAPTCHAs, nerven aber dennoch und sind auch nicht unbedingt barrierefrei (es ist nicht unbedingt jeder in der Lage, Rechnungen im Kopf durchzuführen).

Genial!

Datum: 24.10.2008, 10:36 - Autor: Jens

Hallo allerseits,

ich habe dein "Tuturial" auf mein GB angewandt und heute wurden schon keine Spam-Einträge mehr verzeichnet.

Ein kleines Problem hatte ich mit:

input#email_address, label[for="email_address"] {
display:none;
}

Hier wird das Label trotzdem angezeigt!?

Eine letzte Frage: Ich will ein Bot-Log erstellen. Wie gehe ich das ganze an (Links etc.)?

Danke & Thumbs up!

Datum: 24.10.2008, 10:46 - Autor: Manko10

Hallo,

ich kenne jetzt deinen HTML-Code nicht, aber an sich müsste das <label>-Element anhand des for-Attributs erkannt werden. Ansonsten kannst du es auch mit anderen CSS-Selektoren ansteuern und verstecken.

Wenn du eine Bot-Log erstellen willst, kannst du einfach jeden Seitenbesucher zählen, der auf die Falle hereingefallen ist.

Der zweite Teil des Tutorials ist übrigens auch lesenswert, da hier noch einige Methoden zur Spamerkennung erklärt werden, die helfen, wenn einige Bots doch dran vorbeikommen sollten.

Zweischneidig

Datum: 23.12.2008, 14:57 - Autor: Gast

Diese Ansätze sind ja schon ganz nett, sehen aber für mich eher nach einem Wettrüsten zwischen Bot und Botbekämpfung aus, so wie wir es bei Viren und Antivirenprogrammen schon kennen.
Es ist ja nun nicht so, dass Bot-Entwickler dumm sind. Klar, die ersten Generationen waren primitiv, aber mit etwas Analyseaufwand, Markup, JS- und CSS-Parsern kann ein etwas fortgeschrittener Bot, die hier beschriebenen Ansätze leicht aushebeln.

Erst recht, wenn es sich nicht um einen generischen Bot sondern um einen Wrapper handelt, der sich an eine bestimmte Seite anpasst oder in der Lage ist, aus Fehlern zu lernen.

Hingegen ist es fast unmöglich, eine OCR Software zu schreiben die ein gut entwickeltes grafisches Captcha knackt. Selbst Pwntcha und ähnliche Seiten, die schon viele Captchas knacken konnten, stehen bei teils einfachen und gut lesbaren Captchas vor argen Problemen.

Nichtsdestotrotz ist der Gedanke, ohne Captchas auszukommen definitiv gut und sollte weiter verfolgt werden. Mein derzeitiger Ansatz ist, Formularelemente serverseitig mit zufälligen kryptischen Benamungen zu erzeugen und möglichst viele Inputfelder eines Typs zu verwenden. Das sorgt dafür, dass der Bot nicht weiß, ob und wo er was ausfüllen soll und dies auch nicht erlernen kann.
Lediglich durch umfangreiches Parsing der Produktivseite könnte er Annahmen treffen, welche Beschreibung (immerhin muss ja für den Besucher sichtbar sein, wo was hin muss) "geografisch" welchem Inputfeld am nächsten kommt. Diesen Vorgang kann man soweit erschweren, dass der Bot gezwungen ist, einen Screen zu machen und diesen zu analysieren, was in keinem Verhältnis zum Ziel eines gewöhnlichen Bots steht, so lange es einfachere "Opfer" gibt.

Viel Erfolg bei der SPAM Bekämpfung!

Datum: 23.12.2008, 15:14 - Autor: Manko10

Hallo, danke für deinen Kommentar!

Gar keine Frage, graphische CAPTCHAs sind oft sehr wirksam, aber sie sind eben auch ein wirksamer Schutz gegen User, das ist das Problem.
Natürlich stellt dies eine Art Wettrüsten dar, aber nicht vollkommen. Der erste Teil dieses Tutorials stellt nur die Lösung mit einem Honey-Pott vor, der zweite Maßnahmen zur Filterung von Kommentaren sowie der Analyse des Verhaltens. Die derzeit wirksamste Methode ist meiner Erfahrung nach dem Bot das spammen zu verbieten. Es ist kaum möglich, einem Bot das Absenden eines Formulars zu verbieten, aber man kann dennoch anhand des Inhalts relativ sicher erkennen, ob es ein Bot ist. Mittlerweile sind 18468 Spamkommentare verfasst worden, seit ich den Zähler habe und es ist nur ein einziger durchgekommen, der den Inhalt

„Nice site, guy. Thank you!“

hatte. Dass dies wirklich Spam war, konnte man am relativ sinnlosen Titel erkenne, der ungefähr so lautete: „ASDjdfsaHERdJRDf“. Und mit einem Spamkommentar innerhalb von Monaten, der noch nichteinmal obszönen Kram, geschweige denn Links, beinhaltet, kann ich leben.
Gegen einen Bot, der auf eine Seite spezialisiert ist, kann aber auch mit einem graphischen CAPTCHA relativ wenig ausrichten, hier hilft meist wirklich nur noch ein Filter.
Oder nimm die CAPTCHAs von vBulletin: die gelten als relativ sicher, aber wir Mods bei php.de müssen immer mal wieder Kommentare von Spam-Usern löschen und diese anschließend sperren.

Aber wie immer führen viele Weg nach Rom und so lange sie alle barrierefrei sind, sind sie in Ordnung. Jede neue Idee ist immer willkommen.

Zitat:
Viel Erfolg bei der SPAM Bekämpfung!

Danke, dir auch und schöne Weihnachtstage!

Datum: 25.02.2009, 11:15 - Autor: Quiety

Ich war gerade auf der Suche nach einem guten Chaptcha, welches ich in meine Seite einbauen konnte, und bin dann durch ein Forum auf deine Seite gestoßen.
Ich bin schon seit vielen Jahren PHP-Entwickler, habe schon sehr viele Seiten programmiert, aber auf diese Idee bin ich noch nicht gekommen.
Ich kann mir sehr gut vorstellen, dass das DIE LÖSUNG ist. Ich werde sie sofort bei mir einbauen.

Tja, meist hilft es einfach, zu wissen, wie etwas funktioniert, um etwas sinnvoll dagegen unternehmen zu können. Bravo.

Datum: 27.03.2009, 01:42 - Autor: Manko10

Schön, dass es dir gefällt.

Great Thanks

Datum: 08.10.2009, 23:10 - Autor: Timberwolf

Moin moin,

ich wollte mal Danke sagen für das schicke Tutorial

hat auf der Seite dich ich gerade entwickel einiges an arbeit gespart. Danke und ne echt nice idee... vorallem wenn man mal wieder drauf kommt jedes Feld zu prüfen

grüsse Timberwolf

Datum: 09.08.2010, 21:08 - Autor: Nicole

Genial, endlich hab ich etwas gefunden, was nicht schwer und trotzdem wirkungsvoll ist.
Schade nur, dass ich nicht selbst testen kann ob es funktioniert, da ja das Feld nicht da ist für den User

Datum: 12.08.2010, 22:14 - Autor: Manko10

Hi,

du kannst das Feld ja zum Testen sichtbar machen (entweder die CSS-Regel temporär auskommentieren oder das Feld im Browser selbst per Firebug o.ä. sichtbar machen).

Navigation:

Besucherzähler:

Spamfresser:

Versionen:

Aktionen:

Foren-Beiträge:

RSS-Feeds:

Bookmarks: