В днешно време CAPTCHA са неразделна част от сигурността на уебсайта. Милиони CAPTCHA тестове се извършват онлайн всеки ден.

Ако не сте внедрили валидиране на CAPTCHA на уебсайта си, това може да създаде голям проблем за вас, като ви зададе като цел за спамери.

Ето всичко, което трябва да знаете за CAPTCHA и как можете лесно да ги внедрите на вашия уебсайт, като използвате HTML, CSS и JavaScript.

Какво е CAPTCHA?

CAPTCHA означава „Напълно автоматизиран публичен тест на Тюринг, за да се разграничат компютрите и хората“. Този термин е измислен през 2003 г. от Луис фон Ан, Мануел Блум, Николас Дж. Хопър и Джон Лангфорд. Това е вид тест за отговор-предизвикателство, който се използва, за да се определи дали потребителят е човек или не.

CAPTCHA добавят сигурност към уебсайтовете, като предоставят предизвикателства, които трудно се изпълняват от ботовете, но са относително лесни за хората. Например идентифицирането на всички изображения на автомобил от набор от множество изображения е трудно за ботовете, но достатъчно просто за човешките очи.

Идеята за CAPTCHA произхожда от теста на Тюринг. Тестът на Тюринг е метод за проверка дали една машина може да мисли като човек или не. Интересното е, че тестът CAPTCHA може да се нарече "обратен тест на Тюринг", тъй като в този случай компютърът създава теста, който предизвиква хората.

Защо вашият уебсайт се нуждае от CAPTCHA валидиране?

CAPTCHA се използват главно за предотвратяване на автоматично подаване на ботове от формуляри със спам и друго вредно съдържание. Дори компании като Google го използват, за да предотвратят системата си от спам атаки. Ето някои от причините, поради които вашият уебсайт може да се възползва от проверката на CAPTCHA:

• CAPTCHA помагат за предотвратяване на хакери и ботове от нежелана поща на системите за регистрация чрез създаване на фалшиви акаунти. Ако не бъдат предотвратени, те могат да използват тези акаунти за нечисти цели.
• CAPTCHA могат да забранят атаки за влизане с груба сила от вашия уебсайт, които хакерите използват, за да опитат да влязат, използвайки хиляди пароли.
• CAPTCHA могат да ограничат ботовете от нежелана поща в раздела за преглед, като предоставят фалшиви коментари.
• CAPTCHA помага за предотвратяване на инфлацията на билетите, тъй като някои хора купуват голям брой билети за препродажба. CAPTCHA може дори да предотврати фалшиви регистрации за безплатни събития.
• CAPTCHA могат да ограничат кибер мошениците от нежелани блогове с хитруват коментари и връзки към вредни уебсайтове.

Има още много причини, които подкрепят интегрирането на CAPTCHA проверка във вашия уебсайт. Можете да го направите със следния код.

HTML CAPTCHA код

HTML или HyperText Markup Language описва структурата на уеб страница. Използвайте следния HTML код, за да структурирате формуляра си за проверка на CAPTCHA:

Captcha Validator Използване на HTML, CSS и JavaScript



капча текст




Обнови

Този код се състои основно от 7 елемента:

• : Този елемент се използва за показване на заглавието на формуляра CAPTCHA.
• : Този елемент се използва за показване на CAPTCHA текст.
• - Този елемент се използва за създаване на поле за въвеждане за въвеждане на CAPTCHA.
• : Този бутон изпраща формуляра и проверява дали CAPTCHA и въведеният текст са еднакви или не.
• : Този бутон се използва за опресняване на CAPTCHA.
• : Този елемент се използва за показване на изхода според въведения текст.
• : Това е родителският елемент, който съдържа всички останали елементи.

CSS и JavaScript файловете са свързани към тази HTML страница чрез и елементи съответно. Трябва да добавите връзка етикет в глава таг и скрипт етикет в края на тяло.

Можете също така да интегрирате този код със съществуващите форми на вашия уебсайт.

Свързани: Измамна таблица на HTML Essentials: Тагове, атрибути и др

CSS CAPTCHA код

