Данас су ЦАПТЦХА саставни део безбедности веб страница. Милиони ЦАПТЦХА тестова се свакодневно завршавају на мрежи.

Ако на својој веб локацији нисте применили валидацију ЦАПТЦХА, то би вам могло створити велики проблем, постављајући вас као циљ нежељених пошиљалаца.

Овде је све што треба да знате о ЦАПТЦХА и како их лако можете применити на својој веб локацији користећи ХТМЛ, ЦСС и ЈаваСцрипт.

Шта је ЦАПТЦХА?

ЦАПТЦХА је скраћеница од „Потпуно аутоматизовани јавни Тјурингов тест којим се рачунари и људи разликују“. Овај термин су 2003. године створили Луис вон Ахн, Мануел Блум, Ницхолас Ј. Хоппер и Јохн Лангфорд. То је врста теста изазов-одговор који се користи да би се утврдило да ли је корисник човек или не.

ЦАПТЦХА додају сигурност веб локацијама пружајући изазове које је ботовима тешко извести, али релативно лако за људе. На пример, препознавање свих слика аутомобила из низа више слика је ботовима тешко, али довољно једноставно за људске очи.

Идеја ЦАПТЦХА потиче из Тјуринговог теста. Тјурингов тест је метода којом се испитује да ли машина може размишљати као човек или не. Занимљиво је да се ЦАПТЦХА тест може назвати „обрнутим Туринговим тестом“, јер у овом случају рачунар креира тест који изазива људе.

Зашто је вашој веб локацији потребна ЦАПТЦХА валидација?

ЦАПТЦХА се углавном користе за спречавање ботова да аутоматски предају обрасце са нежељеном поштом и другим штетним садржајем. Чак га и компаније попут Гоогле-а користе да би спречиле свој систем од нежељених напада. Ево неколико разлога због којих ће ваша веб локација имати користи од валидације ЦАПТЦХА:

• ЦАПТЦХА помажу у спречавању хакера и ботова да пошаљу нежељену пошту системима за регистрацију стварањем лажних налога. Ако им то није онемогућено, те рачуне могу да користе у подле сврхе.
• ЦАПТЦХА-е могу забранити нападе бруталне пријаве са ваше веб локације које хакери користе да покушају да се пријаве користећи хиљаде лозинки.
• ЦАПТЦХА-е могу ограничити ботове да пошаљу нежељену пошту у одељак за преглед давањем лажних коментара.
• ЦАПТЦХА помажу у спречавању надувавања карата јер неки људи купују велики број карата за препродају. ЦАПТЦХА може чак да спречи лажне регистрације за бесплатне догађаје.
• ЦАПТЦХА-е могу да ограниче сајбер преварантима нежељено слање блогова помоћу неукусних коментара и веза до штетних веб локација.

Постоји још много разлога који подржавају интегрисање валидације ЦАПТЦХА у вашу веб локацију. То можете учинити помоћу следећег кода.

ХТМЛ ЦАПТЦХА код

ХТМЛ или ХиперТект Маркуп Лангуаге описује структуру веб странице. Користите следећи ХТМЛ код за структурирање вашег ЦАПТЦХА обрасца за проверу:

Цаптцха Валидатор користећи ХТМЛ, ЦСС и ЈаваСцрипт



цаптцха текст




Освјежи

Овај код се углавном састоји од 7 елемената:

• : Овај елемент се користи за приказ наслова обрасца ЦАПТЦХА.
• : Овај елемент се користи за приказ ЦАПТЦХА текста.
• - Овај елемент се користи за креирање оквира за унос за уписивање ЦАПТЦХА.
• : Ово дугме предаје образац и проверава да ли су ЦАПТЦХА и откуцани текст исти или не.
• : Ово дугме служи за освежавање ЦАПТЦХА.
• : Овај елемент се користи за приказ резултата према унесеном тексту.
• : Ово је надређени елемент који садржи све остале елементе.

