De nos jours, les CAPTCHA font partie intégrante de la sécurité des sites Web. Des millions de tests CAPTCHA sont effectués en ligne chaque jour.

Si vous n'avez pas implémenté la validation CAPTCHA sur votre site Web, cela pourrait créer un gros problème pour vous, vous définissant en tant que cible des spammeurs.

Voici tout ce que vous devez savoir sur les CAPTCHA et comment vous pouvez facilement les implémenter sur votre site Web en utilisant HTML, CSS et JavaScript.

Qu'est-ce que CAPTCHA?

CAPTCHA signifie «test de Turing public complètement automatisé pour distinguer les ordinateurs et les humains». Ce terme a été inventé en 2003 par Luis von Ahn, Manuel Blum, Nicholas J. Hopper et John Langford. C'est un type de test défi-réponse qui est utilisé pour déterminer si l'utilisateur est humain ou non.

Les CAPTCHA renforcent la sécurité des sites Web en offrant des défis difficiles à réaliser pour les robots mais relativement faciles pour les humains. Par exemple, identifier toutes les images d'une voiture à partir d'un ensemble d'images multiples est difficile pour les robots mais assez simple pour les yeux humains.

L'idée de CAPTCHA provient du test de Turing. Un test de Turing est une méthode pour tester si une machine peut penser comme un humain ou non. Fait intéressant, un test CAPTCHA peut être appelé un «test de Turing inversé» car dans ce cas, l'ordinateur crée le test qui défie les humains.

Pourquoi votre site Web a-t-il besoin d'une validation CAPTCHA?

Les CAPTCHA sont principalement utilisés pour empêcher les robots de soumettre automatiquement des formulaires contenant du spam et d'autres contenus nuisibles. Même des entreprises comme Google l'utilisent pour empêcher leur système d'attaques de spam. Voici quelques-unes des raisons pour lesquelles votre site Web devrait bénéficier de la validation CAPTCHA:

• Les CAPTCHA aident à empêcher les pirates et les robots de spammer les systèmes d'enregistrement en créant de faux comptes. S'ils ne sont pas empêchés, ils peuvent utiliser ces comptes à des fins néfastes.
• Les CAPTCHA peuvent interdire les attaques de connexion par force brute à partir de votre site Web que les pirates utilisent pour essayer de se connecter à l'aide de milliers de mots de passe.
• Les CAPTCHA peuvent empêcher les robots de spammer la section de révision en fournissant de faux commentaires.
• Les CAPTCHA aident à prévenir l'inflation des billets, car certaines personnes achètent un grand nombre de billets pour les revendre. CAPTCHA peut même empêcher les fausses inscriptions à des événements gratuits.
• Les CAPTCHA peuvent empêcher les cyber-escrocs de spammer les blogs avec des commentaires douteux et des liens vers des sites Web nuisibles.

Il existe de nombreuses autres raisons qui soutiennent l'intégration de la validation CAPTCHA dans votre site Web. Vous pouvez le faire avec le code suivant.

Code HTML CAPTCHA

HTML, ou HyperText Markup Language, décrit la structure d'une page Web. Utilisez le code HTML suivant pour structurer votre formulaire de validation CAPTCHA:

Validateur Captcha utilisant HTML, CSS et JavaScript



texte captcha




Rafraîchir

Ce code se compose principalement de 7 éléments:

• : Cet élément permet d'afficher l'en-tête du formulaire CAPTCHA.
• : Cet élément est utilisé pour afficher le texte CAPTCHA.
• - Cet élément est utilisé pour créer une zone de saisie pour saisir le CAPTCHA.
• : Ce bouton soumet le formulaire et vérifie si le CAPTCHA et le texte tapé sont identiques ou non.
• : Ce bouton permet d'actualiser le CAPTCHA.
• : Cet élément permet d'afficher la sortie en fonction du texte saisi.
• : Il s'agit de l'élément parent qui contient tous les autres éléments.

Les fichiers CSS et JavaScript sont liés à cette page HTML via le et éléments respectivement. Vous devez ajouter le relier étiquette à l'intérieur du diriger tag et scénario balise à la fin du corps.

Vous pouvez également intégrer ce code aux formulaires existants de votre site Web.

En rapport: Aide-mémoire HTML Essentials: balises, attributs, etc.

Code CSS CAPTCHA

