De nombreux développeurs PHP se heurtent à la problématique du spam sur leurs formulaires de contact et à la gestion sécurisée des mots de passe, laissant leurs sites vulnérables à des attaques automatisées.
Ces spams peuvent encombrer les bases de données, dégrader les performances du site et nuire à l’expérience utilisateur. Sans une protection adéquate, vous risquez des pertes de données et une détérioration de la réputation de votre site.
Cet article présente des méthodes éprouvées pour protéger efficacement vos formulaires de contact contre les spams, comme l’utilisation de champs cachés, CAPTCHA, et la validation du référent HTTP.
Découvrir comment sécuriser les formulaires en PHP 8
Protéger un formulaire de contact contre les spams est une étape cruciale dans le développement web pour garantir la sécurité et l’intégrité des données que vous collectez. Les formulaires en ligne sont souvent la cible de robots automatisés qui envoient des messages non sollicités, ce qui peut entraîner une surcharge de votre boîte de réception et compromettre l’expérience utilisateur. Dans ce chapitre, vous allez découvrir différentes techniques pour sécuriser votre formulaire de contact contre les spams, tout en maintenant une interface utilisateur fluide et conviviale.
Méthode de Protection | Description |
|---|---|
Champs Cachés | Ajoutez des champs invisibles que les utilisateurs humains ne remplissent pas pour détecter les bots.
|
Validation et Nettoyage des Données | Validez et nettoyez les données côté serveur pour éviter les entrées malveillantes et garantir la conformité des données.
|
Protection par CAPTCHA | Intégrez un CAPTCHA pour vérifier que la soumission provient d’un utilisateur humain et non d’un bot.
|
Vérification du Référent HTTP | Utilisez $_SERVER[‘HTTP_REFERER’] pour s’assurer que le formulaire est soumis depuis la page correcte.
|
Mise en Place de Limites de Soumission | Implémentez des limites sur le nombre de soumissions dans un délai donné pour éviter les abus.
|
Créer le Code HTML de Formulaire de Contact en PHP 8
Avant de protéger votre formulaire de contact contre les spams, vous devez commencer par structurer correctement son code HTML. Un formulaire bien conçu permet non seulement de recueillir les informations nécessaires, mais aussi de faciliter l’ajout de mesures de sécurité. Dans cette section, vous allez créer le code HTML de base pour un formulaire de contact, en veillant à ce qu’il soit clair, accessible, et prêt pour l’intégration des mécanismes anti-spam.
On va créer un fichier index.php qui contient le code suivant
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nous contacteer</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-60135196-e632-4203-9bf4-3be42f36d52f: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-60135196-e632-4203-9bf4-3be42f36d52f: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"60135196-e632-4203-9bf4-3be42f36d52f","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div id="haut">
</div>
<div id="bas">
<section>
<h1>Nous contacteer</h1>
<form action="" method="post">
<div class="champ">
<label for="nom">Votre nom</label>
<input type="text" name="nom" id="nom" placeholder="Entrez votre nom">
</div>
<div class="champ">
<label for="email">Votre email</label>
<input type="email" name="email" id="email" placeholder="Entrez votre email">
</div>
<div class="champ">
<label for="message">Votre message</label>
<textarea name="message" id="message" ></textarea>
</div>
<input type="submit" value="Envoyer">
</form>
</section>
</div>
<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 de Contact avec CSS
Appliquer un Style au Fond d'Écran en PHP 8
Dans cette section, vous commencerez par mettre en place le style de la police et le design du formulaire. Voici le code pour le fichier 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;
height: 100vh;
margin: 0;
}
#haut{
background-color: #2c3e50;
height: 50vh;
}
#bas{
background-color: #8e44ad;
background-image: linear-gradient(to right, #8e44ad, #8e6b9C);
height: 50vh;
justify-content: center;
display: flex;
}
#bas section{
border: 1px solid rgba(255, 255, 255, 0.2);
width: 30%;
}
Styliser la Section du Formulaire en PHP 8
Dans cette section, vous allez mettre en forme le style de la police et le design du formulaire. Vous pourrez personnaliser l’apparence du formulaire en utilisant des styles CSS pour améliorer son esthétique et sa convivialité. Voici comment procéder :
#bas{
background-color: #8e44ad;
background-image: linear-gradient(to right, #8e44ad, #8e6b9C);
height: 50vh;
justify-content: center;
display: flex;
align-items: center;
}
#bas section{
border: 1px solid rgba(255, 255, 255, 0.2);
width: 30%;
margin-top: -30%;
padding: 30px 50px;
border-radius: 10px;
box-shadow: 6px 6px 12px rgba(19, 19, 19, 0.6);
background-color: rgba(255, 255, 255, 0.1);
text-align: center;
transition: 0.6s;
}
#bas section:hover{
box-shadow: none;
}
Concevoir l'Apparence du Formulaire de Contact en PHP 8
Maintenant, vous allez mettre en forme le formulaire de contact en ajoutant le code suivant :
#bas section:hover,#bas input[type="submit"]:hover{
box-shadow: none;
}
#bas input[type="submit"]{
background-color: #fff;
border: none;
padding: 15px 50px;
border-radius: 50px;
cursor: pointer;
box-shadow: 6px 6px 12px rgba(19, 19, 19, 0.6);
margin-top: 18px;
color: rgba(39,36,30);
font-size: 18px ;
transition: 0.6s;
}
Améliorer les Champs du Formulaire de Contact en PHP 8
Maintenant, vous allez mettre en forme les champs le formulaire de contact en ajoutant le code suivant :
#bas h1{
color: #c3a3cf;
font-size: 25px;
letter-spacing: 2px;
}
#bas .champ input ,#bas .champ textarea{
border: none;
background: none;
outline: none;
width: 100%;
color: #fff;
font-size: 16px;
}
#bas .champ{
margin: 10px 0;
border-bottom: 2px solid rgba(160, 65, 65);
padding: 15px ;
}
#bas .champ label{
text-align: left;
color: #fff;
font-size: 14px;
display: block;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
}
#bas ::placeholder{
color: #777
}
Résultat du Style Appliqué en PHP 8
Après avoir appliqué le style précédemment mentionné, le résultat est le suivant :
Configurer le Fichier de Traitement PHP 8 pour le Formulaire
Dans cette section, vous allez mettre en place le fichier traitement.php. Vous devez créer ce fichier et y ajouter le code suivant :
- Code de fichier traitement.php
<!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">.rll-youtube-player .play{--wpr-bg-60135196-e632-4203-9bf4-3be42f36d52f: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-60135196-e632-4203-9bf4-3be42f36d52f: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"60135196-e632-4203-9bf4-3be42f36d52f","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div id="haut">
</div>
<div id="bas">
<section>
<?php
if(!empty($_POST['nom']) && !empty($_POST['email'])&& !empty($_POST['message'])){
?>
<h1>Formulaire envoyé avec succes</h1>
<?php
}else{
?>
<h1>Erreur de traitement</h1>
<?php
}
?>
</section>
</div>
</body>
</html>
- Résultat affiché :
Cas les champs sont vide :
Sinon il s’affiche :
Créer et Gérer la Base de Données en PHP 8
Pour assurer le bon fonctionnement de votre application, il est crucial de créer une base de données pour stocker les informations. Dans cette section, vous allez créer une base de données nommée alphorm et définir une table message avec les colonnes suivantes : messageID, nom, email et message.
Voila affiche de résultat de table base de données message dans PhpMyAdmin
- Résultat final
Implémenter la Classe PDO en PHP 8 pour la Base de Données
Dans cette section, vous allez créer un dossier nommé cnx, qui contiendra un fichier de connexion. Vous y mettrez le code suivant pour établir la connexion à la base de données :
- Code de fichier cnx.php
<?php
$dsn='mysql:host=localhost;dbname=alphorm,charset=utf8';
$user='root';
$pass='';
try{
$cnx=new PDO($dsn,$user,$pass);
}catch(PDOException $e){
echo 'error de connexion'.$e->getMessage();
}
Maîtrise Complète de PHP 8 : De l'Initiation à l'Expertise en Architecture MVC
Insérer des Données du Formulaire dans la Base de Données
Dans cette section, vous allez insérer des données dans la table de la base de données. Tout d’abord, vous devez importer le fichier cnx.php dans le fichier traitement.php en ajoutant la ligne suivante :
<?php
include('cnx/cnx.php');
?>
Après avoir importé le fichier cnx.php, vous allez mettre en place le script PHP qui permet de gérer l’insertion des données. Ajoutez le code suivant à votre fichier traitement.php :
<section>
<?php
if(!empty($_POST['nom']) && !empty($_POST['email'])&& !empty($_POST['message'])){
$sql = "INSERT INTO message (nom, email, message) VALUES (:nom, :email, :message)";
$req = $cnx->prepare($sql);
$req->execute(array(
'nom' => $_POST['nom'],
'email' => $_POST['email'],
'message' => $_POST['message']
));
?>
<h1>Formulaire envoyé avec succes</h1>
<?php
}else{
?>
<h1>Erreur de traitement</h1>
<?php
}
?>
</section>
- Insertion des données
- Résultat d’affichage
Pour vérifier que les données ont été correctement insérées dans la table message
Simuler des Attaques de Spam sur le Formulaire de Contact
Spammer le formulaire de contact » fait référence à une action malveillante où vous recevez des soumissions répétées et non sollicitées via un formulaire de contact, souvent générées automatiquement par des bots. Ces attaques ont pour but de remplir votre boîte de réception avec des messages indésirables, ce qui peut causer des désagréments, surcharger les serveurs, ou même compromettre la sécurité de votre site. Si vous constatez que les données de votre formulaire sont bien enregistrées, mais que vous êtes confronté à ce type de problème
En testant une attaque avec Postman, en entrant des valeurs telles que nom = spam, email = spam@gmail.com et message = spam, vous pourrez vérifier si notre formulaire est sécurisé et si l’attaque est correctement gérée.
Techniques pour Protéger un Formulaire de Contact Contre le Spam
Pour protéger votre formulaire contre les spams, vous pouvez ajouter un champ caché dans le fichier index.php avec la ligne suivante :
<input type="hidden" name="proteger" id="">
Ce champ caché (honeypot) sera invisible pour les utilisateurs légitimes, mais les bots qui remplissent tous les champs du formulaire pourraient le renseigner. Ensuite, dans le script PHP de traitement, vous allez ajouter une condition pour vérifier que le champ proteger est bien vide avant de traiter les données. Voici comment procéder :
Dans votre fichier de traitement PHP, ajoutez le code suivant à la condition if
empty($_POST['proteger'])
Cela permet de s’assurer que si le champ caché proteger est rempli, la soumission sera ignorée, ce qui protège votre formulaire contre les soumissions automatisées de bots.
Test de Sécurité: Nouvelle Tentative de Spam
Dans cette section, nous allons simuler une attaque sur notre formulaire de contact en utilisant Postman pour soumettre des informations. Nous testerons si les mesures de protection mises en place fonctionnent correctement en vérifiant que les utilisateurs malveillants ne peuvent pas insérer des données. Si une soumission malveillante est détectée, une erreur devrait être retournée, et nous afficherons les résultats de ce test.
- Résultat de l’affichage du test dans Postman
Renforcer la Sécurité du Formulaire de Contact en PHP 8
Pour renforcer la protection de votre formulaire, vous pouvez ajouter une condition supplémentaire dans le script de traitement PHP (traitement.php) afin de vérifier si le bouton d’envoi a été cliqué, et que les champs nécessaires ne sont pas vides, tout en s’assurant que le champ caché proteger est vide. Voici comment vous pouvez modifier votre fichier traitement.php :
if(isset($_POST['envoyer']) && !empty($_POST['nom']) && !empty($_POST['email'])&& !empty($_POST['message']) && empty($_POST['proteger'])){
- isset($_POST[‘envoyer’]) : Vérifie que le bouton d’envoi a bien été cliqué.
Cette condition garantit que seules les soumissions valides, effectuées par des utilisateurs humains, seront traitées.
Validation de la Sécurité: Encore Tester le Spam
Dans cette section, vous allez effectuer un nouveau test en spammer le formulaire de contact. En entrant des données de test répétitives, telles que des informations de spam, vous pourrez vérifier si le formulaire est correctement sécurisé contre les tentatives de spam. Vous devrez observer si les données sont enregistrées correctement malgré l’envoi de ces informations non sollicitées. Cela permettra de confirmer que les mécanismes de protection mis en place fonctionnent comme prévu et que le formulaire est capable de gérer des soumissions malveillantes de manière efficace.
- Résultat de l’affichage du test dans Postman
Si on voit dans la base de données en trouve qu’attaque est enregistré
Méthodes Avancées pour Sécuriser un Formulaire PHP 8
Pour protéger efficacement un formulaire de contact contre les spams et les soumissions malveillantes, il est essentiel de combiner plusieurs techniques de sécurité. Voici un guide complet pour renforcer la protection de votre formulaire, en utilisant également $_SERVER['HTTP_REFERER'] pour vérifier la provenance des soumissions
- Code Complet pour traitement.php
<?php
include('cnx/cnx.php');
?>
<!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">.rll-youtube-player .play{--wpr-bg-60135196-e632-4203-9bf4-3be42f36d52f: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-60135196-e632-4203-9bf4-3be42f36d52f: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"60135196-e632-4203-9bf4-3be42f36d52f","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div id="haut">
</div>
<div id="bas">
<section>
<?=$_SERVER['HTTP_REFERER'];?>
<?php
if(!isset($_SERVER['HTTP_REFERER'])){
$_SERVER['HTTP_REFERER']="";
}
if($_SERVER['HTTP_REFERER']=='http://localhost/alphorm/index.php' && isset($_POST['envoyer']) && !empty($_POST['nom']) && !empty($_POST['email'])&& !empty($_POST['message']) && empty($_POST['proteger'])){
$sql = "INSERT INTO message (nom, email, message) VALUES (:nom, :email, :message)";
$req = $cnx->prepare($sql);
$req->execute(array(
'nom' => $_POST['nom'],
'email' => $_POST['email'],
'message' => $_POST['message']
));
?>
<h1>Formulaire envoyé avec succes</h1>
<?php
}else{
?>
<h1>Erreur de traitement</h1>
<?php
}
?>
</section>
</div>
</body>
</html>
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
Sécuriser un formulaire PHP 8 contre les spams et les soumissions malveillantes est essentiel pour protéger les données utilisateur et maintenir la performance de votre site web. En combinant différentes techniques :
- Utilisation de Champs Cachés : Ajoutez des champs cachés que les utilisateurs humains ne remplissent pas. Si ces champs sont remplis, il est probable qu’un bot envoie les données.
- Validation et Nettoyage des Données : Validez et nettoyez les données côté serveur pour éviter les entrées malveillantes et garantir qu’elles respectent le format attendu.
- Protection par CAPTCHA : Intégrez un CAPTCHA pour vérifier que la soumission est effectuée par un humain et non par un bot automatisé.
- Vérification du Référent HTTP : Utilisez $_SERVER[‘HTTP_REFERER’] pour vérifier que le formulaire est soumis depuis la page correcte, réduisant ainsi les soumissions frauduleuses.
- Mise en Place de Limites de Soumission : Implémentez des limites sur le nombre de soumissions possibles dans un certain délai pour prévenir les abus.
