Danes so CAPTCHA sestavni del varnosti spletnih strani. Vsak dan se na spletu opravi na milijone testov CAPTCHA.

Če na svojem spletnem mestu niste uveljavili validacije CAPTCHA, bi vam to lahko ustvarilo veliko težavo in vas postavilo za tarčo pošiljateljev neželene pošte.

Tukaj je vse, kar morate vedeti o CAPTCHA-jih in kako jih lahko preprosto uporabite na svojem spletnem mestu z uporabo HTML, CSS in JavaScript.

Kaj je CAPTCHA?

CAPTCHA pomeni "Popolnoma avtomatiziran javni Turingov test, ki bo računalnike in ljudi ločil." Ta izraz so leta 2003 ustvarili Luis von Ahn, Manuel Blum, Nicholas J. Hopper in John Langford. To je vrsta preizkusa izziv-odziv, ki se uporablja za ugotavljanje, ali je uporabnik človek ali ne.

CAPTCHA dodajajo varnost spletnim mestom, saj zagotavljajo izzive, ki jih boti težko izvedejo, a sorazmerno enostavni za ljudi. Na primer, prepoznavanje vseh slik avtomobila iz niza več slik je za bote težko, a dovolj preprosto za človeške oči.

Ideja CAPTCHA izvira iz Turingovega testa. Turingov test je metoda, s katero lahko preizkusite, ali lahko stroj razmišlja kot človek ali ne. Zanimivo je, da lahko test CAPTCHA imenujemo "obratni Turingov test", saj v tem primeru računalnik ustvari test, ki izziva ljudi.

Zakaj vaše spletno mesto potrebuje potrditev CAPTCHA?

CAPTCHA se v glavnem uporabljajo za preprečevanje, da boti samodejno pošiljajo obrazce z neželeno in drugo škodljivo vsebino. Tudi podjetja, kot je Google, ga uporabljajo za preprečevanje neželenih napadov v svojem sistemu. Tu je nekaj razlogov, zakaj ima vaše spletno mesto koristi od validacije CAPTCHA:

• CAPTCHA pomagajo preprečiti hekerjem in botom, da neželene elektronske pošte registrirajo z ustvarjanjem lažnih računov. Če jim ni preprečeno, lahko te račune uporabijo za podle namene.
• CAPTCHA lahko prepovedo napade z brutalno silo za prijavo z vašega spletnega mesta, ki jih hekerji uporabljajo za poskus prijave s tisoči gesel.
• CAPTCHA lahko robotom preprečijo pošiljanje neželene pošte v odsek za pregled z zagotavljanjem lažnih komentarjev.
• CAPTCHA pomagajo pri preprečevanju inflacije vstopnic, saj nekateri kupujejo veliko število vstopnic za preprodajo. CAPTCHA lahko celo prepreči lažne registracije na brezplačne dogodke.
• CAPTCHA lahko spletnim prevarantom omejijo pošiljanje neželenih spletnih dnevnikov z dody komentarji in povezavami do škodljivih spletnih mest.

Razlogov, ki podpirajo vključitev validacije CAPTCHA v vaše spletno mesto, je še veliko. To lahko storite z naslednjo kodo.

Koda HTML CAPTCHA

HTML ali označevalni jezik HyperText opisuje strukturo spletne strani. Za oblikovanje obrazca za preverjanje CAPTCHA uporabite naslednjo kodo HTML:

Captcha Validator z uporabo HTML, CSS in JavaScript



besedilo captcha




Osveži

Ta koda je v glavnem sestavljena iz 7 elementov:

• : Ta element se uporablja za prikaz naslova obrazca CAPTCHA.
• : Ta element se uporablja za prikaz besedila CAPTCHA.
• - Ta element se uporablja za ustvarjanje vnosnega polja za vnos CAPTCHA.
• : Ta gumb odda obrazec in preveri, ali sta CAPTCHA in vtipkano besedilo enaka ali ne.
• : Ta gumb se uporablja za osvežitev CAPTCHA.
• : Ta element se uporablja za prikaz izhodnih podatkov glede na vneseno besedilo.
• : To je nadrejeni element, ki vsebuje vse ostale elemente.

Datoteke CSS in JavaScript so povezane s to stranjo HTML prek in elementov. Dodati morate povezava oznaka znotraj glavo oznaka in scenarij oznaka na koncu telo.

To kodo lahko integrirate tudi z obstoječimi obrazci vašega spletnega mesta.

Sorodno: Vpogled v HTML Essentials: Oznake, atributi in še več

Koda CSS CAPTCHA

