NotoOn - Ressources pour webmaster

Introduction

Adieu spam !! Eh oui ce tutorial va vous permettre de créer votre propre captcha anti-spam. Vous pouvez sans tarder le voir en action sur la page de démo.
Tout d’abord qu’est-ce qu’un captcha? C’est un test utilisé pour différencier les humains des machines. Ici en l’occurence, il s’agit d’une image générée dynamiquement avec PHP et qui contient du texte, qu’il faut tout simplement lire et recopier. Simple pour un humain mais difficile à interpréter pour une machine. Cela constitue donc une première barrière pour empêcher le spam dans vos formulaires web.
Bien sûr, les captchas visuels ne sont pas infaillibles; en effet, certains logiciels (OCR) permettent de reconnaitre des caractères, même sur une image ! C’est pourquoi nous essaierons de brouiller un peu les pistes en ajoutant un dégradé de couleurs en fond, et en utilisant plusieurs polices de caractères, plusieurs couleurs, et différentes dispositions des caractères, en faisant attention à ce que ça reste lisible pour l’humain.

Avant de commencer

Pour manipuler des images de façon dynamique avec PHP, il faut que la bibliothèque GD2 soit installée et activée sur votre hébergeur. C’est le cas sur la plupart des hébergements payants, et même sans doute gratuits.
Nous utiliserons une image captcha.png (arrière-plan de la future image), un fichier captcha.php (image à afficher), un fichier index.php (formulaire) et des polices de caractères TrueType (autant que vous voulez) à placer dans le dossier fonts.
Si vous ne modifiez pas les chemins du script, l’arborescence des fichiers doit donc s’organiser comme suit :

/dossier/image.png
/dossier/captcha.php
/dossier/index.php
/dossier/fonts/font-a.ttf
/dossier/fonts/font-b.ttf

Fonctionnement

La création de l’image

On part d’une image captcha.png vierge de tout texte.

Le script captcha.php va récupérer cette image pour écrire dessus dynamiquement. Pour cela, il va d’abord générer un code aléatoire de cinq chiffres et lettres. Il va ensuite chercher les polices TrueType stockées dans le dossier fonts et les appliquer au hasard à chacun des caractères de la chaîne générée, en n’oubliant pas de les personnaliser un peu (taille, inclinaison, disposition, couleur).
Une fois le traitement terminé, à chaque appel du script, l’image sera envoyée au navigateur. L’affichage ne se fait alors plus par une image en dur, mais par captcha.php qui devient une image réelle au yeux du navigateur.

La vérification

En haut des fichiers captcha.php et index.php remarquez qu’on démarre à chaque fois une session avec session_start(). Dans captcha, cette session nous sert de stockage, alors que dans index.php, on l’utilise pour récupérer ce qui a été stocké.
Lorsque la chaîne aléatoire est générée par captcha.php, celle-ci est cryptée avec md5() puis stockée dans une variable de session $_SESSION['captcha'].
Après l’envoi du formulaire par l’utilisateur, le code qu’il a entré est récupéré, crypté par le même algorithme md5() pour être finalement comparé à la variable de session précédemment créée. Si le code crypté correspond à la chaîne cryptée, tout va bien, sinon l’utilisateur peut recommencer.

Mise en place

L’image dynamique captcha.php

<?php
/* ////////////////////
	INITIALISATION
//////////////////// */

/* Démarrage d'une session qui va nous permettre de stocker la valeur à recopier. */
session_start(); // session_start() se place toujours avant toute sortie vers la page web

/* Chemin absolu vers le dossier */
if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/');

/*
Création d'une fonction pour générer la chaîne aléatoire à recopier (sans cryptage) :
- strlen() retourne la taille de la chaine en paramètre
- mt_rand(a, b) génère un nombre aléatoire entre a et b compris : cette fonction est plus rapide que rand() de la bibliothèque standard
- $chars{0} retourne le premier caractère de la chaîne $chars, $chars{1} le deuxième ...
*/
function getCode($length) {
	$chars = '23456789ABCDEFGHJKLMNPQRSTUVWXYZ'; // Certains caractères ont été enlevés car ils prêtent à confusion
	$rand_str = '';
	for ($i=0; $i<$length; $i++) {
		$rand_str .= $chars{ mt_rand( 0, strlen($chars)-1 ) };
	}
	return $rand_str;
}

/* Stockage de la chaîne aléatoire de 5 caractères obtenue */
$theCode = getCode(5);

/* Cryptage de la chaine avec md5() avant de la stocker dans la variable de session $_SESSION['captcha'] de la session en cours.
C'est à cette variable qu'on va comparer le code entré par l'utilsateur dans le formulaire. */
$_SESSION['captcha'] = md5($theCode);

/* Afin de traiter les caractères séparément, on les stocke un par un dans des variables. */
$char1 = substr($theCode,0,1);
$char2 = substr($theCode,1,1);
$char3 = substr($theCode,2,1);
$char4 = substr($theCode,3,1);
$char5 = substr($theCode,4,1);

