Comment protéger votre site web contre les pourriels avec Google ReCAPTCHA V3 ou V2 [PHP + Extension WordPress]
À travers cet article, nous allons voir comment utiliser Google reCAPTCHA V3 et V2 pour protéger un site web contre les pourriels. Le but de notre article sera de voir comment ajouter un captcha sur un formulaire. Nous allons également voir comment le Captcha V3 fonctionne. Enfin, nous allons discuter des types de captcha et de pourquoi V3 est préférable aux autres versions.
Prérequis pour la version tutoriel de l’article
- Pour tout le monde – Si vous êtes un lecteur curieux, vous pouvez lire cet article pour avoir des connaissances générales. Nous avons une extension gratuite disponible pour les sites web WordPress que vous pouvez télécharger sous wordpress.org
- Une option pour les développeurs – Cependant, si vous êtes développeur et aimerez appliquer nos conseils sur votre projet, vous devez avoir les
Un développeur aura besoin de:
- Connaissances de base en HTML.
- Quelques notions en PHP.
- Connaitre JavaScript pourrait être un plus.
Protéger votre site web contre les pourriels avec Google reCAPTCHA V3 en seulement 3 étapes
Pour être en mesure de protéger votre site web avec Google reCAPTCHA V3, vous n’avez que peu d’étapes à suivre. Nous allons dans cette partie voir les différentes étapes à suivre.
Étape 1 – Enregistrement de son site web sur la plateforme Google reCAPTCHA
Pour être capable d’utiliser le Google reCAPTCHA V3, vous devez avant tout enregistrer votre site sur la plateforme Google reCAPTCHA. Veuillez noter que pour enregistrer un site, il devrait être publié sur le net. Voici les étapes à suivre :
- Visitez le site Google reCAPTCHA – et cliquez sur console admin. Le site va vous rediriger vers la page de connexion.
- Si vous avez un compte Gmail ou G-Suite, vous devez vous connecter pour accéder au panneau de gestion des Captchas. Dans le cas contrairement, vous devez créer un compte Gmail.
- Cliquez sur le plus dans le coin haut-droit du panneau d’administrateur et un formulaire d’enregistrement de site web apparaitra.
- Via ce formulaire, vous devez inscrire le libellé de votre site, le type de reCAPTCHA et les noms de domaine (
- Après avoir sauvegardé le formulaire, la plateforme va générer une clé du site et une clé secrète. Copiez les clés pour les étapes suivantes.
Étape 2 – Ajout des paramètres sur le formulaire et gestion des données côté client.
Nous allons utiliser un formulaire de contacts HTML pour illustration. Veuillez noter que vous pourriez être en mesure d’ajouter le catcha sur n’importe quelque type de formulaire.
Ajout de champs caché sur le formulaire de contacts
Sur notre formulaire de contact HTML, nous allons ajouter un champ caché appelé « reponsecaptcha ». Ce champ a pour but de détecter si l’utilisateur est un humain ou robot.
Voici à quoi pourrait ressembler le code du formulaire initial.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Envoyer un message</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Send an SMS</h2>
<form action="envoyer.php" method="POST">
<div class="form-group">
<label for="email">Nom et Prénom</label>
<input type="tel" class="form-control" placeholder="Nom et Prénom" name="firstlastname">
</div>
<div class="form-group">
<label for="pwd">Email</label>
<input type="email" class="form-control" placeholder="Adresse Courriel" name="youremail">
</div>
<div class="form-group">
<label>
Votre Message
</label>
<textarea class="form-control" placeholder="your message" name="yourmessage"></textarea>
</div>
<button type="submit" class="btn btn-primary form-control">Envoyer le message</button>
</form>
</div>
</body>
</html>
Code 1 – Code initial sans le champs de captcha
Après ajout du champ caché et des autres paramètres, on aura un formulaire semblable à celui ci-dessous
<!DOCTYPE html>
<html lang="en">
<head>
<title>Envoyer un message</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Send an SMS</h2>
<form action="envoyer.php" method="POST">
<div class="form-group">
<label for="email">Nom et Prénom</label>
<input type="tel" class="form-control" placeholder="Nom et Prénom" name="firstlastname">
</div>
<div class="form-group">
<label for="pwd">Email</label>
<input type="email" class="form-control" placeholder="Adresse Courriel" name="youremail">
</div>
<div class="form-group">
<label>
Votre Message
</label>
<textarea class="form-control" placeholder="your message" name="yourmessage"></textarea>
</div>
<input type="hidden" name="reponsecaptcha" id="recaptcha">
<button type="submit" class="btn btn-primary form-control" name="envoie">Envoyer le message</button>
</form>
</div>
<script src="https://www.google.com/recaptcha/api.js?render=LA_CLE_DE_VOTRE_SITE"></script>
<script>
grecaptcha.ready(function () {
grecaptcha.execute('LA_CLE_DE_VOTRE_SITE', { action: 'contact' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptcha');
recaptchaResponse.value = token;
});
});
</script>
</body>
</html>
Code 2 – Code final avec le champs de captcha v3
Commentaires du code
- Dans l’éventualité où vous prêtez attention au Code 1 et Code 2, vous allez vous rendre compte que nous avons ajouté un champ caché à la ligne 28 du code 2. Nous avons également ajouté du code JavaScript depuis la ligne 33.
- Pour activer le reCAPTCHA V3 sur votre site, vous devez remplacer LA_CLE_DE_VOTRE_SITE par la clé obtenue à l’étape 1.
- Sur la ligne 36, vous allez remarquer un paramètre appelé « action : ». Vous pouvez faire varier ce paramètre au regard de vos objectifs. L’action correspond au nom de l’action que vous aimerez effectuer. Pour en savoir plus sur les différentes options qui s’offrent à vous, veuillez-vous référer à la documentation pour les différentes options.
Si vous avez été en mesure de suivre les consignes, vous devez voir apparaître sur votre site l’icône de Google reCAPTCHA V3 dans le coin droit et en bas de votre site. Cela signifie tout simplement que le captcha est activé ; mais pas encore fonctionnel. Nous regardons à l’étape suivante comment gérer l’envoie des informations.
Étape 3 – Gestion des informations côté serveur
Gérer les données côté serveur consistera tout simplement à :
- récupérer les informations envoyées par l’utilisateur,
- vérifier si son score est dessus de la moyenne (généralement 0.5)
- Bloquer l’envoie du message lorsqu’il parait suspect.
Création du fichier de réception des données — envoyer.php
Nous allons créer un fichier PHP qui nous permettra de récupérer les données soumises par l’utilisateur. Le fichier pourrait avoir des informations semblables aux données ci-dessous :
<?php // Vérifier si le formulaire a été soumis
if(isset($_POST['envoie']) && isset($_POST['reponsecaptcha'])) {
// Connecter à Google avec les clés
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'VOTRE_CLE_SECRETE';
$recaptcha_response = $_POST['reponsecaptcha'];
// Décoder les informations récupérées
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
// Effectuer une action en fonction du score obtenu.
if ($recaptcha->score >= 0.5) {
// Envoyer le couriel
} else {
// Vous n'avez pas vérifier si l'utilisateur est un humain ou un robot. Affichez le message d'erreur.
}
} ?>
Remarque
Veuillez noter que le code PHP fait appel à la fonction file_get_contents qui n’est pas forcément supporté par tous les serveurs pour des raisons de sécurité ou tout autres raisons. Dans ce cas, une alternative pourrait être CURL qui est fortement recommandé. En remplaçant file_get_contents par CURL, le code ci-dessus deviendra :
<?php // Vérifier si le formulaire a été soumis
if(isset($_POST['envoie']) && isset($_POST['reponsecaptcha'])) {
// Connecter à Google avec les clés
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'VOTRE_CLE_SECRETE';
$recaptcha_response = $_POST['reponsecaptcha'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$recaptcha_url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => $recaptcha_secret, 'response' => $recaptcha_response)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$capcharespo = curl_exec($ch);
curl_close($ch);
$Reponse = json_decode($capcharespo, true);
// Effectuer une action en fonction du score obtenu.
if ($Reponse['score'] >= 0.5) {
// Envoyer le couriel
} else {
// Vous n'avez pas vérifier si l'utilisateur est un humain ou un robot. Afficher le message d'erreur.
}
} ?>
Autres alternatives – utilisation de Google reCAPTCHA V2
La version 2 propose une case à coché pour valider si un utilisateur est un robot ou physiquement présent sur votre site web. Dans l’éventualité où vous préférez la version 2, Voici la procédure simple à suivre:
- Enregistrez votre site web
- Ajout des paramètres sur le formulaire et gestion des données côté client.
- Gestion des informations côté serveur
La principale différence entre Google reCAPTCHA V2 et V3 est au niveau de l’approche. En effet, le reCAPTCHA V2, effectue un test avec des images à identifier et la version 3 se sert d’un score.
Dans ce qui suit, nous allons voir les ajustements dans le code pour la version 2.
Ajouter un champ HTML contenant la clé publique dans votre formulaire HTML
Dans les lignes de code ci-dessous, nous illustrons à quoi devrait ressembler votre code. Il est important de remarquer la ligne avec le code ci-dessous.
<div class="g-recaptcha" data-sitekey="VOTRE_CLE_PUBLIC"></div>
Votre code final devrait ressembler à ceci :
Ensuite inclure le JavaScript de Google qui se chargera des validations.
Remarque: Nous ne sommes plus revenus sur l’enregistrement du site ou la création des clés. Pour inclure vos clés du reCAPTCHA V2, vous devez sélectionner la version 2 lors de la création des clés.
Gestion des données côté serveur
Il n’y a pas une différence majeure dans la façon de gérer la version 2 et 3. Pour la version 3, vous devez définir un score acceptable pour votre site web. Par contre, pour la version 2, s’il y a échec, l’information retournée sera vide.
Une comparaison entre le reCAPTCHA V2 et V3
La reCAPTCHA v3, est la dernière version suggérée par Google pour assister dans la protection de sites web contre les courriels indésirables. Comme différence en comparaison à la version « Je ne suis pas un robot », il n’ajoute pas un champ supplémentaire sur le formulaire. Par conséquent, cela a pour effet de réduire la perte du nombre de clients qui pourraient ne pas réussir les tests. La version « Je ne suis pas un robot » (V2) peut parfois être frustrant si le visiteur ne parvient pas à résoudre l’énigme pour une raison quelconque.
Par ailleurs, pour une cause quelconque, la version 3 peut se tromper dans l’évaluation du score. Dans le cas où cela devrait arriver, quelqu’un de vos visiteurs pourraient avoir de la difficulté à utiliser votre solution.
Comment protéger les formulaires de commentaires contre le pourriel (fonctionnalités intégrées et reCAPTCHA)
Vous pouvez utiliser les fonctionnalités WordPress par défaut pour protéger les formulaires de commentaires WordPress contre le pourriel. De plus, si vous combinez cela avec des reCAPTCHA, vous aurez l’esprit tranquille dans la gestion de votre blog. En effet, une mauvaise configuration de la section des commentaires de votre site Web peut être la cause de plusieurs failles de sécurité. Cet article examine comment configurer parfaitement le formulaire de commentaires dans WordPress. Nous allons également suivre des étapes simples pour ajouter un reCAPTCHA afin d’éviter les pourriels. Je vous remercie d’avoir lu notre article, e. Si à la fin, vous avez des questions ou des commentaires, nous aimerions entendre votre avis. Laissez-nous un message au bas du message. Vous pouvez aussi nous envoyer un email via le formulaire de contact .
Protégez votre site Web avec les fonctionnalités de WordPress.
WordPress a quelques options que vous pouvez utiliser pour mieux protéger vos sites Web. En effet, dans la section configuration, il y a des options que vous pouvez paramétrer en quelques clics. Nous en examinons quelques-uns dans ce qui suit. Cette configuration se fera dans l’onglet Paramètres ⇒ Discussion . Veuillez faire les configurations nécessaires pour mieux améliorer la sécurité de votre site web. Effectivement, une mauvaise configuration peut affecter le mode de fonctionnement de votre site web. En plus, un site web qui ne filtre pas les types de messages est une porte d’entrée des pirates informatiques et des pourriels.
Les options de discussion sous l’onglet Paramètres de WordPress vous permettent de personnaliser la façon dont les commentaires sont sur votre site Web.
Notifiez tous les blogs liés à l’article
Lorsque vous avez coché cette option, cela permettra à votre blog ou site Web d’envoyer un ping au site Web que vous avez marqué dans les commentaires. Si le site Web renvoie un ping, le site Web sera visible dans le commentaire dans lequel le site Web a été tagué. Veuillez noter que plus de site Web balisés entraîneront plus de demandes sur les pings et peuvent ralentir le site Web. Vous devez par conséquent l’utiliser avec précaution.
Autoriser les notifications de liens d’autres blogs (pingbacks et trackbacks) sur les nouveaux messages
Cette option fonctionnera côte à côte avec les notifications sur les blogs (option 1), où tous les pings reçus de sites Web marqués seront affichés dans la section des commentaires. En effet, si vous activez la notification de tous les blogs qui sont liés à vos articles, vous pouvez également recevoir un message en retour. Cela vous permettra, par exemple, d’avoir un message retour si une personne parle aussi de votre article.
Autoriser les utilisateurs à soumettre des commentaires sur les nouvelles publications
Quand vous cochez cette case, vous autorisez aux utilisateurs et à d’autres de publier ou de soumettre des commentaires sur vos publications. Par conséquent, un formulaire de commentaire apparaitra en bas des articles de votre site web. Un formulaire que les visiteurs pourront utiliser pour laisser leur avis.
L’auteur du commentaire doit remplir son nom et son adresse e-mail
Vous pouvez activer cette option si vous ne souhaitez pas que les commentaires soient anonymes et désirez que les personnes soumettent leur nom et leur adresse e-mail pour publier des commentaires.
Les utilisateurs doivent être enregistrés et connectés avant de publier un commentaire
Si vous cochez la case, tous les utilisateurs doivent être enregistrés pour publier un commentaire. En effet, Si vous désirez limiter les pourriels, vous pouvez, par exemple, n’accorder la publication des commentaires qu’aux personnes qui ont un compte.
Fermer automatiquement les commentaires sur les articles datant de plus de [X] jours
Vous devez cocher cette case, si vous ne voulez pas qu’aucun utilisateur publie des commentaires après des jours spécifiques où la publication a été publiée.
Afficher la case à cocher d’activation des cookies de commentaires, permettant aux cookies d’auteur de commentaires d’être. Positionner
Comme l’option le suggère, cette option, lorsque vous la cochez, laisse converser les cookies contenant des informations sur l’auteur quand il soumettra des commentaires.
Activer les commentaires filetés (imbriqués) [X] niveaux de profondeur
Cette option autorise aux utilisateurs de répondre aux commentaires, en créant des commentaires imbriqués à un niveau spécifique fourni dans l’option.
Divisez les commentaires en pages avec [X] commentaires de niveau supérieur par page et la [dernière/première] page affichée par défaut. Les commentaires doivent être affichés avec les commentaires [anciens/plus récents] en haut de chaque page
S’il y a toujours plusieurs commentaires sur votre publication et couvre toute la page, cette option vous aidera à diwordsments dans les pages sur lesquels les utilisateurs et aller, et venir sur les pages de commentaires pour les afficher.
Envoyez-moi un e-mail : envoyez-moi un e-mail chaque fois qu’une personne publie un commentaire
Cette option doit être cochée si vous souhaitez recevoir un e-mail chaque fois qu’une personne publie un commentaire sur votre message.
Envoyez-moi un e-mail chaque fois qu’un commentaire est soumis à modération
Lorsque cette option est cochée, vous recevrez un e-mail chaque fois qu’un commentaire est soumis à modération. Il peut être utilisé quand vous avez plus d’un auteur sur votre site Web.
Avant qu’un commentaire n’apparaisse : le commentaire doit être approuvé manuellement
Cette option peut être cochée si vous souhaitez manuellement approuver chaque commentaire sur vos publications.
Avant qu’un commentaire n’apparaisse : l’auteur du commentaire doit avoir un commentaire préalablement approuvé
Celle-ci n’affichera que les commentaires des utilisateurs que vous avez préalablement approuvés.
Modération des commentaires : conservez un commentaire dans la file d’attente s’il contient [X] liens ou plus (une caractéristique commune du pourriel de commentaires est la présence de nombreux hyperliens.)
Cela retiendra automatiquement le commentaire pour modération s’il ne trouve plus que le lien hypertexte autorisé dans les commentaires. Cette option peut être utilisée pour éloigner les commentaires de pourriel de la publication.
Clés de commentaire non autorisées : lorsqu’un commentaire contient l’un de ces mots dans son contenu, le nom de l’auteur, l’URL, l’adresse e-mail, l’adresse IP ou la chaîne de l’agent utilisateur du navigateur, il sera marqué comme pourriel. Un mot ou IP par ligne. Il correspondra aux mots intérieurs, donc « presse » correspondra à « WordPress».
Vous devez utiliser ce formulaire lorsque vous souhaitez exclure certains mots ou paraphrases de votre section de commentaires.
Avatar : affichage de l’avatar
Cochez cette case si vous désirez que l’avatar de l’utilisateur soit visible dans la section des commentaires.
Avatar : note maximale
Cette dernière vous permet de sélectionner la note des avatars des utilisateurs de :
- G — Convient à tous les publics.
- PG — Peut-être offensant généralement pour les publics de 13 ans et plus.
- R — Destiné aux publics adultes de plus de 17 ans à
- X — Encore plus mature que ci-dessus.
Avatar : Avatar par défaut
Vous devez utiliser Avatar par défaut si vous souhaitez modifier ou sélectionner le type d’avatar. C’est particulièrement utile si vous voulez attribuer un avatar par défaut aux utilisateurs qui commentent sur votre site web. Pour les utilisateurs sans avatar personnalisé, vous pouvez afficher un logo générique ou un logo généré en fonction de leur adresse e-mail.
