CAPTCHA's zijn tegenwoordig een integraal onderdeel van websitebeveiliging. Miljoenen CAPTCHA-tests worden elke dag online voltooid.

Als u CAPTCHA-validatie niet op uw website heeft geïmplementeerd, kan dit een groot probleem voor u opleveren, waardoor u een doelwit voor spammers wordt.

Hier is alles wat u moet weten over CAPTCHA's en hoe u deze eenvoudig op uw website kunt implementeren met HTML, CSS en JavaScript.

Wat is CAPTCHA?

CAPTCHA staat voor "Volledig geautomatiseerde openbare Turing-test om computers en mensen uit elkaar te houden." Deze term werd in 2003 bedacht door Luis von Ahn, Manuel Blum, Nicholas J. Hopper en John Langford. Het is een soort challenge-response-test die wordt gebruikt om te bepalen of de gebruiker een mens is of niet.

CAPTCHA's voegen beveiliging toe aan websites door uitdagingen te bieden die moeilijk uit te voeren zijn voor bots, maar relatief eenvoudig voor mensen. Het identificeren van alle afbeeldingen van een auto uit een reeks van meerdere afbeeldingen is bijvoorbeeld moeilijk voor bots, maar eenvoudig genoeg voor menselijke ogen.

Het idee van CAPTCHA komt voort uit de Turing Test. Een Turing-test is een methode om te testen of een machine kan denken als een mens of niet. Interessant is dat een CAPTCHA-test een "omgekeerde Turing-test" kan worden genoemd, aangezien in dit geval de computer de test maakt die mensen uitdaagt.

Waarom heeft uw website CAPTCHA-validatie nodig?

CAPTCHA's worden voornamelijk gebruikt om te voorkomen dat bots automatisch formulieren met spam en andere schadelijke inhoud indienen. Zelfs bedrijven zoals Google gebruiken het om spamaanvallen op hun systeem te voorkomen. Hier zijn enkele van de redenen waarom uw website baat heeft bij CAPTCHA-validatie:

• CAPTCHA's helpen voorkomen dat hackers en bots de registratiesystemen spammen door nepaccounts aan te maken. Als ze niet worden voorkomen, kunnen ze die accounts gebruiken voor snode doeleinden.
• CAPTCHA's kunnen brute force-inlogaanvallen vanaf uw website verbieden die hackers gebruiken om in te loggen met duizenden wachtwoorden.
• CAPTCHA's kunnen voorkomen dat bots de beoordelingssectie spammen door valse opmerkingen te plaatsen.
• CAPTCHA's helpen bij het voorkomen van inflatie van tickets, aangezien sommige mensen een groot aantal tickets kopen om door te verkopen. CAPTCHA kan zelfs valse registraties voor gratis evenementen voorkomen.
• CAPTCHA's kunnen cybercriminelen ervan weerhouden blogs te spammen met onbetrouwbare opmerkingen en links naar schadelijke websites.

Er zijn nog veel meer redenen die de integratie van CAPTCHA-validatie in uw website ondersteunen. U kunt dit doen met de volgende code.

HTML CAPTCHA-code

HTML, of HyperText Markup Language, beschrijft de structuur van een webpagina. Gebruik de volgende HTML-code om uw CAPTCHA-validatieformulier te structureren:

Captcha Validator met behulp van HTML, CSS en JavaScript



captcha-tekst




Vernieuwen

Deze code bestaat voornamelijk uit 7 elementen:

• : Dit element wordt gebruikt om de kop van het CAPTCHA-formulier weer te geven.
• : Dit element wordt gebruikt om de CAPTCHA-tekst weer te geven.
• - Dit element wordt gebruikt om een ​​invoervak ​​te maken om de CAPTCHA in te typen.
• : Deze knop verstuurt het formulier en controleert of de CAPTCHA en de getypte tekst hetzelfde zijn of niet.
• : Deze knop wordt gebruikt om de CAPTCHA te vernieuwen.
• : Dit element wordt gebruikt om de uitvoer weer te geven volgens de ingevoerde tekst.
• : Dit is het bovenliggende element dat alle andere elementen bevat.

CSS- en JavaScript-bestanden zijn via de en elementen respectievelijk. U moet het koppeling tag in het hoofd tag en script tag aan het einde van de lichaam.

U kunt deze code ook integreren met bestaande formulieren van uw website.

Verwant: De HTML Essentials Cheat Sheet: tags, attributen en meer

CSS CAPTCHA-code

