V súčasnosti sú CAPTCHA neoddeliteľnou súčasťou bezpečnosti webových stránok. Milióny testov CAPTCHA sa každý deň dokončia online.

Ak ste na svojom webe neimplementovali overenie CAPTCHA, mohlo by vám to spôsobiť veľký problém, pretože by ste sa nastavili ako cieľ pre spamerov.

Tu je všetko, čo potrebujete vedieť o CAPTCHA a o tom, ako ich môžete ľahko implementovať na svoje webové stránky pomocou HTML, CSS a JavaScript.

Čo je CAPTCHA?

CAPTCHA je skratka pre „Completely Automated Public Turing test to tell Computers and Humans Apart“. Tento termín zaviedli v roku 2003 Luis von Ahn, Manuel Blum, Nicholas J. Hopper a John Langford. Je to typ testu výzva-odpoveď, ktorý sa používa na zistenie, či je používateľ človek alebo nie.

CAPTCHA pridávajú webovým serverom zabezpečenie tým, že poskytujú výzvy, ktoré sú pre robotov náročné, ale pre ľudí relatívne ľahké. Napríklad identifikácia všetkých snímok automobilu zo súboru viacerých snímok je pre robotov náročná, ale pre ľudské oči dostatočne jednoduchá.

Myšlienka CAPTCHA pochádza z Turingovho testu. Turingov test je metóda na testovanie, či stroj môže myslieť ako človek, alebo nie. Je zaujímavé, že test CAPTCHA možno nazvať „reverzným Turingovým testom“, pretože v tomto prípade počítač vytvorí test, ktorý je výzvou pre ľudí.

Prečo váš web vyžaduje overenie CAPTCHA?

CAPTCHA sa používajú hlavne na zabránenie robotom v automatickom odosielaní formulárov so spamom a iným škodlivým obsahom. Dokonca aj spoločnosti ako Google ho používajú na to, aby zabránili spamovaniu svojich systémov. Tu sú niektoré z dôvodov, prečo má váš web výhody z overenia CAPTCHA:

• CAPTCHA pomáhajú zabrániť hackerom a robotom v spamovaní registračných systémov vytváraním falošných účtov. Ak im nebude zabránené, môžu tieto účty použiť na nekalé účely.
• CAPTCHA môžu zakázať útoky hrubou silou na prihlásenie z vášho webu, ktoré hackeri používajú na prihlásenie pomocou tisícov hesiel.
• CAPTCHA môžu falošnými komentármi zabrániť robotom v spamovaní sekcie kontroly.
• CAPTCHA pomáha predchádzať inflácii lístkov, pretože niektorí ľudia kupujú veľké množstvo lístkov na ďalší predaj. CAPTCHA môže dokonca zabrániť falošným registráciám bezplatných udalostí.
• CAPTCHA môžu obmedziť kybernetických podvodníkov v spamovaní blogov pomocou pochybných komentárov a odkazov na škodlivé webové stránky.

Existuje mnoho ďalších dôvodov, ktoré podporujú integráciu overenia CAPTCHA do vášho webu. Môžete to urobiť pomocou nasledujúceho kódu.

Kód HTML CAPTCHA

HTML alebo HyperText Markup Language popisuje štruktúru webovej stránky. Na štruktúrovanie svojho overovacieho formulára CAPTCHA použite nasledujúci kód HTML:

Captcha Validator pomocou HTML, CSS a JavaScript



captcha text




Obnoviť

Tento kód sa skladá hlavne zo 7 prvkov:

• : Tento prvok sa používa na zobrazenie záhlavia formulára CAPTCHA.
• : Tento prvok sa používa na zobrazenie textu CAPTCHA.
• - Tento prvok sa používa na vytvorenie vstupného poľa na napísanie obrázka CAPTCHA.
• : Toto tlačidlo odošle formulár a skontroluje, či sú obrázky CAPTCHA a zadaný text rovnaké alebo nie.
• : Toto tlačidlo sa používa na obnovenie obrázka CAPTCHA.
• : Tento prvok sa používa na zobrazenie výstupu podľa zadaného textu.
• : Toto je nadradený prvok, ktorý obsahuje všetky ostatné prvky.

Súbory CSS a JavaScript sú prepojené s touto stránkou HTML prostredníctvom servera a prvkov resp. Musíte pridať odkaz značka vo vnútri hlava značka a scenár značka na konci telo.

Tento kód môžete tiež integrovať s existujúcimi formami svojich webových stránok.

Súvisiace: Cheat Sheet the HTML Essentials: Tags, Attributes, and More

Kód CSS CAPTCHA