/*
glob() retourne un tableau répertoriant les fichiers du dossier 'fonts', ayant l'extension .ttf ( pas .TTF ! ).
Vous pouvez donc ajouter autant de polices TrueType que vous désirez, en veillant à les renommer.
*/
$fonts = glob('fonts/*.ttf');

/* //////////////////////////////
	TRAITEMENT DE L'IMAGE
////////////////////////////// */

/*
imagecreatefrompng() crée une nouvelle image à partir d'un fichier PNG.
Cette nouvelle $image va être ensuite modifiée avant l'affichage.
 */
$image = imagecreatefrompng('captcha.png');

/*
imagecolorallocate() retourne un identifiant de couleur.
On définit les couleurs RVB qu'on va utiliser pour nos polices et on les stocke dans le tableau $colors[].
Vous pouvez ajouter autant de couleurs que vous voulez.
*/
$colors=array (	imagecolorallocate($image, 131,154,255),
				imagecolorallocate($image, 89,186,255),
				imagecolorallocate($image, 155,190,214),
				imagecolorallocate($image, 255,128,234),
				imagecolorallocate($image, 255,123,123) );

/* Création d'une petite fonction qui retourne une VALEUR aléatoire du tableau reçu en paramètre. */
function random($tab) {
	return $tab[array_rand($tab)];
}

/*
Mise en forme de chacun des caractères et placement sur l'image.
imagettftext(image, taille police, inclinaison, coordonnée X, coordonnée Y, couleur, police, texte) écrit le texte sur l'image.
*/
imagettftext($image, 28, -10, 0, 37, random($colors), ABSPATH .'/'. random($fonts), $char1);
imagettftext($image, 28, 20, 37, 37, random($colors), ABSPATH .'/'. random($fonts), $char2);
imagettftext($image, 28, -35, 55, 37, random($colors), ABSPATH .'/'. random($fonts), $char3);
imagettftext($image, 28, 25, 100, 37, random($colors), ABSPATH .'/'. random($fonts), $char4);
imagettftext($image, 28, -15, 120, 37, random($colors), ABSPATH .'/'. random($fonts), $char5);

/* //////////////////////////////
	FIN => ENVOI DE L'IMAGE
////////////////////////////// */

/*
Comme c'est le fichier image.php et non captcha.png qui va être appelé,
on envoie un en-tête HTTP au navigateur via header() pour lui indiquer
que image.php est bien une image au format PNG.
*/
header('Content-Type: image/png');

/* .. et on envoie notre image PNG au navigateur. */
imagepng($image);

/* L'image ayant été envoyée, on libère toute la mémoire qui lui est associée via imagedestroy(). */
imagedestroy($image);
?>

Le formulaire index.php

Ce fichier contient le formulaire de vérification et c’est donc lui qui va afficher l’image. C’est également au sein de ce fichier qu’on traite les données reçues une fois le formulaire envoyé. Il va comparer le code entré par l’utilisateur, à la chaîne stockée dans la variable de session précédemment créée, tout ça en cryptage md5().
N’oubliez pas de mettre le session_start() en début de fichier !

<?php
/* IMPORTANT : Redémarrage de la session */
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Captcha Anti-Spam</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<div>

	<?php
	/* Si l'utilisateur a bien entré un code */
	if (!empty($_REQUEST['userCode']))
	{
		/* Conversion en majuscules */
		$userCode = strtoupper($_REQUEST['userCode']);

		/* Cryptage et comparaison avec la valeur stockée dans $_SESSION['captcha'] */
		if( md5($userCode) == $_SESSION['captcha'] )
			echo '<h2 class="correct">Correct !</h2>'; // Le code est bon
		else echo '<h2 class="incorrect">Ahem.. Recommencez !</h2>'; // Le code est erroné
	}
	/* Si aucun code n'a été entré */
	else echo '<h2>Etes-vous un bot ?</h2>';
	?>

	<!-- Formulaire $_SERVER['PHP_SELF'] signifie que le traitement du formulaire se fait sur la même page -->
	<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
	<div>
		<!-- Notre image créée -->
		<img src="captcha.php" alt="Captcha" id="captcha" />

		<!-- (JavaScript) Changer d'image à la volée si elle est illisible  -->
		<a style="cursor:pointer" onclick="document.images.captcha.src='captcha.php?id='+Math.round(Math.random(0)*1000)+1">Recharger l'image</a>

		<p>
			<label for="userCode">Entrez le code<br />insensible à la cAsSe</label>
			<input name="userCode" id="userCode" type="text" />
			<input type="submit" name="submit" id="submit" value="" />
		</p>
	</div>
	</form>

</div>
</body>

Conclusion

Enfin, sachez aussi qu’il existe également des captchas audios, mais aussi des captchas textuels qui se basent sur la réflexion de l’utilisateur et non sur la simple lecture : par exemple, combien font 1+1?, ainsi que d’autres petites astuces pour freiner le spam, que je traiterai peut-être dans un autre tutorial