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

Pokud jste na svůj web neimplementovali validaci CAPTCHA, mohlo by to pro vás způsobit velký problém a nastavit vás jako cíl spammerů.

---

---

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řili v roce 2003 Luis von Ahn, Manuel Blum, Nicholas J. Hopper a John Langford. Je to typ testu reakce na výzvu, který se používá k určení, zda je uživatel člověk nebo ne.

CAPTCHA přidávají zabezpečení webů poskytováním výzev, které jsou pro roboty obtížné, ale pro lidi relativně snadné. Například identifikace všech obrázků automobilu ze sady několika obrázků 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, která testuje, zda stroj může uvažovat jako člověk nebo ne. Je zajímavé, že test CAPTCHA lze nazvat „reverzní Turingův test“, protože v tomto případě počítač vytvoří test, který je výzvou pro lidi.

Proč váš web potřebuje 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 jej používají k tomu, aby zabránily svému systému před spamovými útoky. Zde jsou některé z důvodů, proč vaše webové stránky mohou těžit z ověřování 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 není zabráněno, mohou tyto účty použít k hanebným účelům.
• CAPTCHA mohou zakázat útoky z vašeho webu hrubou silou, které hackeři používají k pokusu o přihlášení pomocí tisíců hesel.
• CAPTCHA mohou omezit roboty ve spamování sekce recenzí poskytováním falešných komentářů.
• CAPTCHA pomáhají předcházet inflaci vstupenek, protože někteří lidé kupují velký počet 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 ve spamování blogů pomocí riskantních komentářů a odkazů na škodlivé webové stránky.

Existuje mnoho dalších důvodů, které podporují integraci ověřování CAPTCHA na váš web. Můžete to provést pomocí následujícího kódu.

jak nainstalovat kodi na raspbian

HTML CAPTCHA kód

HTML nebo HyperText Markup Language popisuje strukturu webové stránky. K strukturování ověřovacího formuláře CAPTCHA použijte následující kód HTML:

---

---










captcha text



Refresh








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

• : Tento prvek se používá k zobrazení nadpisu formuláře CAPTCHA.

• : Tento prvek slouží 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 jsou CAPTCHA a zadaný text stejné nebo ne.
• : Toto tlačítko slouží k aktualizaci CAPTCHA.
• : Tento prvek slouží 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 souboru a prvky resp. Musíte přidat odkaz štítek uvnitř hlava tag a skript tag na konci tělo .

Tento kód můžete také integrovat do stávajících forem vašeho webu.

Příbuzný: Cheat Sheet HTML Essentials: Značky, atributy a další

CSS CAPTCHA kód

CSS nebo kaskádové styly se používají ke stylování prvků HTML. Pomocí následujícího kódu CSS stylizujte výše uvedené prvky HTML:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 220px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
height: 80%;
width: 80%;
font-size: 30px;
letter-spacing: 3px;
margin: auto;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}

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

JavaScript CAPTCHA kód

JavaScript slouží k přidání funkcí na jinak statickou webovou stránku. Pomocí následujícího kódu přidejte do ověřovacího formuláře CAPTCHA kompletní funkce:

// document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
var ctx = captchaText.getContext('2d');
ctx.font = '30px Roboto';
ctx.fillStyle = '#08e5ff';

let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');

// alphaNums contains the characters with which you want to create the CAPTCHA
let 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 = [];
// This loop generates a random string of 7 characters using alphaNums
// Further this string is displayed as a CAPTCHA
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
var c = emptyArr.join('');
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);

// This event listener is stimulated whenever the user press the 'Enter' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
userText.addEventListener('keyup', function(e) {
// Key Code Value of 'Enter' Button is 13
if (e.keyCode === 13) {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
}
});
// This event listener is stimulated whenever the user clicks the 'Submit' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
submitButton.addEventListener('click', function() {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
});
// This event listener is stimulated whenever the user press the 'Refresh' button
// A new random CAPTCHA is generated and displayed after the user clicks the 'Refresh' button
refreshButton.addEventListener('click', function() {
userText.value = '';
let refreshArr = [];
for (let j = 1; j <= 7; j++) {
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
c = refreshArr.join('');
ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
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ě spusťte soubor HTML a získáte následující výstup:

jakou hru mám hrát vývojový diagram

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 bezpečně pomocí CAPTCHA

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

Google také spustil bezplatnou službu s názvem „reCAPTCHA“, která pomáhá chránit webové stránky před spamem a zneužíváním. CAPTCHA a reCAPTCHA vypadají podobně, ale nejsou úplně stejné. Někdy jsou CAPTCHA pro mnoho uživatelů frustrující a obtížně pochopitelné. Ačkoli existuje závažný důvod, proč jsou obtížné.

Podíl Podíl tweet E-mailem Jak fungují CAPTCHA a proč jsou tak obtížné?

CAPTCHA a reCAPTCHA zabraňují spamu. Jak fungují? A proč považujete CAPTCHA za tak těžké vyřešit?

Číst dále Související témata

• Programování
• HTML
• JavaScript
• CSS

O autorovi Yuvraj Chandra(60 článků zveřejněno)

Yuvraj je studentem informatiky na univerzitě v Dillí v Indii. Je nadšený pro webový vývoj Full Stack. Když nepíše, zkoumá hloubku různých technologií.

Více od Yuvraj Chandra

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru