6x bewertet

Spam-Schutz durch Captcha

von neontrauma  |  16.08.2007 um 13:51 h
PHP Anwendungen
Typ: PHP Anwendungen
Stufe:Mittel
Wer auf seiner Website ein Kontaktformular oder ein Gästebuch eingebaut hat, der hat oft mit einer Spamflut zu kämpfen. Dagegen nützt es, eine sogenannte Captcha-Funktion einzubauen - also ein Bildchen, auf dem ein Zufallscode generiert wird, den man korrekt eintippen muss, damit der Eintrag erfolgt bzw. die Mail versandt wird. Captcha ist die Abkürzung für Completely Automated Public Turing test to tell Computers and Humans Apart, zu Deutsch: "vollautomatischer öffentlicher Turing-Test, um Computer und Menschen zu unterscheiden".

Hier wird Schritt für Schritt erklärt, wie man einen solchen Captcha in ein bereits bestehendes Gästebuch- oder Kontaktmailerskript einbaut.


die Voraussetzungen
Auf dem Server muss die GD Library installiert sein - zum Teil richten dies die Webhoster bereits standardmäßig ein, wenn nicht, muss man sie eben selber installieren. Ob die GDlib vorhanden ist, lässt sich durch Ausführen der PHP-Info herausfinden. Falls benötigt, kann man die GDlib hier herunterladen.


das Verzeichnis /captcha

Zunächst erstellt man sich auf dem Server ein Verzeichnis namens /captcha. In dieses kommen nun drei Dateien hinein:


die captcha.php
Diese Datei enthält sozusagen das Herzstück unseres Spamschutzes - einfach den Code kopieren und als captcha.php auf dem Server speichern. Für diese Datei gehen Credits an stoppt-den-spam.info.
<?php
session_start();
unset($_SESSION['captcha_spam']);

function randomString($len) {
srand(date("s"));
//Der String $possible enthält alle Zeichen, die verwendet werden sollen
$possible="ABCDEFGHJKLMNPRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789";
$str="";
while(strlen($str)<$len) {
$str.=substr($possible,(rand()%(strlen($possible))),1);
}
return($str);
}

$text = randomString(5); //Die Zahl bestimmt die Anzahl stellen
$_SESSION['captcha_spam'] = $text;

header('Content-type: image/png');
$img = ImageCreateFromPNG('captcha.png'); //Backgroundimage
$color = ImageColorAllocate($img, 0, 0, 0); //Farbe
$ttf = $_SERVER['DOCUMENT_ROOT']."/captcha/XFILES.TTF"; //Schriftart
$ttfsize = 25; //Schriftgrösse
$angle = rand(0,5);
$t_x = rand(5,30);
$t_y = 35;
imagettftext($img, $ttfsize, $angle, $t_x, $t_y, $color, $ttf, $text);
imagepng($img);
imagedestroy($img);
?>


Dem aufmerksamen Leser Smilie wird aufgefallen sein, dass der String $possible weder ein großes i (I); noch ein kleines L (l), noch eine Eins (1) aufgeführt ist - aus dem schlichten Grund, dass diese drei Zeichen sich so ähnlich sehen, dass es für den Besucher schwierig wird, das richtige Zeichen zu erkennen und einzutippen.

Die Modifizierungen wie Schriftfarbe oder Anzahl der Zeichen sind, denke ich, ausreichend im Script selber erklärt.

die captcha.png
Als nächstes benötigen wir das Bild, auf das der Zahlencode generiert werden soll. Hierzu erstellt man in einem beliebigen Grafikprogramm eine 140x40 Pixel große Grafik, setzt ein Muster darauf (etwa aus verschiedenen Brushes zusammengesetzt) und speichert das Bild als captcha.png ab. Anschließend wird es in das Verzeichnis /captcha hochgeladen.

die Schriftdatei
Nun brauchen wir noch eine Schriftart, in der der Zahlencode erscheinen soll. Diese Datei muss ebenfalls in der Verzeichnis /captcha auf den Server geladen werden - viele greifen hier zu der Schrift X-Files, aber natürlich ist jede andere auch möglich. Falls eine andere Schriftart verwendet wird, muss man das noch in der captcha.php entsprechend abändern (in der Zeile, in der der Kommentar //Schriftart dahinter steht). Die X-Files-Datei gibt's hier.

ins Formular einbauen
Okay, jetzt kommt der Einbau in's Formular - da sollen ja sowohl das Bildchen, als auch ein Eingabefeld für den Code erscheinen.
Je nachdem, ob man sein Formular mit Tabellen verwirklicht hat oder nicht (wobei von Tabellen abzuraten ist...), sieht der Einbau da ein bisschen anders aus:

Tabelle
<tr>
<td><img src="captcha/captcha.php" border="0" title="Sicherheitscode"></td>
<td><input type="text" name="sicherheitscode" size="5"></td>
</tr>


ohne Tabelle
<img src="/captcha/captcha.php" border="0" title="Sicherheitscode" style="float:left; margin-right:5px;" /><input type="text" name="sicherheitscode" id="sicherheitscode" size="5">

ins Script einbauen
So, als Letztes muss jetzt noch dem Gästebuch- bzw. Kontaktmailer gesagt werden, dass er den Eintrag bzw. das Verschicken der Mail erst dann zulässt, wenn der Code korrekt eingetippt wurde. Dazu setzt man den folgenden Code um das bisherige Skript drumherum:
<?php
session_start ();
if(isset( $_SESSION [ 'captcha_spam' ]) AND $_POST [ "sicherheitscode" ] == $_SESSION [ 'captcha_spam' ]){
unset( $_SESSION [ 'captcha_spam' ]);

//
//
//Hier kommt das bisherige Script hin.
//
//

}
?>


Wenn man will, kann man auch noch ein Else ergänzen, falls der Code nicht korrekt war:
}else{
die ( "Der Sicherheitscode ist falsch!" );
}


Bei Fragen: anne@kaltgruen.de :)



11 Kommentare




Sayuri

geiles tut ^^ werd ich für meine vormulare mal benutzen ^^ DANKEEEEEEEE
am 17.08.2007 um 00:02 Uhr


Nekoji

Ein tolles Tutorial, dass sicher viele gebrauchen können. :)
am 15.06.2008 um 13:14 Uhr


hey ... ich hab den zweiten code "ins Formular einbauen" reingemacht, aber 1. ist dort die endung falsch oda? hier steht php aber es is doch ein bild, muss doch png sein oda? und 2. wenn ich das zu png änder, dann zeig er mir zwar ein bild an aber den text nich, also den zahlencode nicht. und meine letze frage, wo muss ich denn den dritten code einbauen, damit die mail erst abgeschickt wird, wenn der sicherheitscode richtig eingegeben wurde?? dankeschööön für eure hilfe :)
am 10.01.2009 um 13:39 Uhr


Vronal

^^ ich hab genau das selbe problem...
am 26.03.2009 um 14:52 Uhr


CrazyMoFu

Bei mir kommt auch nur ein X und kein bild ich wüsste auch nicht was anders muss
am 17.01.2010 um 22:06 Uhr


Jeanne

So, ich habs nun auch einmal ausprobiert und am Anfang hat da bei mir auch nicht so geklappt, wie ich das wollte Smilie Allerdings hab ich mir dann den Code von den Tabellen angeschaut und musste feststellen, dass das auch gar nicht gehen kann Smilie

Theoretisch ist es auch ganz logisch, für alle die es immer noch wissen wollen :


<img src="/captcha/captcha.php" border="0" title="Sicherheitscode"
style="float:left; margin-right:5px;" /><input type="text"
name="sicherheitscode" id="sicherheitscode" size="5">



Bei diesem Code handelt es sich bei dem Fehler direkt in der 1. Zeile. Was so viel bedeuten mag wie, man muss nach dem img src=" einfach nur den Pfad zum Bild ändern. D.h. aus dem ursprünglichen Code, also diesem hier :


<img src="/captcha/captcha.php" 



Wird bei mir daraus :


<img src="/captcha/captcha.png"