CSS, ou feuilles de style en cascade, est utilisé pour styliser les éléments HTML. Utilisez le code CSS suivant pour styliser les éléments HTML ci-dessus:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
corps {
couleur d'arrière-plan: # 232331;
famille de polices: 'Roboto', sans-serif;
}
#captchaBackground {
hauteur: 200px;
largeur: 250 px;
couleur d'arrière-plan: # 2d3748;
affichage: flex;
align-items: centre;
justify-content: centre;
flex-direction: colonne;
}
#captchaHeading {
Couleur blanche;
}
#captcha {
marge inférieure: 1em;
taille de la police: 30px;
espacement des lettres: 3px;
couleur: # 08e5ff;
}
.centre {
affichage: flex;
flex-direction: colonne;
align-items: centre;
}
#bouton de soumission {
margin-top: 2em;
marge inférieure: 2em;
couleur d'arrière-plan: # 08e5ff;
bordure: 0px;
poids de la police: gras;
}
#refreshButton {
couleur d'arrière-plan: # 08e5ff;
bordure: 0px;
poids de la police: gras;
}
#zone de texte {
hauteur: 25px;
}
.Captcha incorrecte {
couleur: # FF0000;
}
.correctCaptcha {
couleur: # 7FFF00;
}

Ajoutez ou supprimez des propriétés CSS de ce code selon vos préférences. Vous pouvez également donner un aspect élégant au conteneur de formulaire en utilisant le Propriété CSS box-shadow.

Code CAPTCHA JavaScript

JavaScript est utilisé pour ajouter des fonctionnalités à une page Web autrement statique. Utilisez le code suivant pour ajouter des fonctionnalités complètes au formulaire de validation CAPTCHA:

// document.querySelector () est utilisé pour sélectionner un élément du document en utilisant son ID
let captchaText = document.querySelector ('# captcha');
let userText = document.querySelector ('# textBox');
laissez submitButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# sortie');
laissez refreshButton = document.querySelector ('# refreshButton');
// alphaNums contient les caractères avec lesquels vous souhaitez créer le CAPTCHA
soit alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L ',' M ',' N ',' O ',' P ',' Q ',' R ',' S ',' T ',' U ',' V ',' W ',' X ', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', ​​'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p ',' q ',' r ',' s ',' t ',' u ',' v ',' w ',' x ',' y ',' z ',' 0 ',' 1 ', «2», «3», «4», «5», «6», «7», «8», '9'];
laissez emptyArr = [];
// Cette boucle génère une chaîne aléatoire de 7 caractères en utilisant alphaNums
// De plus, cette chaîne est affichée sous forme de CAPTCHA
pour (soit i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Cet écouteur d'événements est stimulé chaque fois que l'utilisateur appuie sur le bouton "Entrée"
// "Corriger!" ou le message "Incorrect, veuillez réessayer" est
// affiché après validation du texte de saisie avec CAPTCHA
userText.addEventListener ('keyup', function (e) {
// La valeur du code clé du bouton "Entrée" est 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Correct!";
} autre {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Incorrect, veuillez réessayer";
}
}
});
// Cet écouteur d'événements est stimulé chaque fois que l'utilisateur clique sur le bouton «Soumettre»
// "Corriger!" ou le message "Incorrect, veuillez réessayer" est
// affiché après validation du texte de saisie avec CAPTCHA
submitButton.addEventListener ('clic', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Correct!";
} autre {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Incorrect, veuillez réessayer";
}
});
// Cet écouteur d'événements est stimulé chaque fois que l'utilisateur appuie sur le bouton "Actualiser"
// Un nouveau CAPTCHA aléatoire est généré et affiché après que l'utilisateur clique sur le bouton "Actualiser"
refreshButton.addEventListener ('clic', function () {
userText.value = "";
laissez refreshArr = [];
pour (soit j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Vous avez maintenant un formulaire de validation CAPTCHA entièrement fonctionnel! Si vous souhaitez consulter le code complet, vous pouvez cloner le Dépôt GitHub de ce projet CAPTCHA-Validator. Après avoir cloné le référentiel, exécutez le fichier HTML et vous obtiendrez la sortie suivante:

Lorsque vous entrez le bon code CAPTCHA dans la zone de saisie, la sortie suivante s'affiche:

Lorsque vous entrez un code CAPTCHA incorrect dans la zone de saisie, la sortie suivante s'affiche:

Sécurisez votre site Web avec les CAPTCHA

Dans le passé, de nombreuses organisations et entreprises ont subi de lourdes pertes telles que des violations de données, des attaques de spam, etc. en raison de l'absence de formulaires CAPTCHA sur leurs sites Web. Il est fortement recommandé d'ajouter CAPTCHA à votre site Web, car il ajoute une couche de sécurité pour empêcher le site Web des cybercriminels.

Google a également lancé un service gratuit appelé "reCAPTCHA" qui aide à protéger les sites Web contre le spam et les abus. CAPTCHA et reCAPTCHA semblent similaires, mais ce n'est pas tout à fait la même chose. Parfois, les CAPTCHA sont frustrants et difficiles à comprendre pour de nombreux utilisateurs. Cependant, il y a une raison importante pour laquelle ils sont rendus difficiles.

Comment fonctionnent les CAPTCHA et pourquoi sont-ils si difficiles?

Les CAPTCHA et reCAPTCHA empêchent le spam. Comment travaillent-ils? Et pourquoi trouvez-vous les CAPTCHA si difficiles à résoudre?

Lire la suite

A propos de l'auteur