Tänapäeval on CAPTCHA-d veebisaidi turvalisuse lahutamatu osa. Iga päev täidetakse veebis miljoneid CAPTCHA teste.

Kui te pole oma veebisaidil rakendanud CAPTCHA valideerimist, võib see teie jaoks tekitada suure probleemi, seades teid rämpspostitajate sihtmärgiks.

Siin on kõik, mida peate teadma CAPTCHA-de kohta ja kuidas saate neid hõlpsasti oma veebisaidil juurutada, kasutades HTML-i, CSS-i ja JavaScripti.

Mis on CAPTCHA?

CAPTCHA tähistab "Täielikult automatiseeritud Public Turingi test arvutitele ja inimestele lisaks". Selle mõiste võtsid 2003. aastal kasutusele Luis von Ahn, Manuel Blum, Nicholas J. Hopper ja John Langford. See on väljakutse-vastuse test, mida kasutatakse selleks, et teha kindlaks, kas kasutaja on inimene või mitte.

CAPTCHA-d lisavad veebisaitidele turvalisust, pakkudes väljakutseid, mida robotitel on raske täita, kuid inimestel suhteliselt lihtne. Näiteks on kõigi piltide tuvastamine mitme pildi hulgast robotite jaoks keeruline, kuid inimese silmade jaoks piisavalt keeruline.

CAPTCHA idee pärineb Turingi testist. Turingi test on meetod, kuidas testida, kas masin suudab mõelda nagu inimene või mitte. Huvitaval kombel võib CAPTCHA testi nimetada "vastupidiseks Turingi testiks", kuna sel juhul loob arvuti testi, mis kutsub inimesi proovile.

Miks vajab teie veebisait CAPTCHA valideerimist?

CAPTCHA-sid kasutatakse peamiselt selleks, et robotid ei edastaks rämpsposti ja muu kahjuliku sisuga vorme automaatselt. Isegi sellised ettevõtted nagu Google kasutavad seda oma süsteemi rämpspostirünnakute vältimiseks. Siin on mõned põhjused, miks teie veebisait saab CAPTCHA valideerimisest kasu:

• CAPTCHA-d aitavad võltskontode loomisega vältida häkkerite ja robotite registreerimissüsteemide rämpspostitamist. Kui neid ei takistata, saavad nad neid kontosid kasutada alatutel eesmärkidel.
• CAPTCHA-d võivad keelata teie veebisaidilt jõhkra sisselogimise rünnakud, mida häkkerid kasutavad tuhandete paroolide abil sisselogimiseks.
• CAPTCHA-d võivad valesid kommentaare pakkudes piirata robotite arvustuste jaotise rämpspostitamist.
• CAPTCHA aitab vältida piletite inflatsiooni, kuna mõned inimesed ostavad edasimüügiks suure hulga pileteid. CAPTCHA võib isegi ära hoida vale registreerimise tasuta üritustele.
• CAPTCHA-d võivad piirata küberkelmide blogide rämpsposti saatmist kommenteerimiste ja kahjulike veebisaitide linkidega.

On veel palju põhjuseid, mis toetavad CAPTCHA valideerimise integreerimist teie veebisaidile. Seda saate teha järgmise koodiga.

HTML CAPTCHA kood

HTML ehk HyperText Markup Language kirjeldab veebilehe struktuuri. CAPTCHA valideerimisvormi struktureerimiseks kasutage järgmist HTML-koodi:

Captcha Validator HTML, CSS ja JavaScripti abil



captcha tekst




Värskenda

See kood koosneb peamiselt 7 elemendist:

• : Seda elementi kasutatakse vormi CAPTCHA pealkirja kuvamiseks.
• : Seda elementi kasutatakse CAPTCHA teksti kuvamiseks.
• - Seda elementi kasutatakse sisendkasti loomiseks CAPTCHA sisestamiseks.
• : See nupp esitab vormi ja kontrollib, kas CAPTCHA ja sisestatud tekst on samad või mitte.
• : Seda nuppu kasutatakse CAPTCHA värskendamiseks.
• : Seda elementi kasutatakse väljundi kuvamiseks vastavalt sisestatud tekstile.
• : See on vanemelement, mis sisaldab kõiki muid elemente.

CSS- ja JavaScripti failid on selle HTML-lehega lingitud ja vastavalt. Peate lisama link sildi sees pea silt ja stsenaarium silt sildi lõpus keha.

Saate selle koodi integreerida ka oma veebisaidi olemasolevate vormidega.

Seotud: HTML Essentialsi petulehekülg: sildid, atribuudid ja palju muud

CSS CAPTCHA kood

CSS-i ehk kaskaadstiililehti kasutatakse HTML-elementide kujundamiseks. Kasutage ülaltoodud HTML-elementide kujundamiseks järgmist CSS-koodi:

