Danas su CAPTCHA sastavni dio sigurnosti web stranica. Milijuni CAPTCHA testova svakodnevno se obavljaju putem interneta.

Ako na svom web mjestu niste implementirali provjeru CAPTCHA, to bi vam moglo stvoriti veliki problem postavljanjem vas kao cilja neželjenih pošiljatelja.

Evo svega što trebate znati o CAPTCHA i kako ih možete jednostavno implementirati na svoje web mjesto pomoću HTML-a, CSS-a i JavaScript-a.

Što je CAPTCHA?

CAPTCHA je kratica od "Potpuno automatizirani javni Turingov test kojim se računala i ljudi razlikuju". Ovaj su izraz 2003. godine stvorili Luis von Ahn, Manuel Blum, Nicholas J. Hopper i John Langford. To je vrsta testa izazov-odgovor koji se koristi za utvrđivanje je li korisnik čovjek ili nije.

CAPTCHA dodaju sigurnost web mjestima pružajući izazove koje je botovima teško izvesti, ali ljudima relativno lako. Na primjer, prepoznavanje svih slika automobila iz niza više slika teško je za botove, ali dovoljno jednostavno za ljudske oči.

Ideja CAPTCHA potječe iz Turingova testa. Turingov test metoda je kojom se može provjeriti može li stroj razmišljati poput čovjeka ili ne. Zanimljivo je da se CAPTCHA test može nazvati "obrnutim Turingovim testom", jer u ovom slučaju računalo stvara test koji izaziva ljude.

Zašto je vašoj web stranici potrebna CAPTCHA provjera valjanosti?

CAPTCHA se uglavnom koriste za sprečavanje botova da automatski predaju obrasce s neželjenom poštom i drugim štetnim sadržajem. Čak ga i tvrtke poput Googlea koriste kako bi spriječile svoj sustav od neželjenih napada. Evo nekoliko razloga zbog kojih će vaše web mjesto imati koristi od validacije CAPTCHA:

• CAPTCHA pomažu u sprečavanju hakera i botova da pošalju neželjenu poštu sustavima za registraciju stvaranjem lažnih računa. Ako im se to ne spriječi, te račune mogu koristiti u podle svrhe.
• CAPTCHA mogu zabraniti napade brutalnom prijavom s vašeg web mjesta koje hakeri koriste za pokušaj prijave pomoću tisuća lozinki.
• CAPTCHA mogu ograničiti botove da pošalju neželjenu poštu odjeljkom za pregled davanjem lažnih komentara.
• CAPTCHA pomažu u sprečavanju napuhavanja karata jer neki ljudi kupuju velik broj karata za preprodaju. CAPTCHA može čak spriječiti lažne registracije za besplatne događaje.
• CAPTCHA-e mogu ograničiti cyber prijevare da ne šalju neželjene blogove neukusnim komentarima i vezama do štetnih web stranica.

Postoji još mnogo razloga koji podržavaju integriranje provjere CAPTCHA u vaše web mjesto. To možete učiniti sa sljedećim kodom.

HTML CAPTCHA kod

HTML ili HyperText Markup Language opisuje strukturu web stranice. Upotrijebite sljedeći HTML kôd za strukturiranje obrasca za provjeru CAPTCHA:

Captcha Validator pomoću HTML-a, CSS-a i JavaScript-a



captcha tekst




Osvježiti

Ovaj se kod uglavnom sastoji od 7 elemenata:

• : Ovaj se element koristi za prikaz naslova obrasca CAPTCHA.
• : Ovaj se element koristi za prikaz CAPTCHA teksta.
• - Ovaj se element koristi za stvaranje okvira za unos za upisivanje CAPTCHA.
• : Ovaj gumb predaje obrazac i provjerava jesu li CAPTCHA i upisani tekst isti ili ne.
• : Ovaj se gumb koristi za osvježavanje CAPTCHA.
• : Ovaj se element koristi za prikaz rezultata prema unesenom tekstu.
• : Ovo je nadređeni element koji sadrži sve ostale elemente.

CSS i JavaScript datoteke povezane su na ovu HTML stranicu putem i elementi odnosno. Morate dodati veza oznaka unutar glava oznaka i skripta oznaka na kraju tijelo.

Također možete integrirati ovaj kôd sa postojećim oblicima vašeg web mjesta.

Povezano: HTML varalice: Oznake, atributi i još mnogo toga

CSS CAPTCHA kod

