Captcha-howto - Grafik-Captcha als Formular-Spamschutz

aktualisiert am 08.Sep.2010

Seite bewerten:

Komplettes Beispiel

Grafik-Captcha als Formular-Spamschutz

Captchas als Formular-Spamschutz - ein komplettes Beispiel inkl. Quellcode

Anhand des Beispiels Example 1 wird hier beschrieben, wie einfach man eigentlich ein Captcha in ein bestehendes bzw. in ein neues PHP-Skript integrieren kann. Zu beachten ist, dass dieses Captcha nur als Beispiel herhalten soll, und es nicht zum Einsatz in ein Produktivsystem gedacht ist! Für diesen Zweck biete ich hier diverse Captcha-Skripte an, die um einiges sicherer sein dürften. Denn wenn ich mich recht entsinne, hatte RapidShare dieses, oder ein ähnliches Captcha damals im Einsatz, welches daraufhin schnell geknackt wurde.

Teil 1: Erläuterungen zum Skript
Teil 2: das Captcha in ein Formular einbinden
Teil 3: Prüfen der Captcha-Eingabe
Teil 4: Download

Teil 1: Erläuterungen zum Skript (example1.php):

example1.php gibt das Captcha-Bild aus und reicht den Zufallscode per Sessionvariable an die Formularseite weiter.

<?php
session_start(); //Achtung: muss an oberster(!) Stelle im Skript + der Formular-Seite stehen!

//################################################
// ACHTUNG: MUSS ANGEPASST WERDEN !
// mit dieser salt-Zeichenkette und der md5-Funktion wird die Sessionvariable gegen "Spione" geschützt
$secret = '7nS8Yx1w'; //hier musst du deine eigene zufällige Zeichenkette eintragen!
// Pfad zur TTF-Datei:
$font = "/srv/www/htdocs/website/tahoma.ttf"; //web
// $font = "C:/xampp/htdocs/website/tahoma.ttf"; //Windows
//################################################

$width = 90; //Bildbreite
$height = 60; //Bildhöhe
$fontsize = 48; //Fontgrösse
$pos_x = 2; //X-Position, wo das 1.Zeichen von links beginnt
$pos_y = 53; //Y-Position, gibt die untere Ecke der Zeichen an

