I dag er CAPTCHA'er en integreret del af websidesikkerhed. Millioner af CAPTCHA-tests gennemføres online hver dag.

Hvis du ikke har implementeret CAPTCHA-validering på dit websted, kan det skabe et stort problem for dig og sætte dig op som et mål for spammere.

Her er alt hvad du behøver at vide om CAPTCHA'er, og hvordan du nemt kan implementere dem på dit websted ved hjælp af HTML, CSS og JavaScript.

Hvad er CAPTCHA?

CAPTCHA står for "Completely Automated Public Turing test to tell Computers and Humans Apart." Dette udtryk blev opfundet i 2003 af Luis von Ahn, Manuel Blum, Nicholas J. Hopper og John Langford. Det er en type udfordringsrespons test, der bruges til at afgøre, om brugeren er menneske eller ej.

CAPTCHAs tilføjer sikkerhed til websteder ved at give udfordringer, der er vanskelige for bots at udføre, men relativt lette for mennesker. For eksempel er det vanskeligt for bots at identificere alle billederne af en bil fra et sæt af flere billeder, men det er enkelt nok til menneskelige øjne.

Idéen med CAPTCHA stammer fra Turing-testen. En Turing-test er en metode til at teste, om en maskine kan tænke som et menneske eller ej. Interessant nok kan en CAPTCHA-test kaldes en "omvendt Turing-test", da computeren i dette tilfælde opretter den test, der udfordrer mennesker.

Hvorfor dit websted har brug for CAPTCHA-validering?

CAPTCHA'er bruges hovedsageligt til at forhindre, at bots automatisk sender formularer med spam og andet skadeligt indhold. Selv virksomheder som Google bruger det til at forhindre deres system i at angribe spam. Her er nogle af grundene til, at dit websted har fordel af CAPTCHA-validering:

• CAPTCHA'er hjælper med at forhindre hackere og bots i at spamme registreringssystemerne ved at oprette falske konti. Hvis de ikke forhindres, kan de bruge disse konti til onde formål.
• CAPTCHA'er kan forbyde brute force-loginangreb fra dit websted, som hackere bruger til at prøve at logge på ved hjælp af tusindvis af adgangskoder.
• CAPTCHA'er kan begrænse bots fra at spamme gennemgangssektionen ved at give falske kommentarer.
• CAPTCHAs hjælper med at forhindre billetinflation, da nogle mennesker køber et stort antal billetter til videresalg. CAPTCHA kan endda forhindre falske registreringer til gratis begivenheder.
• CAPTCHA'er kan begrænse cyber-skurke fra at spamme blogs med risikable kommentarer og links til skadelige websteder.

Der er mange flere grunde, der understøtter integrering af CAPTCHA-validering på dit websted. Du kan gøre det med følgende kode.

HTML CAPTCHA-kode

HTML eller HyperText Markup Language beskriver strukturen på en webside. Brug følgende HTML-kode til at strukturere din CAPTCHA-valideringsformular:

Captcha Validator ved hjælp af HTML, CSS og JavaScript



captcha-tekst




Opdater

Denne kode består hovedsageligt af 7 elementer:

• : Dette element bruges til at vise overskriften på CAPTCHA-formularen.
• : Dette element bruges til at vise CAPTCHA-teksten.
• - Dette element bruges til at oprette en inputboks til at skrive CAPTCHA.
• : Denne knap sender formularen og kontrollerer, om CAPTCHA og den indtastede tekst er ens eller ej.
• : Denne knap bruges til at opdatere CAPTCHA.
• : Dette element bruges til at vise output i henhold til den indtastede tekst.
• : Dette er det overordnede element, der indeholder alle de andre elementer.

CSS- og JavaScript-filer er linket til denne HTML-side gennem og elementer henholdsvis. Du skal tilføje link tag inde i hoved tag og manuskript tag i slutningen af legeme.

Du kan også integrere denne kode med eksisterende former for dit websted.

Relaterede: HTML Essentials Cheat Sheet: Tags, attributter og mere

CSS CAPTCHA-kode

