Les développeurs PHP 8 rencontrent des difficultés à sécuriser leurs formulaires contre les bots avec des CAPTCHA inefficaces.
Sans un CAPTCHA robuste, les formulaires PHP 8 restent vulnérables aux attaques, compromettant la sécurité des données et augmentant les risques d’abus.
Apprenez à créer un CAPTCHA robuste en PHP 8. Cet article détaille la création d’un système de CAPTCHA sécurisé, de la génération de codes alphanumériques à l’affichage d’images personnalisées, pour renforcer la protection de vos applications web.
Introduction à la création de Captchas en PHP 8
L’attaque par relais de CAPTCHA est une technique où un utilisateur, en résolvant un CAPTCHA sur un site attractif, transmet sans le savoir la réponse à un site légitime ciblé par un attaquant. Ce type de menace met en évidence l’importance de concevoir des CAPTCHA robustes. Dans ce chapitre, nous allons apprendre à créer notre propre CAPTCHA pour protéger nos applications contre de telles attaques.
Mettre en place le formulaire HTML pour Captcha en PHP 8
Pour débuter la création de votre propre Captcha en PHP, il est essentiel de mettre en place le formulaire HTML qui accueillera l’email de l’utilisateur ainsi que le code Captcha. Voici le code HTML que vous utiliserez :
- Le code « index.php » :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mailing</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-0cda791e-7816-49a5-802c-a7b753a8532c: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-0cda791e-7816-49a5-802c-a7b753a8532c: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"0cda791e-7816-49a5-802c-a7b753a8532c","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<form action="" method="post">
<fieldset>
<legend>Recevez nos News</legend>
<div class="">
<label for="email">Votre Email</label>
<input type="email" name="email" id="email" placeholder="Votre email">
</div>
<div class="">
<label for="captcha">Copiez le code </label>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Code Captcha" width="" height="" data-lazy-src="captcha.php"><noscript><img decoding="async" src="captcha.php" alt="Code Captcha" width="" height=""></noscript>
<input type="text" name="captcha" id="captcha" placeholder="Copiez le code">
</div>
<input type="submit" value="S'inscrire">
</fieldset>
</form>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
- Résultat d’affichage :
Styliser le formulaire HTML du Captcha avec CSS
Après avoir créé la structure HTML de votre formulaire, il est essentiel de le styliser pour qu’il soit attrayant et facile à utiliser. Voici le code CSS que vous utiliserez pour mettre en forme votre formulaire :
- Le code « style.css» :
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body{
font-family: 'Roboto',sans-serif;
background-color: #34495e;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
form fieldset{
border:none;
background-color: #2c3e50;
padding:30px;
border-radius: 5px;
}
form legend{
font-size:20px;
font-weight:700;
text-transform: uppercase;
letter-spacing: 1px;
color: #ecf0f1;
}
form div{
margin: 20px 0;
}
form label{
color:#bdc3c7;
font-size:14px;
letter-spacing: 1px;
}
form div input{
display: block;
width: 100%;
margin-top: 5px;
padding: 15px;
box-sizing: border-box;
border-radius: 5px;
border: none;
outline: none;
background-color: #ecf0f1;
}
form div input:hover{
background-color: #fff;
}
form input[type="submit"]{
cursor: pointer;
padding: 10px 30px;
border-radius: 5px;
border: none;
outline: none;
margin: 15px auto;
display: block;
background-color: #d35400;
color: #ecf0f1;
font-size: 18px;
letter-spacing: 1px;
transition: 0.6s;
}
form input[type="submit"]:hover{
background-color: #f29c12;
}
- Résultat d’affichage :
Générer un code aléatoire
L’une des étapes essentielles pour implémenter un Captcha est de générer un code aléatoire que l’utilisateur devra reproduire pour valider son action. Voici le code PHP que vous utiliserez dans le fichier captcha.php :
- Le code de captcha.php :
<?php
session_start();
//Création d'un code alétoire
$_SESSION['captcha'] = rand(10000,99999);
$captcha = $_SESSION['captcha'];
echo $captcha;
Explication du code :
- Session Start : La fonction session_start() est utilisée pour démarrer une session PHP. Cela permet de stocker le code Captcha dans une variable de session, qui peut être récupérée et comparée lors de la soumission du formulaire.
- Génération du code aléatoire :
- La fonction rand(10000, 99999) génère un nombre entier aléatoire entre 10000 et 99999, créant un code à 5 chiffres. Ce code est difficile à deviner pour les robots, mais suffisamment simple pour les utilisateurs humains.
- Le code généré est ensuite stocké dans la variable de session
$_SESSION['captcha']pour être utilisé ultérieurement dans le processus de validation du formulaire.
- Affichage du Captcha :
- La commande echo $captcha; affiche le code Captcha généré. Ce code sera ensuite affiché dans le formulaire pour que l’utilisateur puisse le copier.
- Résultat d’affichage :
Ici lorsque vous accédée à url comme : http://localhost/captcha.php la sortie sera un nombre compris entre 10000 et 99999 par exemple : 91888 et lorsque vous actualisé la page le nombre change à une autre.
Créer une image Captcha sécurisée en PHP 8
L’étape suivante consiste à rendre votre Captcha plus sécurisé et difficile à automatiser en le transformant en image. Voici le code mis à jour dans captcha.php pour créer une image virtuelle :
<?php
session_start();
//Création d'un code alétoire
$_SESSION['captcha'] = rand(10000,99999);
$captcha = $_SESSION['captcha'];
//Création d'une image virtuelle
$img = imagecreate(55,25);
$imgColor = imagcolorallocate($img,0,0,0);
//Lier le code aléatoire à l'image
$textColor = imagecolorallocate($img,255,255,255);
imagestring($img,14,5,5,$captcha,$textColor);
Explication du code :
- Création de l’image :
- La fonction
imagecreate(55, 25)crée une image de 55 pixels de large et 25 pixels de haut. Ce sera l’espace où le code Captcha sera affiché. - La fonction imagecolorallocate
($img, 0, 0, 0)alloue une couleur noire(rgb(0, 0, 0))à l’image, qui sera utilisée comme couleur de fond.
- La fonction
- Ajout du texte à l’image :
- Le texte du Captcha est ajouté à l’image à l’aide de la fonction
imagestring($img, 14, 5, 5, $captcha, $textColor).Cette fonction prend plusieurs paramètres : l’image, la taille de la police (14), les coordonnées X et Y (5, 5), le texte à afficher (le Captcha généré), et la couleur du texte (blanc, rgb(255, 255, 255)).
- Le texte du Captcha est ajouté à l’image à l’aide de la fonction
Afficher une image Captcha dynamique
Après avoir créé votre image virtuelle avec le code Captcha, l’étape suivante consiste à afficher cette image dans le navigateur. Voici le code mis à jour dans captcha.php pour gérer cela :
<?php
session_start();
//Création d'un code alétoire
$_SESSION['captcha'] = rand(10000,99999);
$captcha = $_SESSION['captcha'];
//Création d'une image virtuelle
$img = imagecreate(55,25);
$imgColor = imagecolorallocate($img,0,0,0);
//Lier le code aléatoire à l'image
$textColor = imagecolorallocate($img,255,255,255);
imagestring($img,14,5,5,$captcha,$textColor);
//Afficher l'image virtuelle
header('Content-Type: image/jpeg');
imagejpeg($img);
imagedestroy($img);
Explication du code :
- En-tête HTTP pour l’image :
- La ligne header(‘Content-Type: image/jpeg’); spécifie que le contenu renvoyé par le script est une image JPEG. Cette ligne est essentielle pour que le navigateur interprète correctement le contenu comme une image.
- Génération et affichage de l’image :
- La fonction i
magejpeg($img); envoie l’image créée au navigateur. Cette image sera affichée dans l’élément<img>de votre formulaire HTML. - La fonction
imagedestroy($img); libère la mémoire associée à l’image une fois qu’elle a été envoyée, ce qui est une bonne pratique pour éviter des fuites de mémoire.
- La fonction i
Ces lignes sont nécessaires pour activer le support des images JPEG et pour éviter des avertissements inutiles qui pourraient causer des erreurs lors de l’affichage du Captcha.
- Résultat d’affichage :
Et voila le résultat d’affichage ici lorsque vous faire actualiser à la page le code est changer :
Manipuler et personnaliser l'image Captcha en PHP 8
Une fois que vous avez créé et affiché votre image Captcha, la prochaine étape est de valider la saisie de l’utilisateur en comparant le code qu’il a entré avec celui généré et stocké dans la session. Voici un exemple de script de traitement (traitement.php) qui accomplit cela :
<?php
session_start();
$code = $_POST['captcha'];
if(!empty($code) && $code == $_SESSION['captcha']){
$message = "Captcha ok ";
}else{
$message = "Captcha Pas ok ";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traitement</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-0cda791e-7816-49a5-802c-a7b753a8532c: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-0cda791e-7816-49a5-802c-a7b753a8532c: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"0cda791e-7816-49a5-802c-a7b753a8532c","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Traitement</h1>
<?= $message; ?>
</body>
</html>
Explication du code :
- Récupération du code Captcha :
- Le code saisi par l’utilisateur dans le champ captcha du formulaire est récupéré à l’aide de
$_POST['captcha']. - Ce code est ensuite comparé avec celui stocké dans
$_SESSION['captcha'].
- Le code saisi par l’utilisateur dans le champ captcha du formulaire est récupéré à l’aide de
- Validation du Captcha :
- Si le code saisi correspond à celui généré, un message de succès est affiché : « Captcha ok. ».
- Sinon, un message d’erreur est affiché : « Captcha Pas ok. ».
- Résultat d’affichage :
Dans le cas où le champ du captcha est laissé vider ou si un captcha incompatible avec celui affiché est saisi, voici le résultat :
Dans le cas contraire, si vous avez rempli le captcha avec le nombre correct, voici le résultat :
Maîtrise Complète de PHP 8 : De l'Initiation à l'Expertise en Architecture MVC
Changer la police d'une image Captcha en PHP 8
Pour personnaliser davantage votre Captcha, vous pouvez modifier la police utilisée pour afficher le code. Dans cet exemple, la fonction imagettftext() est utilisée pour appliquer une police TrueType (TTF) au texte du Captcha. Voici le code mis à jour dans captcha.php :
<?php
session_start();
//Création d'un code alétoire
$_SESSION['captcha'] = rand(10000,99999);
$captcha = $_SESSION['captcha'];
//Création d'une image virtuelle
$img = imagecreate(70,30);
$imgColor = imagecolorallocate($img,0,0,0);
//Lier le code aléatoire à l'image
$textColor = imagecolorallocate($img,255,255,255);
//imagestring($img,14,5,5,$captcha,$textColor);
$police = 'destroy.ttf';
imagettftext($img,21,0,3,20,$textColor,$police,$captcha);
//Afficher l'image virtuelle
header('Content-Type: image/jpeg');
imagejpeg($img);
imagedestroy($img);
Explication de code :
- Définition de la police :
- $police = ‘destroy.ttf’; : Cette ligne définit le chemin vers le fichier de police TrueType (TTF) que vous souhaitez utiliser pour le texte du Captcha.
- Application de la police au texte :
- imagettftext($img, 21, 0, 3, 20, $textColor, $police, $captcha);: Cette ligne utilise la fonction imagettftext() pour dessiner le texte sur l’image en utilisant la police spécifiée.
- Les paramètres de cette fonction sont :
- $img : L’image virtuelle sur laquelle le texte sera dessiné.
- 21 : La taille de la police en points.
- 0 : L’angle de rotation du texte. Ici, c’est 0, donc le texte sera horizontal.
- 3, 20 : Les coordonnées X et Y de la position du texte sur l’image (en pixels).
- $textColor : La couleur du texte, définie précédemment avec imagecolorallocate().
- $police : Le chemin vers le fichier de police TTF, ici ‘destroy.ttf’.
- $captcha : Le texte à afficher, dans ce cas, le code Captcha généré.
- Résultat d’affichage :
Créer un Captcha alphanumérique sécurisé en PHP 8
Pour renforcer la sécurité de vos Captchas, il est souvent utile de générer des codes alphanumériques plutôt que des nombres uniquement. Un code alphanumérique, qui combine à la fois des lettres et des chiffres, rend les Captchas plus difficiles à automatiser et à déchiffrer par des robots.
Voici les modifications apportées dans le code pour générer un code alphanumérique :
//$_SESSION['captcha'] = rand(10000,99999);
$_SESSION['captcha'] = substr(md5(rand()),0,5);
$captcha = $_SESSION['captcha'];
Modifications :
- Ancien Code : Génération d’un nombre aléatoire entre 10000 et 99999.
- Nouveau Code : Utilisation de md5(rand()) pour créer un hash MD5 d’un nombre aléatoire, puis extraction des 5 premiers caractères pour obtenir un code alphanumérique.
- Résultat d’affichage :
Résumé sur la création de Captchas en PHP 8
Cet article présente une approche complète pour la création d’un système Captcha personnalisé en PHP. Voici les étapes principales abordées :
- Mise en Place du Formulaire HTML :
Vous avez appris à créer un formulaire HTML de base qui recueille l’email de l’utilisateur et inclut un champ pour le code Captcha. Le code HTML (index.php) crée une interface simple où l’utilisateur peut entrer son email et copier le code affiché dans l’image Captcha.
- Mise en Forme du Formulaire avec CSS :
Pour améliorer l’apparence du formulaire, vous avez utilisé du CSS pour le styliser. Le code CSS (style.css) ajoute une mise en page moderne et attrayante en utilisant des couleurs, des polices et des espacements appropriés pour une meilleure expérience utilisateur.
- Création d’un Code Aléatoire :
Vous avez appris à générer un code Captcha aléatoire en utilisant PHP. Le code PHP (captcha.php) génère un nombre aléatoire à 5 chiffres, stocke ce code dans une session et l’affiche pour que l’utilisateur puisse le copier.
- Création d’une Image Virtuelle :
Vous avez amélioré la sécurité en transformant le code Captcha en une image. Le code PHP modifié (captcha.php) crée une image virtuelle, y ajoute le code Captcha, et affiche l’image dans le formulaire HTML. Cette étape empêche les robots de lire directement le code Captcha.
- Affichage de l’Image Virtuelle :
Vous avez appris à configurer les en-têtes HTTP pour que le navigateur interprète correctement le contenu comme une image JPEG. Le code PHP affiche l’image Captcha générée à l’aide de la fonction imagejpeg().
- Manipulation de l’Image Virtuelle :
Vous avez mis en place un script de traitement (traitement.php) pour valider le code Captcha saisi par l’utilisateur en le comparant avec le code stocké dans la session. Le script affiche un message de succès ou d’erreur en fonction de la correspondance.
- Modification de la Police de l’Image Virtuelle :
Vous avez appris à personnaliser la police utilisée dans l’image Captcha en utilisant une police TrueType (destroy.ttf). Le code PHP mis à jour applique cette police au texte du Captcha pour améliorer la lisibilité et la personnalisation.
- Création d’un Code Alphanumérique :
Pour augmenter la sécurité du Captcha, vous avez modifié le code pour générer un code alphanumérique plutôt que numérique. En utilisant la fonction md5() pour créer un hash et en extrayant les premiers caractères, vous avez produit un code plus complexe difficile à déchiffrer par les robots.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
Pour renforcer la sécurité de vos formulaires, créer un captcha PHP 8 est indispensable. En suivant les étapes de cet article, vous pouvez développer un CAPTCHA robuste et personnalisé, difficile à contourner par les robots, tout en profitant des avantages offerts par PHP 8 pour optimiser votre application web.