CSS или Cascading Style Sheets се използва за стилизиране на HTML елементи. Използвайте следния CSS код, за да оформите горните HTML елементи:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
тяло {
фон-цвят: # 232331;
семейство шрифтове: 'Roboto', sans-serif;
}
#captchaBackground {
височина: 200px;
ширина: 250px;
фон-цвят: # 2d3748;
дисплей: flex;
align-items: център;
justify-content: център;
flex-direction: колона;
}
#captchaHeading {
цвят: бял;
}
#captcha {
margin-bottom: 1em;
размер на шрифта: 30px;
интервал между букви: 3px;
цвят: # 08e5ff;
}
.center {
дисплей: flex;
flex-direction: колона;
align-items: център;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
фон-цвят: # 08e5ff;
граница: 0px;
шрифт-тегло: получер;
}
#refreshButton {
фон-цвят: # 08e5ff;
граница: 0px;
шрифт-тегло: получер;
}
#текстово поле {
височина: 25px;
}
.incorrectCaptcha {
цвят: # FF0000;
}
.correctCaptcha {
цвят: # 7FFF00;
}

Добавете или премахнете CSS свойства от този код според вашите предпочитания. Можете също така да придадете елегантен вид на контейнера за формуляри с помощта на CSS свойство кутия-сянка.

JavaScript CAPTCHA код

JavaScript се използва за добавяне на функционалност към иначе статична уеб страница. Използвайте следния код, за да добавите пълна функционалност към формуляра за проверка на CAPTCHA:

// document.querySelector () се използва за избор на елемент от документа, използвайки неговия идентификатор
нека captchaText = document.querySelector ('# captcha');
нека userText = document.querySelector ('# textBox');
нека submitButton = document.querySelector ('# submitButton');
нека output = document.querySelector ('# output');
нека refreshButton = document.querySelector ('# refreshButton');
// alphaNums съдържа символите, с които искате да създадете CAPTCHA
нека 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'];
нека emptyArr = [];
// Този цикъл генерира произволен низ от 7 знака, използвайки alphaNums
// Освен това този низ се показва като CAPTCHA
за (нека i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Този слушател на събития се стимулира всеки път, когато потребителят натисне бутона "Enter"
// "Правилно!" или съобщението „Неправилно, моля, опитайте отново“ е
// показва се след валидиране на въведения текст с CAPTCHA
userText.addEventListener ('keyup', функция (e) {
// Стойността на ключовия код на бутона "Enter" е 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Правилно!";
} друго {
output.classList.add ("неправиленCaptcha");
output.innerHTML = "Неправилно, моля, опитайте отново";
}
}
});
// Този слушател на събития се стимулира всеки път, когато потребителят щракне върху бутона „Изпращане“
// "Правилно!" или съобщението „Неправилно, моля, опитайте отново“ е
// показва се след валидиране на въведения текст с CAPTCHA
submitButton.addEventListener ('щракване', функция () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Правилно!";
} друго {
output.classList.add ("неправиленCaptcha");
output.innerHTML = "Неправилно, моля, опитайте отново";
}
});
// Този слушател на събития се стимулира всеки път, когато потребителят натисне бутона "Refresh"
// Нов произволен CAPTCHA се генерира и показва, след като потребителят щракне върху бутона "Refresh"
refreshButton.addEventListener ('щракване', функция () {
userText.value = "";
нека refreshArr = [];
за (нека j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Сега имате напълно функционален формуляр за проверка на CAPTCHA! Ако искате да разгледате пълния код, можете да клонирате Хранилище на GitHub на този проект CAPTCHA-Validator. След клонирането на хранилището изпълнете HTML файла и ще получите следния изход:

Когато въведете правилния CAPTCHA код в полето за въвеждане, ще се покаже следният изход:

Когато въведете неправилен CAPTCHA код в полето за въвеждане, ще се покаже следният изход:

Направете уебсайта си защитен с CAPTCHA

В миналото много организации и фирми са претърпели големи загуби като пробиви на данни, спам атаки и т.н. в резултат на липсата на формуляри CAPTCHA на техните уебсайтове. Силно се препоръчва да добавите CAPTCHA към вашия уебсайт, тъй като добавя защитен слой, за да предотвратите уебсайта от киберпрестъпници.

Google стартира и безплатна услуга, наречена „reCAPTCHA“, която помага за защитата на уебсайтовете от нежелана поща и злоупотреба. CAPTCHA и reCAPTCHA изглеждат сходни, но не са съвсем едно и също нещо. Понякога CAPTCHA се чувстват разочароващи и трудни за разбиране за много потребители. Въпреки това, има важна причина защо те са направени да бъдат трудни.

Как работят CAPTCHA и защо са толкова трудни?

CAPTCHA и reCAPTCHA предотвратяват спама. Как работят те? И защо смятате, че CAPTCHA са толкова трудни за решаване?

Прочетете Напред

За автора