ЦСС и ЈаваСцрипт датотеке повезане су на ову ХТМЛ страницу путем и елементи односно. Морате додати линк ознака унутар глава ознака и скрипта ознака на крају тело.

Такође можете да интегришете овај код са постојећим облицима ваше веб странице.

Повезан: Матрица ХТМЛ Ессентиалс: Ознаке, атрибути и још много тога

ЦСС ЦАПТЦХА код

ЦСС или Цасцадинг Стиле Схеетс се користи за обликовање ХТМЛ елемената. Користите следећи ЦСС код за обликовање горенаведених ХТМЛ елемената:

@импорт урл (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
тело {
позадина-боја: # 232331;
породица фонтова: 'Робото', санс-сериф;
}
#цаптцхаБацкгроунд {
висина: 200пк;
ширина: 250пк;
позадина-боја: # 2д3748;
дисплеј: флек;
алигн-итемс: центер;
јустифи-цонтент: центар;
флек-правац: колона;
}
#цаптцхаХеадинг {
бела боја;
}
#цаптцха {
маргин-боттом: 1ем;
величина фонта: 30пк;
размак између слова: 3 пиксела;
боја: # 08е5фф;
}
.центер {
дисплеј: флек;
флек-правац: колона;
алигн-итемс: центер;
}
#субмитБуттон {
маргин-топ: 2ем;
маргин-боттом: 2ем;
позадина-боја: # 08е5фф;
граница: 0пк;
фонт-веигхт: болд;
}
#рефресхБуттон {
позадина-боја: # 08е5фф;
граница: 0пк;
фонт-веигхт: болд;
}
#поље за текст {
висина: 25пк;
}
.инцоррецтЦаптцха {
боја: # ФФ0000;
}
.цоррецтЦаптцха {
боја: # 7ФФФ00;
}

Додајте или уклоните ЦСС својства из овог кода према вашим жељама. Такође можете дати елегантан изглед контејнеру форме помоћу ЦСС својство бок-схадов.

ЈаваСцрипт ЦАПТЦХА код

ЈаваСцрипт користи се за додавање функционалности иначе статичној веб страници. Користите следећи код да бисте додали комплетну функционалност обрасцу за проверу ЦАПТЦХА:

