Skapa ett CAPTCHA-valideringsformulär med HTML, CSS och JavaScript
CAPTCHAs är en integrerad del av webbplatsens säkerhet. Varje dag genomför människor miljontals CAPTCHA-tester online.
Om du inte har infört CAPTCHA-verifiering på din webbplats finns det en uppenbar möjlighet att det kan utsätta dig för betydande sårbarheter och göra din anläggning mottaglig för skadliga attacker som utförs av spammande enheter.
Här följer en omfattande översikt över CAPTCHA, inklusive information om hur de implementeras med hjälp av HTML, CSS och JavaScript. Denna kunskap kommer att ge dig alla nödvändiga detaljer för att införliva CAPTCHA-funktionalitet i dina webbapplikationer.
Vad är CAPTCHA?
CAPTCHA, som står för “Completely Automated Public Turing Test to Tell Computers and Humans Apart”, introducerades först av Luis von Ahn, Manuel Blum, Nicholas J. Hopper och John Langford som ett sätt att skilja mellan människor och datorer på webbplatser genom ett utmanings- och svarsformat.
CAPTCHA-mekanismer förbättrar webbplatsens säkerhet genom att presentera utmaningar som är betungande för automatiserade webbrobotar men hanterbara för omdömesgilla mänskliga användare. Att skilja mellan en rad avbildade fordon ligger inom människans kapacitet medan det utgör hinder som är för formidabla för robotagenter.
Begreppet CAPTCHA härstammar från Turingtestet, som togs fram för att avgöra om en artificiell intelligens kunde uppvisa intelligent beteende som inte gick att skilja från en människas. En CAPTCHA fungerar i princip som ett “omvänt Turingtest”, där användare som antas vara människor måste visa sina kognitiva förmågor och skilja sig från automatiserade enheter som försöker få obehörig åtkomst genom bedrägliga metoder.
Varför din webbplats behöver CAPTCHA-validering
CAPTCHA spelar en viktig roll för att skydda webbplatser mot skadliga aktiviteter som spam, inlämning av skadligt innehåll via formulär och vissa typer av hackningsförsök genom att implementera ett extra lager av säkerhet som skiljer mänskliga användare från automatiserade robotar.
Trots att Google är ett tekniskt avancerat företag använder till och med Google CAPTCHA som ett sätt att skydda sina system mot oönskade spamattacker.
HTML CAPTCHA Code
Källkoden som använts i detta arbete har laddats upp till ett GitHub-arkiv, som ger tillstånd att använda den utan kostnad enligt villkoren i MIT-licensen. De som är intresserade kan se ett operativt exempel genom att granska den medföljande demonstrationen.
I det här projektet ska vi integrera en CAPTCHA-mekanism i ett befintligt HTML-formulär med hjälp av det medföljande kodavsnittet enligt följande:
<!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>
Denna kod består huvudsakligen av sju element:
Den ovan nämnda HTML-koden representerar en captcha, som används för att verifiera att en användare verkligen är en människa och inte en automatiserad bot. Komponenten innehåller en title-tagg med ett ID på “captchaHeading” som fungerar som rubrik för captcha-formuläret.
Den ovan nämnda HTML-koden innehåller en tagg, som används för att visa en bild på webbsidan. Dessutom finns det två element med ID “top” och “bottom”, samt en annan utan något ID som fungerar som en behållare för CAPTCHA-texten. Den senare visas med hjälp av ett canvas-element med ID “captcha”.
Det tillhandahållna kodavsnittet verkar vara ett HTML-fragment som innehåller ett enkelt textinmatningsfält, märkt “Text”, med ett associerat ID för “textBox”. Syftet med detta inmatningsfält är oklart utan ytterligare sammanhang eller information om dess avsedda användning inom den större webbsidan eller applikationen.
Inmatningselementet med ID:t “submitButton” är en skicka-knapp som, när den klickas på, bearbetar formulärdata och kontrollerar om den angivna CAPTCHA-koden matchar den som visas på sidan, samt kontrollerar eventuella stavfel i användarens svar.
Det ovan nämnda elementet innehåller en knapp med ID “refreshButton”, som är av typen “submit”. När denna knapp klickas uppdateras CAPTCHA.
Ovanstående kodavsnitt innehåller ett HTML span-element, som fungerar som en visuellt tilltalande behållare för visning av innehåll. Det visade innehållet genereras dynamiskt baserat på valideringen av inmatning från användare genom implementering av ett CAPTCHA-system.
Den ovannämnda komponenten fungerar som en överordnad enhet som omfattar olika underordnade element inom sina gränser och fungerar som en behållare för dessa komponenter.
Den ovannämnda CAPTCHA HTML-mallen innehåller länkfunktionalitet genom användning av elementen och , där det förra ligger inom avsnittet och det senare är placerat mot slutet av dokumentets .
Att navigera genom det omfattande utbudet av HTML-taggar och deras motsvarande attribut kan vara svårt för vissa personer. Lyckligtvis finns det en lättillgänglig resurs som kallas HTML-fuskark och som ger en kortfattad sammanfattning av viktiga HTML-element.Detta användbara verktyg fungerar som en värdefull referenspunkt för dem som vill ha en snabb genomgång av HTML-syntax.
Att införliva detta skript är möjligt genom att införliva det i utformningen av webbplatser, vilket möjliggör sömlös integration med redan existerande formulär som finns där.
CSS CAPTCHA-kod
Använd CSS, eller Cascading Style Sheets, för att tillämpa stilistiska egenskaper på HTML-element. Den efterföljande CSS-koden kan användas för att försköna utseendet på CAPTCHA-verifieringsformuläret:
@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;
}
Du kan förbättra utseendet på formulärbehållaren genom att använda CSS-egenskapen box-shadow , som lägger till en snygg skuggeffekt runt elementet. Dessutom har du möjlighet att ändra andra CSS-egenskaper i enlighet med dina preferenser för att ytterligare förfina utformningen av formuläret.
CAPTCHA-validering Använda JavaScript
För att ge en webbplats ytterligare funktioner är det nödvändigt att använda JavaScript. Börja med att hämta de nödvändiga elementen, t.ex. canvas och textinmatningsfält, med hjälp av metoden document.getElementById(). Detta gör att du kan komma åt och manipulera dessa komponenter på ett effektivt sätt.
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');
I det här fallet använder vi oss av document.getElementById() för att identifiera och isolera ett visst element i dokumentet baserat på dess unika identifierare som kallas “ID”.
För att skapa CAPTCHA-utmaningen måste man välja en sekvens av godtyckliga tecken. Det finns flera metoder för att utföra denna uppgift, inklusive att lagra en samling möjliga tecken i en array som utgångspunkt för urvalet.
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'];
Här är ett exempel på hur du kan implementera en CAPTCHa-genereringsfunktion i JavaScript med en kombination av HTML5 Canvas och metoden Math.random():javascriptfunction generateCaptcha() {// Skapa canvas-element för captcha imagevar canvas = document.createElement(“canvas”);canvas.width = 200;canvas.height = 80;// Hämta kontext för canvasvar ctx = canvas.getContext(“2d”);// Slumpmässig färg för bakgrund och textvar bgColor = “#” \+ Math.floor(Math.random() * 16777215).toString(16);var txtColor = “#” \+ Math.floor(Math
Vi börjar med att bygga en helt ny array bestående av valfria tecken från alphaNums . Vi kommer att iterera genom denna process ett förutbestämt antal gånger - i detta fall sju iterationer. I varje pass introducerar vi ett nyvalt tecken från alphaNums till den växande matrisen. Slutligen använder vi metoden fillText() för att skriva in hela samlingen på vår duk som en enda enhet.
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();
Observera att den här funktionen raderar ritytan och återställer alla utdata, vilket båda spelar en avgörande roll för att föryngra CAPTCHA-textdisplayen.
Processen för att validera användarens inmatning innebär att den jämförs med den ursprungliga CAPTCHA-strängen. För att åstadkomma detta kan du skapa en dedikerad funktion som utför jämförelsen och returnerar ett booleskt värde som anger om den inmatade koden matchar den förväntade eller inte. Detta säkerställer korrekt autentisering innan du ger åtkomst till känsliga data eller funktioner på din webbplats.
function check_captcha() {
if (userText.value === captchaStr) {
output.className = "correctCaptcha";
output.innerHTML = "Correct!";
} else {
output.className = "incorrectCaptcha";
output.innerHTML = "Incorrect, please try again!";
}
}
Ange att koden ska köras när antingen “Enter”-tangenten trycks ned eller “Submit”-knappen klickas genom att lägga till en eventlyssnare för “keydown”- respektive “click”-händelserna i lämpliga element, som formulärfält eller knappar, med motsvarande funktioner för att hantera logiken för att skicka formulärdata för att uppdatera kalkylarket.
userText.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
check_captcha();
}
});
submitButton.addEventListener('click', check_captcha);
För att lösa problemet med att captchas bara genereras en gång och blir otillgängliga efter en siduppdatering eller ändring av webbadress, måste vi implementera en mekanism för att uppdatera captcha vid varje förfrågan. För att uppnå detta associerar du helt enkelt händelsen “skicka” för captcha-genereringsknappen med generate_captcha() funktionsanropet i skripttaggen som innehåller den. Detta kommer att säkerställa att en ny captcha genereras vid varje formulärinlämning eller URL-ändring, vilket upprätthåller nödvändiga säkerhetsåtgärder samtidigt som det möjliggör en sömlös användarupplevelse.
refreshButton.addEventListener('click', generate_captcha);
Utdata från CAPTCHA-validatorprojektet
När du har lyckats replikera CAPTCHA-valideringsformuläret på din egen server eller lokala miljö kommer du att kunna se den förväntade utdata som visas på webbsidan, vilket bekräftar att captcha-funktionen är korrekt integrerad med kodbasen. Detta är en indikation på att implementeringen har utförts korrekt och fungerar effektivt i sitt avsedda syfte.
När den giltiga CAPTCHA-verifieringskoden anges i det angivna inmatningsfältet ska ett motsvarande svar visas där, enligt nedan:
När ett ogiltigt svar på CAPTCHA-verifieringsprocessen skickas in via det angivna inmatningsfältet ska systemet generera följande feedback:
Säkra din webbplats med CAPTCHAs
I tidigare fall har många institutioner och företag upplevt betydande bakslag som dataintrång och spamattacker på grund av frånvaron av CAPTCHA-funktioner på sina onlineplattformar. Implementering av CAPTCHA uppmuntras starkt för att ge ett ytterligare lager av skydd mot skadliga cyberaktiviteter som riktar sig mot webbaserade system.
Google har introducerat ett gratiserbjudande som kallas “reCAPTCHA”, som syftar till att skydda webbplatser mot skräppost och kränkande aktiviteter. Även om CAPTCHA och reCAPTCHA kan tyckas vara analoga, har de vissa olikheter. I vissa fall kan CAPTCHA vara irriterande och utmanande för många slutanvändare att förstå. Det är dock viktigt att inse att dessa svårigheter är avsiktligt inbyggda på grund av deras kritiska funktion för att verifiera användarens äkthet.