В настоящее время CAPTCHA являются неотъемлемой частью безопасности веб-сайтов. Ежедневно онлайн проходят миллионы тестов CAPTCHA.

Если вы не реализовали проверку CAPTCHA на своем веб-сайте, это может создать для вас большую проблему, сделав вас мишенью для спамеров.

Вот все, что вам нужно знать о CAPTCHA и о том, как вы можете легко реализовать их на своем веб-сайте с помощью HTML, CSS и JavaScript.

Что такое капча?

CAPTCHA означает «полностью автоматизированный общедоступный тест Тьюринга, позволяющий отличить компьютеры от людей». Этот термин был придуман в 2003 году Луисом фон Ан, Мануэлем Блюмом, Николасом Дж. Хоппер и Джон Лэнгфорд. Это тип теста «вызов-ответ», который используется для определения того, является ли пользователь человеком или нет.

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

Идея CAPTCHA восходит к тесту Тьюринга. Тест Тьюринга - это метод проверки, может ли машина мыслить как человек. Интересно, что тест CAPTCHA можно назвать «обратным тестом Тьюринга», поскольку в этом случае компьютер создает тест, бросающий вызов людям.

Почему вашему сайту требуется проверка CAPTCHA?

CAPTCHA в основном используются для предотвращения автоматической отправки ботами форм со спамом и другим вредоносным контентом. Даже такие компании, как Google, используют его для защиты своей системы от спам-атак. Вот некоторые из причин, по которым ваш сайт может выиграть от проверки CAPTCHA:

• CAPTCHA помогает предотвратить рассылку спама хакерами и ботами систем регистрации путем создания поддельных учетных записей. Если их не предотвратить, они могут использовать эти учетные записи в гнусных целях.
• CAPTCHA может запретить атаки с использованием грубой силы для входа в систему с вашего веб-сайта, которые хакеры используют, чтобы попытаться войти в систему, используя тысячи паролей.
• CAPTCHA может запретить ботам спамить в разделе обзора, давая ложные комментарии.
• CAPTCHA помогает предотвратить раздувание билетов, поскольку некоторые люди покупают большое количество билетов для перепродажи. CAPTCHA может даже предотвратить ложные регистрации на бесплатные мероприятия.
• CAPTCHA может ограничить киберпреступников от рассылки спама в блогах изворотливых комментариев и ссылок на вредоносные веб-сайты.

Есть еще много причин, по которым можно интегрировать проверку CAPTCHA на ваш сайт. Вы можете сделать это с помощью следующего кода.

HTML CAPTCHA Code

HTML, или язык разметки гипертекста, описывает структуру веб-страницы. Используйте следующий HTML-код для структурирования формы проверки CAPTCHA:

Валидатор Captcha с использованием HTML, CSS и JavaScript



текст капчи




Обновить

Этот код в основном состоит из 7 элементов:

• : Этот элемент используется для отображения заголовка формы CAPTCHA.
• : Этот элемент используется для отображения текста CAPTCHA.
• - Этот элемент используется для создания поля ввода для ввода CAPTCHA.
• : Эта кнопка отправляет форму и проверяет, совпадают ли CAPTCHA и набранный текст.
• : Эта кнопка используется для обновления CAPTCHA.
• : Этот элемент используется для отображения вывода в соответствии с введенным текстом.
• : Это родительский элемент, который содержит все остальные элементы.

Файлы CSS и JavaScript связаны с этой HTML-страницей через а также элементы соответственно. Вы должны добавить ссылка на сайт тег внутри глава теги и сценарий тег в конце тело.

Вы также можете интегрировать этот код с существующими формами вашего сайта.

Связанный: Шпаргалка по HTML Essentials: теги, атрибуты и многое другое

CSS CAPTCHA Code

CSS или каскадные таблицы стилей используются для стилизации элементов HTML. Используйте следующий код CSS для стилизации указанных выше элементов HTML:

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

Добавьте или удалите свойства CSS из этого кода в соответствии с вашими предпочтениями. Вы также можете придать элегантный вид контейнеру формы, используя CSS свойство box-shadow.

Код CAPTCHA JavaScript

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

// document.querySelector () используется для выбора элемента из документа по его идентификатору
let captchaText = document.querySelector ('# captcha');
let userText = document.querySelector ('# textBox');
пусть submitButton = document.querySelector ('# submitButton');
пусть output = document.querySelector ('# output');
let 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; я <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Этот прослушиватель событий активируется всякий раз, когда пользователь нажимает кнопку "Enter"
// "Верный!" или сообщение "Неверно, попробуйте еще раз".
// отображается после проверки введенного текста с помощью CAPTCHA
userText.addEventListener ('keyup', function (e) {
// Код клавиши Значение кнопки "Enter" - 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correcaptcha");
output.innerHTML = «Правильно!»;
} еще {
output.classList.add («неверная капча»);
output.innerHTML = "Неверно, попробуйте еще раз";
}
}
});
// Этот прослушиватель событий активируется всякий раз, когда пользователь нажимает кнопку «Отправить»
// "Верный!" или сообщение "Неверно, попробуйте еще раз".
// отображается после проверки введенного текста с помощью CAPTCHA
submitButton.addEventListener ('click', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correcaptcha");
output.innerHTML = «Правильно!»;
} еще {
output.classList.add («неверная капча»);
output.innerHTML = "Неверно, попробуйте еще раз";
}
});
// Этот прослушиватель событий активируется всякий раз, когда пользователь нажимает кнопку «Обновить»
// Новая случайная CAPTCHA генерируется и отображается после того, как пользователь нажимает кнопку «Обновить»
refreshButton.addEventListener ('click', function () {
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 и reCAPTCHA предотвращают спам. Как они работают? И почему вам так сложно разгадывать CAPTCHA?

Читать далее

Об авторе