// доцумент.куериСелецтор () користи се за одабир елемента из документа помоћу његовог ИД-а
нека цаптцхаТект = доцумент.куериСелецтор ('# цаптцха');
нека усерТект = доцумент.куериСелецтор ('# тектБок');
нека субмитБуттон = доцумент.куериСелецтор ('# субмитБуттон');
нека је оутпут = доцумент.куериСелецтор ('# оутпут');
лет рефресхБуттон = доцумент.куериСелецтор ('# рефресхБуттон');
// алпхаНумс садржи знакове помоћу којих желите да направите ЦАПТЦХА
нека алпхаНумс = ['А', 'Б', 'Ц', 'Д', 'Е', 'Ф', 'Г', 'Х', 'И', 'Ј', 'К', 'Л „,„ М “,„ Н “,„ О “,„ П “,„ К “,„ Р “,„ С “,„ Т “,„ У “,„ В “,„ В “,„ Кс “, „И“, „З“, „а“, „б“, „ц“, 'д', 'е', 'ф', 'г', 'х', 'и', 'ј', 'к', 'л', 'м', 'н', 'о', 'п ',' к ',' р ',' с ',' т ',' у ',' в ',' в ',' к ',' и ',' з ',' 0 ',' 1 ', „2“, „3“, „4“, „5“, „6“, „7“, „8“, '9'];
нека је емптиАрр = [];
// Ова петља генерише случајни низ од 7 знакова користећи алпхаНумс
// Даље се овај низ приказује као ЦАПТЦХА
за (нека је и = 1; и <= 7; и ++) {
емптиАрр.пусх (алпхаНумс [Матх.флоор (Матх.рандом () * алпхаНумс.ленгтх)]);
}
цаптцхаТект.иннерХТМЛ = емптиАрр.јоин ('');
// Овај слушалац догађаја се стимулише сваки пут када корисник притисне дугме „Ентер“
// "Тачно!" или је порука „Нетачно, покушајте поново“
// приказује се након потврде улазног текста помоћу ЦАПТЦХА
усерТект.аддЕвентЛистенер ('кеиуп', фунцтион (е) {
// Вредност кључног кода дугмета „Ентер“ је 13
иф (е.кеиЦоде 13) {
иф (усерТект.валуе цаптцхаТект.иннерХТМЛ) {
оутпут.цлассЛист.адд ("цоррецтЦаптцха");
оутпут.иннерХТМЛ = "Тачно!";
} остало {
оутпут.цлассЛист.адд ("некаректнаЦаптцха");
оутпут.иннерХТМЛ = "Нетачно, покушајте поново";
}
}
});
// Овај слушалац догађаја се стимулише сваки пут када корисник кликне на дугме „Пошаљи“
// "Тачно!" или је порука „Нетачно, покушајте поново“
// приказује се након потврде улазног текста помоћу ЦАПТЦХА
субмитБуттон.аддЕвентЛистенер ('клик', функција () {
иф (усерТект.валуе цаптцхаТект.иннерХТМЛ) {
оутпут.цлассЛист.адд ("цоррецтЦаптцха");
оутпут.иннерХТМЛ = "Тачно!";
} остало {
оутпут.цлассЛист.адд ("некаректнаЦаптцха");
оутпут.иннерХТМЛ = "Нетачно, покушајте поново";
}
});
// Овај слушалац догађаја се стимулише сваки пут када корисник притисне дугме „Освежи“
// Нови случајни ЦАПТЦХА се генерише и приказује након што корисник кликне на дугме „Освежи“
рефресхБуттон.аддЕвентЛистенер ('клик', функција () {
усерТект.валуе = "";
нека рефресхАрр = [];
за (нека ј = 1; ј <= 7; ј ++) {
рефресхАрр.пусх (алпхаНумс [Матх.флоор (Матх.рандом () * алпхаНумс.ленгтх)]);
}
цаптцхаТект.иннерХТМЛ = рефресхАрр.јоин ('');
оутпут.иннерХТМЛ = "";
});

Сада имате потпуно функционалан образац за потврду ЦАПТЦХА! Ако желите да погледате комплетан код, можете клонирати ГитХуб спремиште овог пројекта ЦАПТЦХА-Валидатор. Након клонирања спремишта, извршите ХТМЛ датотеку и добићете следећи излаз:

Када унесете тачан ЦАПТЦХА код у поље за унос, приказаће се следећи излаз:

Када у поље за унос унесете било који нетачан ЦАПТЦХА код, приказаће се следећи излаз:

Учините вашу веб локацију сигурном помоћу ЦАПТЦХА-а

У прошлости су многе организације и предузећа претрпеле велике губитке попут повреда података, напада нежељене поште итд. као резултат непостојања ЦАПТЦХА образаца на њиховим веб локацијама. Препоручује се додавање ЦАПТЦХА на вашу веб локацију, јер додаје безбедносни слој који спречава да веб локација пређе од цибер криминалаца.

Гоогле је такође покренуо бесплатну услугу под називом „реЦАПТЦХА“ која помаже у заштити веб страница од нежељене поште и злоупотребе. ЦАПТЦХА и реЦАПТЦХА изгледају слично, али нису потпуно иста ствар. Понекад ЦАПТЦХА-е изгледају фрустрирајуће и тешко разумљиве за многе кориснике. Иако постоји важан разлог зашто им је тешко.

Како ЦАПТЦХА раде и зашто су тако тешки?

ЦАПТЦХА и реЦАПТЦХА спречавају нежељену пошту. Како раде? И зашто сматрате да је ЦАПТЦХА тако тешко решити?

Прочитајте следеће

О аутору