CSS alebo kaskádové štýly sa používajú na štýl prvkov HTML. Na štýlovanie vyššie uvedených prvkov HTML použite nasledujúci kód CSS:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
telo {
farba pozadia: # 232331;
rodina fontov: 'Roboto', sans-serif;
}
#captchaBackground {
výška: 200px;
šírka: 250px;
farba pozadia: # 2d3748;
displej: flex;
align-items: center;
justify-content: center;
smer ohybu: stĺp;
}
#captchaHeading {
farba: biela;
}
#captcha {
spodný okraj: 1em;
veľkosť písma: 30px;
medzery medzi písmenami: 3px;
farba: # 08e5ff;
}
.center {
displej: flex;
smer ohybu: stĺp;
align-items: center;
}
#submitButton {
okraj hore: 2em;
spodný okraj: 2em;
farba pozadia: # 08e5ff;
orámovanie: 0px;
váha písma: tučné;
}
#refreshButton {
farba pozadia: # 08e5ff;
orámovanie: 0px;
váha písma: tučné;
}
#Textové pole {
výška: 25px;
}
.nesprávný kontrolný kód {
farba: # FF0000;
}
.correctCaptcha {
farba: # 7FFF00;
}

Pridajte alebo odstráňte vlastnosti CSS z tohto kódu podľa svojich preferencií. Elegantný vzhľad kontajnera na formulár môžete dať aj pomocou Vlastnosť CSS box-shadow.

Kód CAPTCHA v jazyku JavaScript

JavaScript sa používa na pridanie funkčnosti na inak statickú webovú stránku. Pomocou nasledujúceho kódu môžete do overovacieho formulára CAPTCHA pridať všetky funkcie:

// document.querySelector () slúži na výber prvku z dokumentu pomocou jeho ID
nechajte captchaText = document.querySelector ('# captcha');
nechajte userText = document.querySelector ('# textBox');
nechajte submitButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# output');
let refreshButton = document.querySelector ('# refreshButton');
// alphaNums obsahuje znaky, pomocou ktorých chcete vytvoriť CAPTCHA
nech 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'];
nech emptyArr = [];
// Táto slučka generuje náhodný reťazec 7 znakov pomocou alphaNums
// Ďalej sa tento reťazec zobrazuje ako CAPTCHA
pre (nech i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Tento poslucháč udalostí je stimulovaný vždy, keď používateľ stlačí tlačidlo „Enter“
// „Správne!“ alebo správa „Nesprávne, skúste to znova“
// zobrazí sa po overení vstupného textu pomocou CAPTCHA
userText.addEventListener ('keyup', function (e) {
// Hodnota kódu kľúča pre tlačidlo „Enter“ je 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Správne!";
} else {
output.classList.add ("nesprávnaCaptcha");
output.innerHTML = "Nesprávne, skúste to znova";
}
}
});
// Tento poslucháč udalostí je stimulovaný vždy, keď používateľ klikne na tlačidlo „Odoslať“
// „Správne!“ alebo správa „Nesprávne, skúste to znova“
// zobrazí sa po overení vstupného textu pomocou CAPTCHA
submitButton.addEventListener ('click', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Správne!";
} else {
output.classList.add ("nesprávnaCaptcha");
output.innerHTML = "Nesprávne, skúste to znova";
}
});
// Tento poslucháč udalostí je stimulovaný vždy, keď používateľ stlačí tlačidlo „Obnoviť“
// Nový náhodný obrázok CAPTCHA je vygenerovaný a zobrazený po kliknutí používateľa na tlačidlo „Obnoviť“
refreshButton.addEventListener ('click', function () {
userText.value = "";
nech refreshArr = [];
pre (nech j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Teraz máte plne funkčný overovací formulár CAPTCHA! Ak sa chcete pozrieť na celý kód, môžete klonovať kód Úložisko GitHub tohto projektu CAPTCHA-Validator. Po klonovaní úložiska vykonajte súbor HTML a získate nasledujúci výstup:

Keď do vstupného poľa zadáte správny kód CAPTCHA, zobrazí sa nasledujúci výstup:

Keď do vstupného poľa zadáte nesprávny kód CAPTCHA, zobrazí sa nasledujúci výstup:

Zabezpečte svoj web pomocou CAPTCHA

V minulosti mnoho organizácií a firiem utrpelo veľké straty, ako napríklad narušenie údajov, spamové útoky atď. v dôsledku toho, že na svojich webových stránkach nemajú formuláre CAPTCHA. Dôrazne sa odporúča pridať na web CAPTCHA, pretože pridáva vrstvu zabezpečenia, ktorá zabráni kybernetickým zločincom.

Google tiež uviedol na trh bezplatnú službu s názvom „reCAPTCHA“, ktorá pomáha chrániť webové stránky pred spamom a zneužitím. CAPTCHA a reCAPTCHA sa zdajú podobné, ale nie sú to úplne to isté. Niekedy sú CAPTCHA pre mnohých používateľov frustrujúce a ťažko pochopiteľné. Existuje však dôležitý dôvod, prečo sú vyrobené tak, aby boli náročné.

Ako fungujú CAPTCHA a prečo sú také zložité?

CAPTCHA a reCAPTCHA zabraňujú spamu. Ako fungujú? A prečo je podľa teba také ťažké vyriešiť CAPTCHA?

Prečítajte si Ďalej

O autorovi