V dnešní době jsou CAPTCHA nedílnou součástí zabezpečení webových stránek. Miliony testů CAPTCHA jsou každý den dokončeny online.

Pokud jste na svém webu neimplementovali ověření CAPTCHA, mohlo by vám to způsobit velký problém a nastavit vás jako cíl pro spamery.

Zde je vše, co potřebujete vědět o CAPTCHA a jak je můžete snadno implementovat na svůj web pomocí HTML, CSS a JavaScript.

Co je CAPTCHA?

CAPTCHA je zkratka pro „Completely Automated Public Turing test to tell Computers and Humans Apart.“ Tento termín vytvořil v roce 2003 Luis von Ahn, Manuel Blum, Nicholas J. Hopper a John Langford. Jedná se o typ testu výzva-odpověď, který se používá k určení, zda je uživatel člověk nebo ne.

CAPTCHA přidávají zabezpečení webům tím, že poskytují výzvy, které jsou pro roboty obtížné, ale pro člověka relativně snadné. Například identifikace všech obrazů automobilu ze sady více obrazů je pro roboty obtížná, ale pro lidské oči dostatečně jednoduchá.

Myšlenka CAPTCHA pochází z Turingova testu. Turingův test je metoda k testování, zda stroj může myslet jako člověk, nebo ne. Zajímavé je, že test CAPTCHA lze nazvat „reverzním Turingovým testem“, protože v tomto případě počítač vytvoří test, který je výzvou pro člověka.

Proč váš web vyžaduje ověření CAPTCHA?

CAPTCHA se používají hlavně k zabránění robotům v automatickém odesílání formulářů se spamem a jiným škodlivým obsahem. Dokonce i společnosti jako Google to používají k tomu, aby zabránily spamu v jejich systému. Tady jsou některé z důvodů, proč je pro vaše webové stránky přínosem ověření CAPTCHA:

• CAPTCHA pomáhají zabránit hackerům a robotům ve spamování registračních systémů vytvářením falešných účtů. Pokud jim nebude zabráněno, mohou tyto účty použít k hanebným účelům.
• CAPTCHA mohou zakázat útoky hrubou silou z vašeho webu, které hackeři používají k pokusům o přihlášení pomocí tisíců hesel.
• CAPTCHA mohou omezit roboty v spamování sekce recenze poskytnutím falešných komentářů.
• CAPTCHA pomáhá při prevenci inflace lístků, protože někteří lidé kupují velké množství lístků za účelem dalšího prodeje. CAPTCHA může dokonce zabránit falešným registracím bezplatných událostí.
• CAPTCHA mohou omezit kybernetické podvodníky v spamování blogů pomocí pochybných komentářů a odkazů na škodlivé webové stránky.

Existuje mnoho dalších důvodů, které podporují integraci ověření CAPTCHA do vašeho webu. Můžete tak učinit pomocí následujícího kódu.

Kód HTML CAPTCHA

HTML neboli HyperText Markup Language popisuje strukturu webové stránky. Pomocí následujícího kódu HTML strukturujte svůj ověřovací formulář CAPTCHA:

Captcha Validator pomocí HTML, CSS a JavaScript



captcha text




Obnovit

Tento kód se skládá hlavně ze 7 prvků:

• : Tento prvek se používá k zobrazení záhlaví formuláře CAPTCHA.
• : Tento prvek se používá k zobrazení textu CAPTCHA.
• - Tento prvek se používá k vytvoření vstupního pole pro psaní CAPTCHA.
• : Toto tlačítko odešle formulář a zkontroluje, zda je CAPTCHA a zadaný text stejný nebo ne.
• : Toto tlačítko se používá k obnovení CAPTCHA.
• : Tento prvek se používá k zobrazení výstupu podle zadaného textu.
• : Toto je nadřazený prvek, který obsahuje všechny ostatní prvky.

Soubory CSS a JavaScript jsou propojeny s touto stránkou HTML prostřednictvím a prvků. Musíte přidat odkaz značka uvnitř hlava značka a skript značka na konci tělo.

Tento kód můžete také integrovat se stávajícími formami svého webu.

Příbuzný: Cheat Sheet the HTML Essentials: Tags, Attributes, and More

Kód CSS CAPTCHA