//alle Zeichen die wir benutzen wollen
$ar = array("1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "K", "L", "N", "P", "R", "S", "T", "U", "V", "X", "Y", "Z");
$count = count($ar)-1; //ermittle Anzahl aller Zeichen

//erzeuge den randomcode
mt_srand((double)microtime()*1000000); //Initialisierung des Zufallsgenerators (ist ab php v4.2.0 nicht mehr nötig!)
$char1 = $ar[mt_rand(0,$count)];
$char2 = $ar[mt_rand(0,$count)];
$char3 = $ar[mt_rand(0,$count)];
$randomcode = $char1 . $char2 . $char3;
$_SESSION['randomcode'] = md5($randomcode.$secret); //Code verschlüsselt in Sessionvariable speichern

$im = imagecreatetruecolor($width, $height); //Erzeuge das Bild
$background = imagecolorallocate($im, 255, 255, 255); //Hintergrundfarbe
$border = imagecolorallocate($im, 0, 0, 0); //Rahmenfarbe
imagefilledrectangle($im, 0, 0, $width - 1, $height - 1, $background); //fülle Bild mit Hintergrundfarbe
imagerectangle($im, 0, 0, $width - 1, $height - 1, $border); //zeichne den Rahmen

//die 3 Farben, die verwendet werden sollen:
//Syntax: [$image],[rot(0-255)],[grün(0-255)],[blau(0-255)],[Transparenz(0-127)]
$red = imagecolorallocatealpha($im, 255, 0, 0, 50);
$green = imagecolorallocatealpha($im, 0, 255, 0, 70);
$blue = imagecolorallocatealpha($im, 0, 0, 255, 90);

//Erstelle die 3 Zeichen im Bild:
//Syntax: [$image],[fontgrösse],[Winkel],[X-Position],[Y-Position],[Farbe],[Font],[Text]
ImageTTFText ($im, $fontsize, mt_rand(-6,6), $pos_x + 0, $pos_y, $red, $font, $char1);
ImageTTFText ($im, $fontsize, mt_rand(-6,6), $pos_x + 22, $pos_y, $green, $font, $char2);
ImageTTFText ($im, $fontsize, mt_rand(-6,6), $pos_x + 44, $pos_y, $blue, $font, $char3);

header('Content-type: image/png'); //zuerst den HTTP-Header senden
imagepng($im); //Ausgabe des Bildes (Format PNG) an den Browser
imagedestroy($im); //gibt den durch das Bild belegten Speicher wieder frei
?>

Teil 2: das Captcha in ein Formular (form1.php) einbinden:

<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Captcha</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="<?=$_SERVER['PHP_SELF'];?>">
Name:
<input type="text" name="name" id="name" />
Email:
<input type="text" name="email" id="email" />
Prücode:
<img src="pfad/example1.php" alt="" />
Prüfcode:
<input type="text" name="pruefcode" id="pruefcode" />
Kommentar:
<textarea name="kommentar" id="kommentar" cols="55" rows="2"></textarea><br />
<input type="submit" name="senden" id="senden" value="Senden" />
</form>
</body>
</html>

Ergebnis:

Folgendes muss beim obigen Beispiel noch beachtet werden:
1. Pfadangaben. Je nachdem wo das Skript relativ zur Formular-Seite liegt, muss der Pfad (src="pfad/example1.php") angepasst werden.
2. Durch das action-Attribut (action="<?=$_SERVER['PHP_SELF'];?>"), wird nach dem Absenden der Formulardaten wieder diese Formular-Seite aufgerufen. D.h. auch die Auswertung und Weiterverarbeitung der Formulardaten, sowie die Prüfung des Captchas muss hier geschehen. Aus diesem Grund muss auf der Formular-Seite an oberster(!) Stelle eine PHP-Session mit <?php session_start(); ?> gestartet werden. Ansonsten muss man beim action-Attribut den Pfad und Dateinamen des weiterverarbeitenden Skriptes angeben.

Teil 3: Prüfen der Captcha-Eingabe:

Wir lassen es beim obigen action-Attribut, sodass die Auswertung auf der gleichen Formular-Seite geschehen muss. Hierzu fügen wir den folgenden PHP-Code vor dem Formular-Tag ein:

<?php
$secret = '7nS8Yx1w'; //Zeichenkette muss die gleiche wie in example1.php sein!

if(isset($_POST['senden'])){ //Wurde der Senden-Button gedrückt?
//Ist randomcode und Prüfcode gleich ?
if($_SESSION['randomcode'] == md5(strtoupper($_POST['pruefcode']).$secret)){
echo 'Alles OK! Formulardaten werden jetzt ausgewertet...';
}else{
echo 'Fehler! ...';
}
}
?>
... Hier gehts weiter mit unserem obigen Formular
<form id="form1" name="form1" method="post" action="<?=$_SERVER['PHP_SELF'];?>">
...

Anmerkung: das Skript prüft nur, ob der Senden-Button gedrückt wurde und ob der Zufallscode mit dem vom Benutzer eingegebenen Prüfcode identisch ist. Was jetzt noch fehlt, ist die Überprüfung der Formulardaten auf gültige Zeichen (siehe E-Mail-Formulare absichern), und natürlich ob überhaupt alle Formularfelder ausgefüllt wurden. Dies beides wurde bereits in den zum Download angebotenen Dateien integriert.

Teil 4: Download:

captcha.zip

User-Kommentare: Komplettes Beispiel

Hi, Eigentlich ist das alles super erklärt... Aber mit der "action-Anweisung" im form-tag habe ich das Problem, das das Formular nicht mehr versendet wird. Es wird nur die Formularseite neu und leer wieder aufgerufen. Dabei ist es auch egal, ob der Prüfcode eingegeben wurde oder nicht :-/ Was mache ich falsch?
knud 7.Feb.2009 13:29

18.08.2011

27.11.2011

Komplettes Beispiel