CSS, of Cascading Style Sheets, wordt gebruikt om HTML-elementen op te maken. Gebruik de volgende CSS-code om de bovenstaande HTML-elementen op te maken:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
lichaam {
achtergrondkleur: # 232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
hoogte: 200px;
breedte: 250px;
achtergrondkleur: # 2d3748;
weergave: flex;
align-items: center;
justify-content: center;
flex-richting: kolom;
}
#captchaHeading {
kleur wit;
}
#captcha {
marge-onder: 1em;
lettergrootte: 30px;
letterafstand: 3px;
kleur: # 08e5ff;
}
.center {
weergave: flex;
flex-richting: kolom;
align-items: center;
}
#verzendknop {
margin-top: 2em;
marge-onder: 2em;
achtergrondkleur: # 08e5ff;
grens: 0px;
font-weight: vet;
}
#refreshButton {
achtergrondkleur: # 08e5ff;
grens: 0px;
font-weight: vet;
}
#tekstvak {
hoogte: 25px;
}
.onjuiste captcha {
kleur: # FF0000;
}
.correctCaptcha {
kleur: # 7FFF00;
}

Voeg naar uw voorkeur CSS-eigenschappen toe aan deze code of verwijder ze. U kunt de formuliercontainer ook een elegante uitstraling geven met de CSS box-shadow-eigenschap.

JavaScript CAPTCHA-code

JavaScript wordt gebruikt om functionaliteit toe te voegen aan een anderszins statische webpagina. Gebruik de volgende code om volledige functionaliteit toe te voegen aan het CAPTCHA-validatieformulier:

// document.querySelector () wordt gebruikt om een ​​element uit het document te selecteren met behulp van zijn ID
let captchaText = document.querySelector ('# captcha');
laat userText = document.querySelector ('# textBox');
let submitButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# output');
let refreshButton = document.querySelector ('# refreshButton');
// alphaNums bevat de tekens waarmee u de CAPTCHA wilt maken
laat 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'];
laat emptyArr = [];
// Deze lus genereert een willekeurige reeks van 7 tekens met behulp van alphaNums
// Verder wordt deze string weergegeven als een CAPTCHA
voor (laat i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Deze gebeurtenisluisteraar wordt gestimuleerd wanneer de gebruiker op de "Enter" -knop drukt
// "Correct!" of "Onjuist, probeer het opnieuw" bericht is
// weergegeven na validatie van de invoertekst met CAPTCHA
userText.addEventListener ('keyup', function (e) {
// Sleutelcode Waarde van "Enter" -knop is 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Correct!";
} anders {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Onjuist, probeer het opnieuw";
}
}
});
// Deze gebeurtenisluisteraar wordt gestimuleerd wanneer de gebruiker op de knop "Verzenden" klikt
// "Correct!" of "Onjuist, probeer het opnieuw" bericht is
// weergegeven na validatie van de invoertekst met CAPTCHA
submitButton.addEventListener ('klik', functie () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Correct!";
} anders {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Onjuist, probeer het opnieuw";
}
});
// Deze gebeurtenisluisteraar wordt gestimuleerd wanneer de gebruiker op de knop "Vernieuwen" drukt
// Een nieuwe willekeurige CAPTCHA wordt gegenereerd en weergegeven nadat de gebruiker op de knop "Vernieuwen" heeft geklikt
refreshButton.addEventListener ('klik', functie () {
userText.value = "";
laat refreshArr = [];
voor (laat j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Nu heb je een volledig functioneel CAPTCHA-validatieformulier! Als je de volledige code wilt bekijken, kun je het GitHub-opslagplaats van dit CAPTCHA-Validator-project. Na het klonen van de repository, voer je het HTML-bestand uit en je krijgt de volgende output:

Wanneer u de juiste CAPTCHA-code in het invoervak ​​invoert, wordt de volgende uitvoer weergegeven:

Wanneer u een onjuiste CAPTCHA-code invoert in het invoervak, wordt de volgende uitvoer weergegeven:

Maak uw website veilig met CAPTCHA's

In het verleden hebben veel organisaties en bedrijven zware verliezen geleden, zoals datalekken, spamaanvallen, enz. als gevolg van het ontbreken van CAPTCHA-formulieren op hun websites. Het wordt ten zeerste aanbevolen om CAPTCHA aan uw website toe te voegen, omdat het een beveiligingslaag toevoegt om de website te beschermen tegen cybercriminelen.

Google lanceerde ook een gratis service genaamd "reCAPTCHA" die helpt bij het beschermen van websites tegen spam en misbruik. CAPTCHA en reCAPTCHA lijken op elkaar, maar ze zijn niet helemaal hetzelfde. Soms voelen CAPTCHA's voor veel gebruikers frustrerend en moeilijk te begrijpen. Hoewel er een belangrijke reden is waarom ze zo moeilijk zijn gemaakt.

Hoe werken CAPTCHA's en waarom zijn ze zo moeilijk?

CAPTCHA's en reCAPTCHA's voorkomen spam. Hoe werken ze? En waarom vind je CAPTCHA's zo moeilijk op te lossen?

Lees Volgende

Over de auteur