CSS ali Cascading Style Sheets se uporablja za oblikovanje elementov HTML. Za oblikovanje zgornjih elementov HTML uporabite naslednjo kodo CSS:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
telo {
barva ozadja: # 232331;
družina pisav: 'Roboto', sans-serif;
}
#captchaBackground {
višina: 200px;
širina: 250px;
barva ozadja: # 2d3748;
zaslon: flex;
align-items: center;
justify-content: center;
smer upogiba: stolpec;
}
#captchaHeading {
barva: bela;
}
#captcha {
margin-bottom: 1em;
velikost pisave: 30 slikovnih pik;
razmik med črkami: 3 slikovne pike;
barva: # 08e5ff;
}
.center {
zaslon: flex;
smer upogiba: stolpec;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
barva ozadja: # 08e5ff;
obroba: 0px;
teža pisave: krepko;
}
#refreshButton {
barva ozadja: # 08e5ff;
obroba: 0px;
teža pisave: krepko;
}
#textBox {
višina: 25px;
}
.incorrectCaptcha {
barva: # FF0000;
}
.correctCaptcha {
barva: # 7FFF00;
}

V to kodo dodajte ali odstranite lastnosti CSS v skladu s svojimi željami. Vsebniku obrazca lahko tudi dodate eleganten videz z uporabo Lastnost CSS box-shadow.

Koda JavaScript CAPTCHA

JavaScript se uporablja za dodajanje funkcionalnosti sicer statični spletni strani. Uporabite naslednjo kodo, da v obrazec za preverjanje CAPTCHA dodate popolno funkcionalnost:

// document.querySelector () se uporablja za izbiro elementa iz dokumenta z uporabo njegovega ID-ja
naj captchaText = document.querySelector ('# captcha');
naj userText = document.querySelector ('# textBox');
naj submitButton = document.querySelector ('# submitButton');
naj output = document.querySelector ('# output');
naj refreshButton = document.querySelector ('# refreshButton');
// alphaNums vsebuje znake, s katerimi želite ustvariti CAPTCHA
naj 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'];
pusti emptyArr = [];
// Ta zanka ustvari naključni niz 7 znakov z uporabo alphaNums
// Nadalje je ta niz prikazan kot CAPTCHA
za (naj je i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Ta poslušalec dogodka se spodbudi vsakič, ko uporabnik pritisne gumb "Enter"
// "Pravilno!" ali sporočilo »Napačno, poskusite znova« je
// prikazano po potrditvi vhodnega besedila s CAPTCHA
userText.addEventListener ('keyup', funkcija (e) {
// Vrednost ključne kode gumba "Enter" je 13
če (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Pravilno!";
} še {
output.classList.add ("wrongCaptcha");
output.innerHTML = "Napačno, poskusite znova";
}
}
});
// Ta poslušalec dogodka se spodbudi vsakič, ko uporabnik klikne gumb "Pošlji"
// "Pravilno!" ali sporočilo »Napačno, poskusite znova« je
// prikazano po potrditvi vhodnega besedila s CAPTCHA
submitButton.addEventListener ('klik', funkcija () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Pravilno!";
} še {
output.classList.add ("wrongCaptcha");
output.innerHTML = "Napačno, poskusite znova";
}
});
// Ta poslušalec dogodka je stimuliran vsakič, ko uporabnik pritisne gumb "Osveži"
// Nov naključni CAPTCHA se ustvari in prikaže po tem, ko uporabnik klikne gumb "Osveži"
refreshButton.addEventListener ('klik', funkcija () {
userText.value = "";
naj refreshArr = [];
za (naj bo j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Zdaj imate popolnoma delujoč obrazec za preverjanje CAPTCHA! Če si želite ogledati celotno kodo, lahko klonirate Repozitorij GitHub tega projekta CAPTCHA-Validator. Po kloniranju repozitorija zaženite datoteko HTML in dobili boste naslednji izhod:

Ko v polje za vnos vnesete pravilno kodo CAPTCHA, se prikaže naslednji izhod:

Ko v polje za vnos vnesete napačno kodo CAPTCHA, se prikaže naslednji izhod:

Naj bo vaše spletno mesto varno s CAPTCHA-ji

V preteklosti so številne organizacije in podjetja utrpele velike izgube, kot so kršitve podatkov, napadi neželene pošte itd. zaradi tega, ker na svojih spletnih straneh nimajo obrazcev CAPTCHA. Zelo priporočljivo je, da na svoje spletno mesto dodate CAPTCHA, saj dodaja zaščitni sloj, ki spletnemu mestu preprečuje kiber kriminalce.

Google je prav tako uvedel brezplačno storitev, imenovano "reCAPTCHA", ki pomaga zaščititi spletna mesta pred neželeno pošto in zlorabo. CAPTCHA in reCAPTCHA se zdita podobna, vendar nista povsem isti stvari. Včasih so CAPTCHE za mnoge uporabnike frustrirajoče in težko razumljive. Kljub temu obstaja pomemben razlog, zakaj jim je to težko.

Kako delujejo CAPTCHA in zakaj so tako težki?

CAPTCHA in reCAPTCHA preprečujejo neželeno pošto. Kako delujejo? In zakaj se vam zdijo CAPTCHA tako težko rešiti?

Preberite Naprej

O avtorju