Manapság a CAPTCHA szerves részét képezi a weboldal biztonságának. Naponta több millió CAPTCHA tesztet töltenek ki online.

Ha még nem hajtotta végre a CAPTCHA-ellenőrzést a webhelyén, az nagy problémát okozhat Önnek, és a spammerek célpontjává teheti.

Itt található minden, amit tudnia kell a CAPTCHA-król, és arról, hogyan könnyedén megvalósíthatja azokat a webhelyén HTML, CSS és JavaScript használatával.

Mi az a CAPTCHA?

A CAPTCHA jelentése: "Teljesen automatizált nyilvános turing-teszt, hogy elmondja a számítógépeknek és az embereknek". Ezt a kifejezést 2003-ban Luis von Ahn, Manuel Blum, Nicholas J. alkotta meg. Hopper és John Langford. Ez egyfajta kihívás-válasz teszt, amelyet arra használnak, hogy meghatározzák, hogy a felhasználó emberi-e vagy sem.

A CAPTCHA-k biztonságot nyújtanak a weboldalak számára azáltal, hogy olyan kihívásokat kínálnak, amelyeket a robotok nehezen tudnak végrehajtani, de az emberek számára viszonylag könnyű. Például egy autó összes képének azonosítása több kép halmazából botok számára nehéz, de emberi szem számára elég egyszerű.

A CAPTCHA ötlete a Turing-tesztből származik. A Turing-teszt egy módszer annak tesztelésére, hogy tud-e egy gép emberként gondolkodni, vagy sem. Érdekes módon a CAPTCHA tesztet fordított Turing tesztnek is nevezhetjük, mivel ebben az esetben a számítógép létrehozza az embert kihívó tesztet.

Miért van szüksége webhelyének CAPTCHA-hitelesítésre?

A CAPTCHA-kat elsősorban arra használják, hogy megakadályozzák a botokat abban, hogy automatikusan küldjenek űrlapokat spamekkel és más káros tartalommal. Még a Google-hoz hasonló cégek is használják, hogy megakadályozzák rendszerük spam támadásait. Az alábbiakban felsoroljuk azokat az okokat, amelyek miatt a webhely előnyeit élvezheti a CAPTCHA-ellenőrzés:

• A CAPTCHA-k hamis számlák létrehozásával segítenek megakadályozni, hogy a hackerek és a robotok spammeljék a regisztrációs rendszereket. Ha nem akadályozzák meg őket, aljas célokra használhatják ezeket a fiókokat.
• A CAPTCHA-k megtilthatják a weblapodról a brute force bejelentkezési támadásokat, amelyeket a hackerek több ezer jelszó segítségével próbálnak meg bejelentkezni.
• A CAPTCHA-k hamis megjegyzésekkel korlátozhatják a botokat abban, hogy spameljék az ellenőrzési részt.
• A CAPTCHA segítséget nyújt a jegyinfláció megakadályozásában, mivel egyesek nagyszámú jegyet vásárolnak viszonteladás céljából. A CAPTCHA akár megakadályozhatja az ingyenes események hamis regisztrációit is.
• A CAPTCHA-k korlátozhatják a számítógépes szélhámosokat abban, hogy blogokat spammerjenek megdöbbentő megjegyzésekkel és káros webhelyekre mutató linkekkel.

Sokkal több oka van annak, ami támogatja a CAPTCHA érvényesítés integrálását a webhelyére. Ezt a következő kóddal teheti meg.

HTML CAPTCHA kód

A HTML vagy a HyperText Markup Language leírja a weboldal felépítését. Használja a következő HTML-kódot a CAPTCHA érvényesítési űrlap felépítéséhez:

Captcha Validator HTML, CSS és JavaScript használatával



captcha szöveg




Frissítés

Ez a kód főleg 7 elemből áll:

• : Ez az elem a CAPTCHA űrlap címsorának megjelenítésére szolgál.
• : Ez az elem a CAPTCHA szöveg megjelenítésére szolgál.
• - Ezt az elemet használják a CAPTCHA beírására szolgáló beviteli mező létrehozására.
• : Ez a gomb elküldi az űrlapot, és ellenőrzi, hogy a CAPTCHA és a beírt szöveg megegyezik-e vagy sem.
• : Ez a gomb a CAPTCHA frissítésére szolgál.
• : Ez az elem a kimenet megjelenítésére szolgál a beírt szöveg szerint.
• : Ez a szülőelem, amely az összes többi elemet tartalmazza.

A CSS és a JavaScript fájlok ehhez a HTML oldalhoz vannak kapcsolva a és elemek ill. Hozzá kell adnia a link címke a fej tag és forgatókönyv címke a test.

Ezt a kódot integrálhatja webhelye meglévő formáival is.

Összefüggő: A HTML Essentials csalólap: Címkék, attribútumok és egyebek

CSS CAPTCHA kód

A CSS-t vagy a Cascading Style Sheets-et használják a HTML-elemek stílusának megtervezéséhez. Használja a következő CSS kódot a fenti HTML elemek stílusához:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
háttérszín: # 232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
magasság: 200px;
szélesség: 250px;
háttérszín: # 2d3748;
kijelző: flex;
igazító elemek: közép;
igazol-tartalom: központ;
hajlítási irány: oszlop;
}
#captchaHeading {
fehér szín;
}
#captcha {
margin-bottom: 1em;
betűméret: 30 képpont;
levélköz: 3 képpont;
szín: # 08e5ff;
}
.center {
kijelző: flex;
hajlítási irány: oszlop;
igazító elemek: közép;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
háttérszín: # 08e5ff;
határ: 0px;
betű súlya: félkövér;
}
#refreshButton {
háttérszín: # 08e5ff;
határ: 0px;
betű súlya: félkövér;
}
#szövegdoboz {
magasság: 25px;
}
.helytelen CAPTCHA {
szín: # FF0000;
}
.correctCaptcha {
szín: # 7FFF00;
}

Adja hozzá vagy távolítsa el a CSS tulajdonságokat ebből a kódból az Ön igényei szerint. A űrlaptartályhoz elegáns megjelenést is adhat a CSS box-shadow tulajdonság.

JavaScript CAPTCHA kód

JavaScript a funkcionalitás hozzáadására szolgál egy egyébként statikus weboldalhoz. Használja a következő kódot a teljes funkcionalitás hozzáadásához a CAPTCHA érvényesítési űrlaphoz:

// document.querySelector () arra szolgál, hogy kiválasszon egy elemet a dokumentumból az azonosítója segítségével
let captchaText = document.querySelector ('# captcha');
hagyja userText = document.querySelector ('# textBox');
hagyja beküldeniButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# output');
let refreshButton = document.querySelector ('# refreshButton');
A // alphaNums azokat a karaktereket tartalmazza, amelyekkel létre akarja hozni a CAPTCHA-t
legyen 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'];
hagyjuk üresArr = [];
// Ez a hurok 7 karakterből álló véletlenszerű karakterláncot generál az alphaNums segítségével
// Továbbá ez a karakterlánc CAPTCHA néven jelenik meg
for (legyen i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Ezt az eseményfigyelőt mindig ösztönözzük, amikor a felhasználó megnyomja az "Enter" gombot
// "Helyes!" vagy "Helytelen, próbálkozzon újra" üzenet
// megjelenik a bevitt szöveg CAPTCHA-val történő érvényesítése után
userText.addEventListener ('keyup', function (e) {
// Az "Enter" gomb kulcskódja 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Helyes!";
} más {
output.classList.add ("correctCaptcha");
output.innerHTML = "Helytelen, próbálkozzon újra";
}
}
});
// Ezt az eseményfigyelőt mindig ösztönözzük, amikor a felhasználó a "Küldés" gombra kattint
// "Helyes!" vagy "Helytelen, próbálkozzon újra" üzenet
// megjelenik a bevitt szöveg CAPTCHA-val történő érvényesítése után
submitButton.addEventListener ('kattintás', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Helyes!";
} más {
output.classList.add ("correctCaptcha");
output.innerHTML = "Helytelen, próbálkozzon újra";
}
});
// Ezt az eseményfigyelőt mindig ösztönözzük, amikor a felhasználó megnyomja a "Frissítés" gombot
// Új véletlenszerű CAPTCHA jön létre és jelenik meg, miután a felhasználó rákattint a "Frissítés" gombra
refreshButton.addEventListener ('kattintás', function () {
userText.value = "";
hagyjuk frissíteniArr = [];
for (legyen j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Most egy teljesen működőképes CAPTCHA ellenőrzési űrlappal rendelkezik! Ha meg szeretné tekinteni a teljes kódot, klónozhatja a A CAPTCHA-Validator projekt GitHub-tárháza. A tároló klónozása után hajtsa végre a HTML fájlt, és a következő kimenetet kapja:

Amikor a helyes CAPTCHA kódot írja be a beviteli mezőbe, a következő kimenet jelenik meg:

Ha helytelen CAPTCHA kódot ír be a beviteli mezőbe, a következő kimenet jelenik meg:

Tegye biztonságossá webhelyét a CAPTCHA-kkal

A múltban számos szervezet és vállalkozás súlyos veszteségeket szenvedett el, például adatszegések, spam támadások stb. annak eredményeként, hogy a weboldalukon nincsenek CAPTCHA űrlapok. Nagyon ajánlott a CAPTCHA hozzáadása a webhelyéhez, mivel hozzáad egy biztonsági réteget, hogy megakadályozza a webes bűnözőket.

A Google egy "reCAPTCHA" nevű ingyenes szolgáltatást is elindított, amely segít megvédeni a webhelyeket a spamektől és a visszaélésektől. A CAPTCHA és a reCAPTCHA hasonlónak tűnik, de nem teljesen ugyanaz. A CAPTCHA-k néha frusztrálónak és sok felhasználó számára nehezen érthetőnek érzik magukat. Bár van egy fontos oka annak, hogy miért nehezítik őket.

Hogyan működnek a CAPTCHA-k és miért olyan nehézek?

A CAPTCHA-k és a reCAPTCHA-k megakadályozzák a spam-et. Hogyan működnek? És miért találja olyan nehéznek a CAPTCHA-kat?

Olvassa el a következőt

A szerzőről