Also kurz und knapp, man muss einfach in dem Code anstatt php, nur .png schreiben, weil ja das Bild und nicht die ganze captcha.php datei angezeigt werden soll. Das nur das Bild angezeigt werden kann erschließt sich aus dem "img src="

Im Ganzen sieht das also jetzt so aus: Tabelle 1


<tr> <td><img src="captcha/captcha.png" border="0"
title="Sicherheitscode"></td> <td><input type="text"
name="sicherheitscode" size="5"></td> </tr>



Und hier das Ganze nochmal ohne die Tabelle für alle die lieber den anderen Code verwenden wollen :


<img src="/captcha/captcha.php" border="0" title="Sicherheitscode"
style="float:left; margin-right:5px;" /><input type="text"
name="sicherheitscode" id="sicherheitscode" size="5">



Letztendlich muss man dann nur noch darauf achten, dass auch der Ordner stimmt. Also besitzt man einen Ordner in dem der Order Captcha enthalten ist, dann müsst ihr den Pfad natürlich auch noch dort angeben.

Was ich damit sagen will ist nun folgendes, das alles würde dann ungefähr so aussehen für
die Tabelle 1 :


<tr> <td><img src="HIER DEN ORDNER ANGEBEN/captcha/captcha.png"
border="0" title="Sicherheitscode"></td> <td><input type="text"
name="sicherheitscode" size="5"></td> </tr>



Und das Alles nochmal ohne die Tabelle:


<img src="HIER DEN ORDNER ANGEBEN/captcha/captcha.png" border="0"
title="Sicherheitscode" style="float:left; margin-right:5px;" /><input
type="text" name="sicherheitscode" id="sicherheitscode" size="5">



Na ja, das wars auch eigentlich schon. Wenn man halt keinen Ordner besitzt, in dem der Ordner Captcha ist, dann kann man das / vor dem captcha/captcha.png auch ganz einfach weglassen. Letztendlich ist es egal, aber falls es nicht gehen sollte... Smilie

Na ja, wenn ihr diese Kleinigkeit verändert habt, müsste es also euer Captcha-Spamschutz-Bild angezeigt werden. Jedenfalls gehts bei mir nun ˆ_ˆ

Ich hoffe ich konnte euch ein kleines Bisschen helfen und das es nun geht Smilie
am 30.03.2010 um 09:04 Uhr


Jeanne

Verdammt... Nun hab ich bei der Verbesserung noch einen Fehler reingeknallt.. Smilie Als ich eben noch einmal meinen ganzen Kommentar gelesen habe, ist mir aufgefallen, dass ich bei der Verbesserung der "ohne" Tabelle den Pfad gar nicht geändert habe... Smilie

Na ja... Also hier noch einmal das Richtige, falls jemand sich von mir auch noch das Falsche rauskopiert hat:

VORHER IM CODE


<img src="/captcha/captcha.php" border="0" title="Sicherheitscode"
style="float:left; margin-right:5px;" /><input type="text"
name="sicherheitscode" id="sicherheitscode" size="5">



NACHER IM CODE


<img src="/captcha/captcha.png " border="0"
title="Sicherheitscode" style="float:left; margin-right:5px;" /><input
type="text" name="sicherheitscode" id="sicherheitscode" size="5">



So müsste es nun stimmen... Jedenfalls ist der Rest aus meinem vorherigen Eintrag, soweit ich es beurteilen kann, richtig Smilie Bis auf die paar kleinen Rechtschreibfehler... *hüstel* ist eben einfach noch zu früh für mich Smilie
am 30.03.2010 um 09:16 Uhr


Miss_Jennii

Bei mir wird nur das hintergrund bild angezeigt :/ trotz des .png statt .php
am 03.09.2010 um 01:08 Uhr


Miss_Jennii

na toll v.v jetzt wird alles perfekt angezeigt, aber der sicherheitscode ist IMMER falsch v.v
am 03.09.2010 um 13:08 Uhr


Miss_Jennii

Ok .. Anscheinend geht′s im IE und FF, aber Chrome nicht o.
am 03.09.2010 um 13:15 Uhr


miss.jana

Bei mir ist der Code auch immer falsch T__T
am 12.10.2010 um 13:46 Uhr