Image de sécurité pour formulaires PHP

I. Introduction aux images de protection

Suite à une idée qu'un membre de notre forum m'a donné, je vais vous expliquer comment créer une image de protection pour vos formulaires web en PHP et HTML. Vous voyez de quoi je parle ? Ces images de protection contenant un code généré aléatoirement à la fin de nombreux formulaires que vous remplissez sur le web. En voilà un exemple :

tutoriel image de seucrite image

En cherchant j'ai vu quelques tutoriels ou morceaux de codes qui trainent sur le web, mais bien souvent on ne vous explique pas tout, et c'est l'intérêt de ce tutoriel.
A quoi servent ces images de sécurité exactement ? Elles permettent aux webmasters d'empêcher que des requêtes automatiques soient utilisées pour remplir des formulaires. Et oui il y a de plus en plus de gens qui s'amusent envoyer du spam ou autre par des scripts automatisés, cette image de sécurité permet d'empêcher cela.
En effet, si nous mettions un code sous forme de texte en bas de notre formulaire, un script serait toujours capable de le recopier étant donné que ce texte se retrouvera dans le code source de notre page sans problème. Par contre, le but de ce tutoriel va être de créer une image jpeg contenant un code généré aléatoirement, ce qui en fait quelque chose qui peut être uniquement recopiépar un humain. En effet le code ne devient que visuel, et il devient impossible pour un robot ou script de transformer ce code visuel en code texte (enfin pour le moment, on ne sait pas ce que l'avenir nous réserve..).

II. Explications

1. Création d'une image de sécurité

Nous allons commencer par voir comment créer une image dynamiquement et contenant du texte en PHP. Nous commencerons donc par généré un code aléatoire sur 6 caractères par exemple, puis pour le mémoriser nous allons le conserver en session. En effet, nous ne somme pas encore dans la page du formulaire d'une part, et d'autre part comment allons nous vérifier que le code entré par l'utilisateur est valide si nous ne mémorisons pas celui-ci (en format "texte") ?

On va donc commencer par démarrer une session (obligatoire en début de page pour utiliser les sessions), généré un code alphanumérique et sotcké celui-ci dans une session :

// on démarre une session pour pouvoir mémoriser le code
session_start();
// on définit les caractères utilisés pour le code généré
$liste = "123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// génére le code en piochant dans les caractères de la liste
$code = '';
while(strlen($code) != 6) {
   $code .= $liste[rand(0,36)];
}
// on mémorise le code de 6 caractères généré en session
$_SESSION['code']=$code;

Puis nous allons créer une image dont la taille fera 70x20 pixels, le fond sera du gris (RVB : 238, 238, 238), la couleur de police sera du noir (RVB : 0, 0, 0).
Avec header() nous allons empêcher l'image de se mettre en cache, pour qu'aucun navigateur ne la mémorise et qu'elle soit bien généré à chaque chargement de page. Puis on va écrire le code dans celle-ci avec la fonction ImageString() et créé définitivement l'image avec imagejpeg().

// on créé une image de 70 x 20 pixels (larg x hauteur)
$img = imageCreate(70, 20) or die ("Problème de création GD");
// Choix de la couleur de fond, ici ça donne du Gris ( RVB)
$background_color = imagecolorallocate ($img, 238, 238, 238);
// Choix de la couleur de la police, ici du noir
$ecriture_color = imagecolorallocate ($img, 0, 0, 0);
// le code la police utilisée
$code_police=5;
// on créé une image jpeg en empêchant la mise en cache
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header("Content-type: image/jpeg");
// on introduit le code dans l'image
imageString($img, $code_police,(70-imageFontWidth($code_police) * strlen("".$code.""))/2,0, $code,$ecriture_color);
// on créé une image avec une qualité médiocre de 30%
// pour éviter qu'un robot puisse la lire
imagejpeg($img,'',30);
// on libère la mémoire
imageDestroy($img);
?>

Et voilà notre fichier qui génére une image aléatoirement est prêt et notre image ressemblera à cela :

tutoriel image de seucrite image

Il ne vous restera plus qu'à enregistrer le code dans un fichier php, par exemple "imagesecu.php".

 

 

2. Création d'un formulaire avec image de sécurité

Attaquons maintenant la partie du formulaire qui va contenir l'image de sécurité. Nous allons faire un formulaire de contact très classique et très simple car je ne me m'attarderai pas sur le formulaire en lui-même étant donné que ce n'est pas le sujet de ce tutoriel. Si cela vous intéresse, j'ai déjà expliqué tout cela dans les tutoriels pour Faire un formulaire HTML, CSS, PHP, formulaire PHP et envoi par email.

Voilà donc le formulaire très simple que je vais faire pour la démonstration de ce tutoriel :

tutoriel image de seucrite image

Voici le code de ce tutoriel sur lequel je ne vais pas m'attarder non plus (lisez les tutoriels sur le formulaires que je vous ai indiqué précédemment en cas de besoin) :

















image de protection






Vous noterez juste l'image que j'ai inséré et dont j'ai mis la source en gras. Il s'agit de notre image de sécurité.
Comme vous l'aurez donc compris, il est possible de mettre un fichier php dans la propriété "src" d'une image, et c'est cela qui va bien nous être utile ici. La condition est tout de même d'enregistrer ce fichier du formulaire en extension .php, sinon cette image ne sera pas exécutée et donc pas créée.

Enregistrez donc ce code dans un fichier php, par exemple je vais le nommer "formulaire.php"

 

 

3. Vérification du code de sécurité

Si vous avez bien suivi jusque là, il ne nous reste plus qu'à vérifier que le code de sécurité entré par l'utilisateur est valide. Ceci va être fait dans un fichier que j'ai nommé "contact.php" et qui se trouvait dans l'action exécutée par le formulaire si vous regardez bien le début du code du paragraphe 2.
Ce fichier va donc vérifier le code de sécurité pour traiter les données du formulaire pour en faire ce que vous voulez.

Nous allons démarrer la session à nouveau, pour pouvoir récupérer la valeur d'origine du code et la comparer au code entré par l'utilisateur. Ensuite s'il est valide, traitez les données du formulaire comme vous voulez, par exemple l'envoi d'un email s'il s'agit d'un formulaire de contact, puis on détruit les variables de session.

Attention le code suivant est a but démonstratif seulement, il n'est pas complet il manque le traitement des données du formulaire autre que le code de sécurité !

// On initialise la session
session_start();
/* on vérifie que la code est toujours mémorisé en session et qu'il fait 6 caractères */
if(!isset($_SESSION['code']) || strlen($_SESSION['code']) != 6) die("Erreur !");

// on vérifie que la code entré est valide
if($_SESSION['code'] != $_POST['verif']) die("Erreur : le code de protection est invalide !");

/*
Ici on traite les données du formulaire, on envoie le mail par exemple pour un formulaire de contact
*/

// on détruit les variables de session, désormais inutiles
session_unset();
session_destroy();
?>

III. Conclusion du tutorial

Et voilà ! Vous venez de voir comment ajouter une image de sécurité (ou image de protection, comme vous voulez) pour vos formulaires PHP & HTML. Quand vous l'aurez fait une fois, vous verrez que ce n'est pas si compliqué que c'est assez rapide à refaire. Et cela peut tout de même vous éviter bien des ennuis, des spams sur vos formulaires, etc.
Je vous vois déjà venir et me demander comment créer un formulaire de contact digne de ce nom. C'est pourquoi le prochain tutoriel portera certainement sur la création d'un formulaire de contact en PHP, en se servant de l'image de sécurité créée dans ce tutoriel.