CSS eller Cascading Style Sheets bruges til at style HTML-elementer. Brug følgende CSS-kode til at style ovenstående HTML-elementer:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
krop {
baggrundsfarve: # 232331;
font-familie: 'Roboto', sans-serif;
}
#captchaBackground {
højde: 200px;
bredde: 250px;
baggrundsfarve: # 2d3748;
display: flex;
align-items: center;
retfærdiggør-indhold: center;
flex-retning: kolonne;
}
#captchaHeading {
farve: hvid;
}
#captcha {
margin-bund: 1 em;
skriftstørrelse: 30 pixel;
mellemrum mellem bogstaver: 3 pixel;
farve: # 08e5ff;
}
.center {
display: flex;
flex-retning: kolonne;
align-items: center;
}
#submitButton {
margin-top: 2 em;
margin-bund: 2 em;
baggrundsfarve: # 08e5ff;
kant: 0px;
font-vægt: fed;
}
#refreshButton {
baggrundsfarve: # 08e5ff;
kant: 0px;
font-vægt: fed;
}
#textBox {
højde: 25px;
}
.incorrectCaptcha {
farve: # FF0000;
}
.correctCaptcha {
farve: # 7FFF00;
}

Tilføj eller fjern CSS-egenskaber fra denne kode efter din præference. Du kan også give formularbeholderen et elegant udseende ved hjælp af CSS box-shadow egenskab.

JavaScript CAPTCHA-kode

JavaScript bruges til at tilføje funktionalitet til en ellers statisk webside. Brug følgende kode til at tilføje komplet funktionalitet til CAPTCHA-valideringsformularen:

// document.querySelector () bruges til at vælge et element fra dokumentet ved hjælp af dets ID
lad captchaText = document.querySelector ('# captcha');
lad userText = document.querySelector ('# textBox');
lad submitButton = document.querySelector ('# submitButton');
lad output = document.querySelector ('# output');
lad refreshButton = document.querySelector ('# refreshButton');
// alphaNums indeholder de tegn, som du vil oprette CAPTCHA med
lad 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'];
lad tommeArr = [];
// Denne sløjfe genererer en tilfældig streng på 7 tegn ved hjælp af alphaNums
// Yderligere vises denne streng som en CAPTCHA
for (lad i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Denne begivenhedslytter stimuleres, hver gang brugeren trykker på "Enter" -knappen
// "Korrekt!" eller "Forkert, prøv igen" beskeden er
// vises efter validering af inputteksten med CAPTCHA
userText.addEventListener ('keyup', funktion (e) {
// Nøglekodeværdien for "Enter" -knappen er 13
hvis (e.keyCode 13) {
hvis (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Korrekt!";
} andet {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Forkert, prøv igen";
}
}
});
// Denne begivenhedslytter stimuleres, hver gang brugeren klikker på knappen "Send"
// "Korrekt!" eller "Forkert, prøv igen" beskeden er
// vises efter validering af inputteksten med CAPTCHA
submitButton.addEventListener ('klik', funktion () {
hvis (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Korrekt!";
} andet {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Forkert, prøv igen";
}
});
// Denne begivenhedslytter stimuleres, hver gang brugeren trykker på knappen "Opdater"
// En ny tilfældig CAPTCHA genereres og vises, når brugeren klikker på knappen "Opdater"
refreshButton.addEventListener ('klik', funktion () {
userText.value = "";
lad refreshArr = [];
for (lad j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Nu har du en fuldt funktionel CAPTCHA-valideringsformular! Hvis du vil se på den komplette kode, kan du klone GitHub-lager af dette CAPTCHA-Validator-projekt. Efter kloning af lageret skal du udføre HTML-filen, og du får følgende output:

Når du indtaster den korrekte CAPTCHA-kode i inputboksen, vises følgende output:

Når du indtaster en forkert CAPTCHA-kode i inputboksen, vises følgende output:

Gør dit websted sikkert med CAPTCHA'er

Tidligere har mange organisationer og virksomheder lidt store tab som databrud, spamangreb osv. som et resultat af ikke at have CAPTCHA-formularer på deres hjemmesider. Det anbefales stærkt at tilføje CAPTCHA til dit websted, da det tilføjer et sikkerhedslag for at forhindre webstedet i cyberkriminelle.

Google lancerede også en gratis tjeneste kaldet "reCAPTCHA", der hjælper med at beskytte websteder mod spam og misbrug. CAPTCHA og reCAPTCHA virker ens, men de er ikke helt de samme. Nogle gange føles CAPTCHA'er frustrerende og vanskelige at forstå for mange brugere. Selvom der er en vigtig grund til, hvorfor de er lavet til at være vanskelige.

Hvordan fungerer CAPTCHA'er, og hvorfor er de så vanskelige?

CAPTCHA'er og reCAPTCHA'er forhindrer spam. Hvordan fungerer de? Og hvorfor finder du CAPTCHA'er så svære at løse?

Læs Næste

Om forfatteren