CSS neboli kaskádové šablony stylů se používají ke stylu prvků HTML. Pomocí následujícího kódu CSS upravte styl výše uvedených prvků HTML:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
tělo {
barva pozadí: # 232331;
rodina fontů: 'Roboto', sans-serif;
}
#captchaBackground {
výška: 200px;
šířka: 250px;
barva pozadí: # 2d3748;
displej: flex;
align-items: center;
justify-content: center;
směr flexu: sloupec;
}
#captchaHeading {
barva bílá;
}
#captcha {
margin-bottom: 1em;
velikost písma: 30px;
řádkování: 3px;
barva: # 08e5ff;
}
.center {
displej: flex;
směr flexu: sloupec;
align-items: center;
}
#submitButton {
horní okraj: 2em;
spodní okraj: 2em;
barva pozadí: # 08e5ff;
ohraničení: 0px;
váha písma: tučné;
}
#refreshButton {
barva pozadí: # 08e5ff;
ohraničení: 0px;
váha písma: tučné;
}
#Textové pole {
výška: 25px;
}
.nesprávná CAPTCHA {
barva: # FF0000;
}
.correctCaptcha {
barva: # 7FFF00;
}

Přidejte nebo odeberte vlastnosti CSS z tohoto kódu podle svých preferencí. Elegantní vzhled kontejneru formuláře můžete také dát pomocí Vlastnost CSS box-shadow.

Kód CAPTCHA JavaScriptu

JavaScript se používá k přidání funkčnosti na jinak statickou webovou stránku. Pomocí následujícího kódu přidejte do ověřovacího formuláře CAPTCHA úplnou funkčnost:

// document.querySelector () se používá k výběru prvku z dokumentu pomocí jeho ID
let captchaText = document.querySelector ('# captcha');
let userText = document.querySelector ('# textBox');
let submitButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# output');
let refreshButton = document.querySelector ('# refreshButton');
// alphaNums obsahuje znaky, se kterými chcete vytvořit 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'];
let emptyArr = [];
// Tato smyčka generuje náhodný řetězec 7 znaků pomocí alphaNums
// Dále je tento řetězec zobrazen jako CAPTCHA
pro (ať i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Tento posluchač událostí je stimulován, kdykoli uživatel stiskne tlačítko „Enter“
// "Správně!" nebo zpráva „Nesprávně, zkuste to znovu“ je
// zobrazí se po ověření vstupního textu pomocí CAPTCHA
userText.addEventListener ('keyup', funkce (e) {
// Hodnota kódu klíče tlačítka „Enter“ je 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Správně!";
} else {
output.classList.add ("nesprávnáCaptcha");
output.innerHTML = "Nesprávně, zkuste to prosím znovu";
}
}
});
// Tento posluchač událostí je stimulován, kdykoli uživatel klikne na tlačítko „Odeslat“
// "Správně!" nebo zpráva „Nesprávně, zkuste to znovu“ je
// zobrazí se po ověření vstupního textu pomocí CAPTCHA
submitButton.addEventListener ('click', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Správně!";
} else {
output.classList.add ("nesprávnáCaptcha");
output.innerHTML = "Nesprávně, zkuste to prosím znovu";
}
});
// Tento posluchač událostí je stimulován, kdykoli uživatel stiskne tlačítko „Obnovit“
// Nová náhodná CAPTCHA je generována a zobrazena poté, co uživatel klikne na tlačítko „Obnovit“
refreshButton.addEventListener ('click', function () {
userText.value = "";
let refreshArr = [];
pro (nechť j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Nyní máte plně funkční ověřovací formulář CAPTCHA! Pokud se chcete podívat na celý kód, můžete klonovat Úložiště GitHub tohoto projektu CAPTCHA-Validator. Po klonování úložiště proveďte soubor HTML a získáte následující výstup:

Když do vstupního pole zadáte správný kód CAPTCHA, zobrazí se následující výstup:

Když do vstupního pole zadáte nesprávný kód CAPTCHA, zobrazí se následující výstup:

Zajistěte svůj web zabezpečený pomocí CAPTCHA

V minulosti mnoho organizací a podniků utrpělo těžké ztráty, jako jsou narušení dat, spamové útoky atd. v důsledku toho, že na svých webových stránkách nemají formuláře CAPTCHA. Důrazně se doporučuje přidat na web CAPTCHA, protože přidává vrstvu zabezpečení, která zabrání kyberzločincům.

Google také spustil bezplatnou službu nazvanou „reCAPTCHA“, která pomáhá chránit webové stránky před spamem a zneužitím. CAPTCHA a reCAPTCHA vypadají podobně, ale nejsou to úplně to samé. Někdy se CAPTCHA cítí pro mnoho uživatelů frustrující a obtížně srozumitelné. I když existuje důležitý důvod, proč se stávají obtížnými.

Jak CAPTCHA fungují a proč jsou tak obtížné?

CAPTCHA a reCAPTCHA zabraňují spamu. Jak fungují? A proč je podle vás CAPTCHA tak těžké vyřešit?

Přečtěte si další

O autorovi