Een CAPTCHA-validatieformulier maken met HTML, CSS en JavaScript
CAPTCHA’s zijn een integraal onderdeel van de beveiliging van websites. Elke dag vullen mensen online miljoenen CAPTCHA-tests in.
In het geval dat u CAPTCHA-verificatie niet op uw site hebt geïmplementeerd, bestaat er een duidelijke mogelijkheid dat dit u blootstelt aan aanzienlijke kwetsbaarheden en uw vestiging vatbaar maakt voor kwaadwillige aanvallen door spam-entiteiten.
Hier volgt een uitgebreid overzicht van CAPTCHA’s, inclusief informatie over de implementatie ervan met behulp van HTML, CSS en JavaScript. Deze kennis voorziet je van alle benodigde details voor het opnemen van CAPTCHA-functionaliteit in je webapplicaties.
Wat is een CAPTCHA?
CAPTCHA, wat staat voor “Completely Automated Public Turing Test to Tell Computers and Humans Apart,” werd voor het eerst geïntroduceerd door Luis von Ahn, Manuel Blum, Nicholas J. Hopper en John Langford als een manier om onderscheid te maken tussen mensen en computers op websites door middel van een uitdaging-antwoord formaat.
CAPTCHA-mechanismen vergroten de veiligheid van websites door uitdagingen aan te bieden die lastig zijn voor geautomatiseerde webbots, maar hanteerbaar voor menselijke gebruikers. Ter illustratie, het onderscheiden van een reeks afgebeelde voertuigen valt binnen de capaciteit van mensen terwijl het hindernissen opwerpt die te formidabel zijn voor robotachtige agenten.
Het concept van CAPTCHA’s komt voort uit de Turingtest, die werd bedacht om te bepalen of een kunstmatige intelligentie intelligent gedrag kon vertonen dat niet te onderscheiden was van dat van een mens. In essentie dient een CAPTCHA als een “omgekeerde Turingtest”, waarbij gebruikers die worden verondersteld mensen te zijn, hun cognitieve capaciteiten moeten aantonen en zichzelf moeten onderscheiden van geautomatiseerde entiteiten die op bedrieglijke wijze ongeautoriseerde toegang proberen te krijgen.
Waarom uw website CAPTCHA-validatie nodig heeft
CAPTCHA speelt een essentiële rol bij het beveiligen van websites tegen kwaadaardige activiteiten zoals spamming, het indienen van schadelijke inhoud via formulieren en bepaalde soorten hackpogingen door een extra beveiligingslaag te implementeren die menselijke gebruikers onderscheidt van geautomatiseerde bots.
Ondanks het feit dat Google een technologisch geavanceerd bedrijf is, maakt zelfs Google gebruik van CAPTCHA’s om zijn systemen te beschermen tegen ongewenste spamaanvallen.
HTML CAPTCHA-code
De broncode die bij deze poging is gebruikt, is geüpload naar een GitHub-repository, die gratis toestemming geeft voor gebruik onder de voorwaarden van de MIT-licentie. Geïnteresseerden kunnen een operationeel voorbeeld bekijken door de bijgeleverde demonstratie te bekijken.
In dit project zullen we een CAPTCHA-mechanisme opnemen in een bestaand HTML-formulier door gebruik te maken van het onderstaande codefragment:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="center">
<h1 id="captchaHeading">
Captcha Validator Using HTML, CSS and JavaScript
</h1>
<div id="captchaBackground">
<canvas id="captcha">captcha text</canvas>
<input id="textBox" type="text" name="text">
<div id="buttons">
<input id="submitButton" type="submit">
<button id="refreshButton" type="submit">Refresh</button>
</div>
<span id="output"></span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Deze code bestaat voornamelijk uit zeven elementen:
De bovengenoemde HTML-code stelt een captcha voor, die wordt gebruikt om te controleren of een gebruiker inderdaad een mens is en geen geautomatiseerde bot. Het onderdeel bevat een title-tag met een ID van “captchaHeading” die dient als titel voor het captcha-formulier.
De eerder genoemde HTML-code bevat een tag, die wordt gebruikt om een afbeelding op de webpagina weer te geven. Daarnaast zijn er twee elementen met ID’s “top” en “bottom” en nog een zonder ID die dient als container voor de CAPTCHA-tekst. Deze wordt weergegeven met een canvas element met ID “captcha”.
Het geleverde codefragment lijkt een HTML-fragment te zijn dat een eenvoudig tekstinvoerveld bevat met het label “Text” en een bijbehorende ID “textBox”. Het doel van dit invoerveld is onduidelijk zonder aanvullende context of informatie over het beoogde gebruik ervan binnen de grotere webpagina of toepassing.
Het invoerelement met een ID van “submitButton” is een verzendknop die, als erop wordt geklikt, de formuliergegevens verwerkt en controleert of de ingevoerde CAPTCHA-code overeenkomt met de code die op de pagina wordt weergegeven, en ook controleert op eventuele typefouten in het antwoord van de gebruiker.
Het bovenstaande element bevat een knop met de ID “refreshButton”, die van het type “submit” is. Als er op deze knop wordt geklikt, wordt de CAPTCHA vernieuwd.
Het bovenstaande codefragment bevat een HTML span-element dat dient als een visueel aantrekkelijke container voor het weergeven van inhoud. De weergegeven inhoud wordt dynamisch gegenereerd op basis van de validatie van de invoer van gebruikers via de implementatie van een CAPTCHA-systeem.
De bovenvermelde component fungeert als bovenliggende entiteit die verschillende onderliggende elementen binnen zijn grenzen omvat, en fungeert als container voor deze componenten.
Het bovengenoemde CAPTCHA HTML-sjabloon bevat koppelingsfunctionaliteit door het gebruik van de elementen en , waarbij het eerste element in het gedeelte staat en het tweede aan het einde van het gedeelte van het document.
Navigeren door de uitgebreide reeks HTML-tags en hun bijbehorende attributen kan voor sommige mensen een uitdaging zijn. Gelukkig is er een gemakkelijk verkrijgbare bron, bekend als een HTML spiekbriefje, dat een beknopt overzicht geeft van essentiële HTML-elementen.Dit handige hulpprogramma is een waardevol referentiepunt voor wie snel de HTML-syntaxis wil doornemen.
Dit script kan worden opgenomen in het ontwerp van websites, zodat het naadloos kan worden geïntegreerd met reeds bestaande formulieren die daarin worden gehost.
CSS CAPTCHA-code
Gebruik CSS, of Cascading Style Sheets, om stilistische eigenschappen toe te passen op HTML-elementen. De resulterende CSS-code kan worden gebruikt om het uiterlijk van het CAPTCHA-verificatieformulier te verfraaien:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 220px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
height: 80%;
width: 80%;
font-size: 30px;
letter-spacing: 3px;
margin: auto;
display: block;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}
Je kunt het uiterlijk van de formuliercontainer verbeteren door de CSS box-shadow eigenschap toe te passen, die een stijlvol schaduweffect rond het element toevoegt. Daarnaast heb je de flexibiliteit om andere CSS-eigenschappen aan te passen aan je voorkeuren om het ontwerp van het formulier verder te verfijnen.
CAPTCHA validatie met JavaScript
Om een website extra mogelijkheden te geven, is het nodig om JavaScript te gebruiken. Om te beginnen haal je de benodigde elementen zoals het canvas en het tekstinvoerveld op met de methode document.getElementById(). Zo kun je deze onderdelen effectief openen en manipuleren.
let captchaText = document.getElementById('captcha');
var ctx = captchaText.getContext("2d");
ctx.font = "30px Roboto";
ctx.fillStyle = "#08e5ff";
let userText = document.getElementById('textBox');
let submitButton = document.getElementById('submitButton');
let output = document.getElementById('output');
let refreshButton = document.getElementById('refreshButton');
In dit geval maken we gebruik van document.getElementById() om een bepaald element in het document te identificeren en te isoleren op basis van zijn unieke identificatiecode die bekend staat als zijn “ID”.
Om de CAPTCHA-uitdaging te maken, moet je een reeks willekeurige tekens selecteren. Er bestaan verschillende methoden om deze taak uit te voeren, waaronder het opslaan van een verzameling mogelijke tekens in een matrix als startpunt voor selectie.
var captchaStr = "";
let 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'];
Hier is een voorbeeld van hoe je een CAPTCHA-generatiefunctie zou kunnen implementeren in JavaScript met een combinatie van HTML5 Canvas en de Math.random() methode:javascriptfunction generateCaptcha() {// Maak canvaselement voor captcha imagevar canvas = document.createElement(“canvas”);canvas.width = 200;canvas.height = 80;// Verkrijg context voor canvasvar ctx = canvas.getContext(“2d”);// Stel willekeurige kleuren in voor achtergrond en tekstvar bgColor = “#” \ Math.floor(Math.random() * 16777215).toString(16);var txtColor = “#” \ Math.floor(Math
We beginnen met het maken van een gloednieuwe array bestaande uit willekeurige karakters uit alphaNums . We doorlopen dit proces een vooraf bepaald aantal keren - in dit geval zeven iteraties. Bij elke herhaling voegen we een vers geselecteerd teken uit alphaNums toe aan de groeiende matrix. Tot slot gebruiken we de methode fillText() om de volledige verzameling als een enkele entiteit op ons canvas te schrijven.
function generate_captcha() {
let emptyArr = [];
for (let i = 1; i <= 7; i\\+\\+) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaStr = emptyArr.join('');
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
ctx.fillText(captchaStr, captchaText.width/4, captchaText.height/2);
output.innerHTML = "";
}
generate_captcha();
Houd er rekening mee dat deze specifieke functie het tekenoppervlak wist en alle uitgangen herstelt, die beide een cruciale rol spelen bij het vernieuwen van de CAPTCHA-tekstweergave.
De invoer van de gebruiker wordt gevalideerd door deze te vergelijken met de originele CAPTCHA-tekenreeks. Om dit te bereiken, kunt u een speciale functie maken die de vergelijking uitvoert en een booleaanse waarde retourneert die aangeeft of de ingevoerde code overeenkomt met de verwachte code. Dit zorgt voor de juiste verificatie voordat toegang wordt verleend tot gevoelige gegevens of functies op uw website.
function check_captcha() {
if (userText.value === captchaStr) {
output.className = "correctCaptcha";
output.innerHTML = "Correct!";
} else {
output.className = "incorrectCaptcha";
output.innerHTML = "Incorrect, please try again!";
}
}
Geef aan dat de code moet worden uitgevoerd wanneer de “Enter”-toets wordt ingedrukt of de “Submit”-knop wordt aangeklikt door een event listener toe te voegen voor respectievelijk de “keydown”- en “click”-gebeurtenissen binnen de juiste elementen, zoals formuliervelden of -knoppen, met bijbehorende functies voor het afhandelen van de logica voor het verzenden van de formuliergegevens om de spreadsheet bij te werken.
userText.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
check_captcha();
}
});
submitButton.addEventListener('click', check_captcha);
Om het probleem op te lossen dat captcha’s slechts eenmaal worden gegenereerd en onbeschikbaar worden na een paginaverversing of verandering in de url, moeten we een mechanisme implementeren om de captcha bij elke aanvraag te verversen. Om dit te bereiken, associeer je eenvoudigweg de “submit” gebeurtenis van de captcha generatie knop met de generate_captcha() functie-aanroep binnen de script tag die de knop bevat. Dit zorgt ervoor dat een nieuwe captcha wordt gegenereerd bij elke formulierverzending of URL-verandering, waardoor de noodzakelijke beveiligingsmaatregelen worden gehandhaafd terwijl de gebruikerservaring naadloos blijft.
refreshButton.addEventListener('click', generate_captcha);
Uitvoer van het CAPTCHA Validator Project
Als je het CAPTCHA Validatieformulier met succes op je eigen server of lokale omgeving hebt gerepliceerd, kun je de verwachte uitvoer op de webpagina zien, wat bevestigt dat de captcha-functionaliteit goed is geïntegreerd in de codebase. Dit is een indicatie dat de implementatie correct is uitgevoerd en effectief functioneert voor het beoogde doel.
Na het invoeren van een geldige CAPTCHA-verificatiecode in het daartoe bestemde invoerveld, wordt daarin een overeenkomstig antwoord weergegeven, zoals hieronder nader wordt beschreven:
Bij het indienen van een ongeldige reactie op het CAPTCHA-verificatieproces via het opgegeven invoerveld, zal het systeem de volgende feedback genereren:
Beveilig uw website met CAPTCHA’s
In eerdere gevallen hebben veel instellingen en bedrijven aanzienlijke tegenslagen ondervonden, zoals datalekken en spamaanvallen, vanwege het ontbreken van CAPTCHA-functies op hun online platforms. Het implementeren van CAPTCHA wordt sterk aangemoedigd om een extra beschermingslaag te bieden tegen kwaadaardige cyberactiviteiten gericht op websystemen.
Google heeft een gratis aanbod geïntroduceerd dat bekend staat als “reCAPTCHA”, dat dient om websites te beschermen tegen spam en misbruik. Hoewel CAPTCHA en reCAPTCHA analoog lijken, hebben ze toch enkele verschillen. In sommige gevallen kunnen CAPTCHA’s vervelend en moeilijk te begrijpen zijn voor veel eindgebruikers. Het is echter essentieel om te erkennen dat deze moeilijkheden opzettelijk zijn ingebouwd vanwege hun kritieke functie bij het verifiëren van de authenticiteit van de gebruiker.