@impl url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
keha {
taustavärv: # 232331;
font-perekond: 'Roboto', sans-serif;
}
#captchaBackground {
kõrgus: 200px;
laius: 250px;
taustavärv: # 2d3748;
kuva: painduv;
joondavad elemendid: keskel;
õigusta-sisu: keskus;
painde suund: veerg;
}
#captchaHeading {
värvus: valge;
}
#captcha {
ääris-põhi: 1em;
fondi suurus: 30 pikslit;
kirjavahe: 3px;
värv: # 08e5ff;
}
.Keskus {
kuva: painduv;
painde suund: veerg;
joondavad elemendid: keskel;
}
#submitButton {
ülemine serv: 2em;
ääris-põhi: 2em;
taustavärv: # 08e5ff;
ääris: 0px;
fondi kaal: paks;
}
#refreshButton {
taustavärv: # 08e5ff;
ääris: 0px;
fondi kaal: paks;
}
#textBox {
kõrgus: 25px;
}
.incorrectCaptcha {
värv: # FF0000;
}
.correctCaptcha {
värv: # 7FFF00;
}

Lisage sellest koodist CSS-i atribuudid või eemaldage need vastavalt teie eelistustele. Samuti saate vormikonteinerile elegantse ilme anda, kasutades CSS box-shadow atribuut.

JavaScripti CAPTCHA kood

JavaScripti kasutatakse funktsionaalsuse lisamiseks muidu staatilisele veebisaidile. CAPTCHA valideerimisvormi täieliku funktsionaalsuse lisamiseks kasutage järgmist koodi:

// document.querySelector () kasutatakse dokumendi elemendi valimiseks selle ID abil
laske captchaText = document.querySelector ('# captcha');
laske kasutajaText = document.querySelector ('# textBox');
laske esitadaButton = document.querySelector ('# submitButton');
olgu väljund = document.querySelector ('# output');
laske refreshButton = document.querySelector ('# refreshButton');
// alphaNums sisaldab märke, millega soovite CAPTCHA luua
olgu alfaNums = ['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'];
lase tühiArr = [];
// See tsükkel genereerib alphaNumsi abil juhusliku 7-kohalise stringi
// Lisaks kuvatakse see string CAPTCHA-na
for (olgu i = 1; i <= 7; i ++) {
emptyArr.push (alfaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Seda sündmuste kuulajat stimuleeritakse alati, kui kasutaja vajutab nuppu "Enter"
// "Õige!" või "Vale, proovige uuesti" sõnum on
// kuvatakse pärast sisendteksti kinnitamist CAPTCHA-ga
userText.addEventListener ('keyup', funktsioon (e) {
// Nupu "Enter" võtmekood on 13
kui (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Õige!";
} muu {
output.classList.add ("falseCaptcha");
output.innerHTML = "Vale, proovige uuesti";
}
}
});
// Seda sündmuste kuulajat stimuleeritakse alati, kui kasutaja klõpsab nuppu „Esita”
// "Õige!" või "Vale, proovige uuesti" sõnum on
// kuvatakse pärast sisendteksti kinnitamist CAPTCHA-ga
submitButton.addEventListener ('klõps', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Õige!";
} muu {
output.classList.add ("falseCaptcha");
output.innerHTML = "Vale, proovige uuesti";
}
});
// Seda sündmuste kuulajat stimuleeritakse alati, kui kasutaja vajutab nuppu "Värskenda"
// Uus juhuslik CAPTCHA genereeritakse ja kuvatakse pärast seda, kui kasutaja klõpsab nuppu "Värskenda"
refreshButton.addEventListener ('klõps', function () {
userText.value = "";
lase värskendadaArr = [];
for (olgu j = 1; j <= 7; j ++) {
refreshArr.push (alfaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Nüüd on teil täisfunktsionaalne CAPTCHA valideerimisvorm! Kui soovite pilk kogu koodile, saate selle kloonida Selle CAPTCHA-Validatori projekti GitHubi hoidla. Pärast hoidla kloonimist käivitage HTML-fail ja saate järgmise väljundi:

Kui sisestate sisestuskasti õige CAPTCHA-koodi, kuvatakse järgmine väljund:

Kui sisestate sisestuskasti vale CAPTCHA-koodi, kuvatakse järgmine väljund:

Muutke oma veebisait CAPTCHA-de abil turvaliseks

Varem on paljud organisatsioonid ja ettevõtted kandnud suuri kaotusi, näiteks andmerikkumised, rämpspostirünnakud jne. CAPTCHA vormide puudumisel nende veebisaitidel. On väga soovitatav lisada CAPTCHA oma veebisaidile, kuna see lisab turvakihi, et vältida veebisaidi küberkurjategijate teket.

Google käivitas ka tasuta teenuse nimega "reCAPTCHA", mis aitab kaitsta veebisaite rämpsposti ja väärkasutuse eest. CAPTCHA ja reCAPTCHA tunduvad sarnased, kuid need pole päris ühesugused asjad. Mõnikord tunnevad CAPTCHA-d paljude kasutajate jaoks pettumust ja neid on raske mõista. Kuigi on oluline põhjus, miks need keeruliseks muudetakse.

Kuidas CAPTCHAd töötavad ja miks nad nii rasked on?

CAPTCHA ja reCAPTCHA takistavad rämpsposti. Kuidas nad töötavad? Ja miks leiate, et CAPTCHA-sid on nii raske lahendada?

Loe edasi

Autori kohta