CSS ili Cascading Style Sheets koristi se za oblikovanje HTML elemenata. Upotrijebite sljedeći CSS kôd za oblikovanje gornjih HTML elemenata:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
tijelo {
boja pozadine: # 232331;
obitelj fontova: 'Roboto', sans-serif;
}
#captchaBackground {
visina: 200px;
širina: 250px;
boja pozadine: # 2d3748;
zaslon: flex;
align-items: sredina;
justify-content: centar;
flex-smjer: stupac;
}
#captchaHeading {
boja: bijela;
}
#captcha {
margin-bottom: 1em;
veličina fonta: 30px;
razmak između slova: 3 piksela;
boja: # 08e5ff;
}
.center {
zaslon: flex;
flex-smjer: stupac;
align-items: sredina;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
boja pozadine: # 08e5ff;
obrub: 0px;
font-weight: podebljano;
}
#refreshButton {
boja pozadine: # 08e5ff;
obrub: 0px;
font-weight: podebljano;
}
#textBox {
visina: 25px;
}
.incorrectCaptcha {
boja: # FF0000;
}
.correctCaptcha {
boja: # 7FFF00;
}

Dodajte ili uklonite CSS svojstva iz ovog koda prema vašim željama. Također možete dati elegantan izgled spremniku obrazaca pomoću CSS svojstvo okvira-sjena.

JavaScript CAPTCHA kôd

JavaScript koristi se za dodavanje funkcionalnosti inače statičnoj web stranici. Upotrijebite sljedeći kod za dodavanje cjelovite funkcionalnosti obrascu za provjeru CAPTCHA:

// document.querySelector () koristi se za odabir elementa iz dokumenta pomoću njegovog ID-a
neka captchaText = document.querySelector ('# captcha');
neka userText = document.querySelector ('# textBox');
neka submitButton = document.querySelector ('# submitButton');
neka je output = document.querySelector ('# output');
neka refreshButton = document.querySelector ('# refreshButton');
// alphaNums sadrži znakove pomoću kojih želite stvoriti CAPTCHA
neka 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'];
neka je emptyArr = [];
// Ova petlja generira slučajni niz od 7 znakova pomoću alphaNumsa
// Dalje se ovaj niz prikazuje kao CAPTCHA
za (neka je i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Slušatelj ovog događaja stimulira se kad god korisnik pritisne gumb "Enter"
// "Ispravno!" ili je poruka "Netočno, pokušajte ponovo"
// prikazuje se nakon provjere valjanosti ulaznog teksta pomoću CAPTCHA
userText.addEventListener ('keyup', funkcija (e) {
// Vrijednost ključnog koda gumba "Enter" je 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Ispravno!";
} ostalo {
output.classList.add ("netočnaCaptcha");
output.innerHTML = "Netočno, pokušajte ponovo";
}
}
});
// Slušatelj ovog događaja stimulira se kad god korisnik klikne na gumb "Pošalji"
// "Ispravno!" ili je poruka "Netočno, pokušajte ponovo"
// prikazuje se nakon provjere valjanosti ulaznog teksta pomoću CAPTCHA
submitButton.addEventListener ('klik', funkcija () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Ispravno!";
} ostalo {
output.classList.add ("netočnaCaptcha");
output.innerHTML = "Netočno, pokušajte ponovo";
}
});
// Slušatelj ovog događaja stimulira se kad god korisnik pritisne gumb "Osvježi"
// Novi slučajni CAPTCHA generira se i prikazuje nakon što korisnik klikne gumb "Osvježi"
refreshButton.addEventListener ('klik', funkcija () {
userText.value = "";
neka refreshArr = [];
za (neka j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Sada imate potpuno funkcionalan obrazac za provjeru CAPTCHA! Ako želite pogledati cijeli kôd, možete klonirati GitHub spremište ovog projekta CAPTCHA-Validator. Nakon kloniranja spremišta, izvršite HTML datoteku i dobit ćete sljedeći izlaz:

Kad u okvir za unos unesete ispravan CAPTCHA kôd, prikazat će se sljedeći izlaz:

Kada u okvir za unos unesete bilo koji pogrešan CAPTCHA kôd, prikazat će se sljedeći izlaz:

Učinite vašu web stranicu sigurnom pomoću CAPTCHA-a

U prošlosti su mnoge organizacije i tvrtke pretrpjele velike gubitke poput kršenja podataka, napada neželjene pošte itd. kao rezultat nepostojanja obrazaca CAPTCHA na njihovim web mjestima. Preporučuje se dodavanje CAPTCHA na vaše web mjesto, jer dodaje sigurnosni sloj koji sprječava internetske kriminalce.

Google je također pokrenuo besplatnu uslugu pod nazivom "reCAPTCHA" koja pomaže u zaštiti web stranica od neželjene pošte i zlouporabe. CAPTCHA i reCAPTCHA izgledaju slično, ali nisu posve iste stvari. Ponekad se CAPTCHA čini frustrirajućim i teško razumljivim za mnoge korisnike. Iako postoji važan razlog zašto im je teško.

Kako CAPTCHA djeluju i zašto su tako teški?

CAPTCHA i reCAPTCHA sprečavaju neželjenu poštu. Kako rade? I zašto smatrate da je CAPTCHA tako teško riješiti?

Pročitajte Dalje

O autoru