Как использовать Javascript для реализации Captcha и предотвращения спама

Понимание капчи и ее роли в предотвращении спама

CAPTCHA (полностью автоматизированный тест общественного Тьюринга, чтобы сообщить Computers and Humans Apart) стал важным инструментом для защиты веб-форм от автоматизированного злоупотребления. Спам-боты и вредоносные скрипты часто нацелены на контактные формы, страницы входа в систему и разделы комментариев для отправки нежелательного контента или запуска атак. Хорошо разработанная CAPTCHA заставляет ботов не выполнить задачу, которую большинство людей могут выполнить быстро, эффективно отфильтровывая автоматизированный трафик, не нарушая настоящих пользователей.

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

Создание JavaScript CAPTCHA из Scratch

Создание пользовательской CAPTCHA с JavaScript дает вам полный контроль над пользовательским опытом и логикой безопасности. Ниже мы рассмотрим три общих подхода: математические проблемы, ползунки и идентификация изображений. Каждый метод может быть реализован с помощью простого HTML, CSS и JavaScript, а затем интегрирован в поток проверки на стороне сервера.

Метод 1: Математическая проблема CAPTCHA

Простейшая CAPTCHA представляет собой случайную арифметическую операцию, которую пользователи должны решить. Это хорошо работает для форм с низким риском, но не защищено от продвинутых ботов, которые могут анализировать HTML или использовать оптическое распознавание символов (OCR) на простых числах.

Структура HTML

<form id="contactForm">
 <div id="captchaContainer">
 <p id="captchaQuestion">Loading...</p>
 <input type="number" id="captchaAnswer" placeholder="Your answer" required />
 </div>
 <button type="submit">Submit</button>
</form>

ЯваСкриптовая логика

let captchaAnswer = 0;

function generateMathCaptcha() {
 const num1 = Math.floor(Math.random() * 20) + 1;
 const num2 = Math.floor(Math.random() * 10) + 1;
 const operator = ['+', '-', '*'][Math.floor(Math.random() * 3)];
 let expression = `${num1} ${operator} ${num2}`;
 captchaAnswer = eval(expression);
 document.getElementById('captchaQuestion').textContent = `What is ${expression}?`;
}

document.getElementById('contactForm').addEventListener('submit', (e) => {
 e.preventDefault();
 const userAnswer = parseInt(document.getElementById('captchaAnswer').value, 10);
 if (userAnswer === captchaAnswer) {
 // Proceed with form submission
 console.log('CAPTCHA passed');
 } else {
 alert('Incorrect answer. Please try again.');
 generateMathCaptcha();
 document.getElementById('captchaAnswer').value = '';
 }
});

window.addEventListener('load', generateMathCaptcha);

Ограничения: Математические CAPTCHA уязвимы для ботов, которые выполняют JavaScript и вычисляют ответ. Для повышения безопасности объедините их с проверкой на стороне сервера (обсуждается позже) и рассмотрите возможность запутывания сгенерированной задачи таким образом, чтобы скрипты могли извлечь правильный ответ.

Способ 2: Слайдер капча

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

Базовая реализация

<div id="sliderCaptcha">
 <div id="sliderTrack">
 <div id="sliderThumb">→</div>
 </div>
 <p id="sliderStatus">Slide to verify</p>
</div>

Добавьте слушателей событий для , и (или сенсорных эквивалентов). Отслеживайте смещение большого пальца и сравнивайте его с целевой позицией. Общим трюком является случайная установка целевой позиции на каждой загрузке страницы, а затем проверка как конечной позиции, так и шаблона движения.

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

Способ 3: Выбор изображения CAPTCHA

CAPTCHA на основе изображений просят пользователей выбирать все изображения, которые соответствуют определенной категории (например, «Выбрать все квадраты с светофорами»). Хотя они более удобны для пользователя, чем искаженный текст, они сложны для реализации с нуля, потому что они требуют хранения изображений и ответов на стороне сервера. Рассмотрите возможность использования стороннего сервиса для этого подхода, но это может быть сделано с предварительно сохраненными изображениями и рандомизированным правильным набором.

Упрощенный пример:

<div id="imageGrid">
 <img src="cat.jpg" class="captcha-image" data-kind="animal">
 <img src="car.jpg" class="captcha-image" data-kind="vehicle">
 <img src="dog.jpg" class="captcha-image" data-kind="animal">
 <img src="tree.jpg" class="captcha-image" data-kind="plant">
</div>
<p>Select all images that show an animal.</p>

JavaScript будет собирать выбранные изображения и проверять их атрибуты при отправке. Чтобы боты не могли просто читать HTML, значения атрибутов должны быть зашифрованы или динамически генерироваться с сервера.

Повышение безопасности с помощью дополнительных методов

Ни один клиентский CAPTCHA не является надежным; боты могут реверс-инжиниринг JavaScript, запускать безголовые браузеры или использовать расширенный AI. Поэтому объедините свой фронтенд CAPTCHA с этими улучшениями на стороне сервера и на стороне клиента.

Медовый котел Поля

Медоносные точки — это скрытые поля формы, которые люди не увидят или не заполнят, но боты часто автозаполняют. Добавьте поле со стилями, такими как или . На сервере отклоняйте представления, где медоносный баллон не пуст.

<input type="text" name="website" style="display:none" autocomplete="off">

Временная валидация

Боты могут отправлять формы за миллисекунды, тогда как людям требуется несколько секунд, чтобы прочитать и ответить. Записывайте время генерации формы с помощью JavaScript () и отправляйте его вместе с представлением. На сервере отклоняйте представления, которые прибывают быстрее разумного порога (например, 2 секунды для простой формы, 5 секунд для CAPTCHA).

const FORM_GENERATED = Date.now();
// On submit:
const submissionTime = Date.now() - FORM_GENERATED;
// Include in form data and validate server-side

Серверная валидация обязательна

Никогда не доверяйте только проверке на стороне клиента.] Всегда перепроверяйте ответ CAPTCHA на сервере. Если вы генерировали ответ на стороне клиента вызова, вы также должны отправить параметры вызова (например, номера и оператора) на сервер и пересчитать ожидаемый ответ. Еще лучше, генерировать вызов на сервере, отправлять его клиенту и проверять ответную сторону сервера. Это предотвращает вредоносный пользователь от изменения JavaScript, чтобы всегда передавать CAPTCHA.

Пример потока на стороне сервера для математической CAPTCHA:

Сервер генерирует два случайных числа и оператора, сохраняет ожидаемый ответ в сеансе (или шифрует его).
Сервер отправляет вопрос клиенту.
Пользователь предоставляет ответ.
Сервер извлекает сохраненный ответ и сравнивает; если совпадает, то формирует процесс.

Внедрение CAPTCHA с внешними услугами

Для производственных сайтов рассмотрите возможность использования хорошо зарекомендовавших себя сервисов CAPTCHA, которые предлагают надежную защиту от автоматизированных атак, включая распознавание изображений на основе машинного обучения. Два популярных варианта — Google reCAPTCHA и hCaptcha. Они обеспечивают как бесплатные уровни, так и легкую интеграцию через библиотеки JavaScript.

reCAPTCHA v3 example:

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
 document.getElementById('contactForm').addEventListener('submit', (e) => {
 e.preventDefault();
 grecaptcha.ready(() => {
 grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then((token) => {
 // Append token to form and submit
 document.getElementById('recaptchaToken').value = token;
 document.getElementById('contactForm').submit();
 });
 });
 });
</script>

Эти службы обрабатывают все трудности: обнаружение ботов, адаптивные проблемы и доступность. Они также предоставляют панель мониторинга трафика и корректируют пороги. Однако им требуется подключение к Интернету на серверах службы и могут вызвать проблемы с конфиденциальностью (особенно использование файлов cookie reCAPTCHA). Оцените, является ли компромисс приемлемым для вашей аудитории.

Для прагматического руководства по интеграции см. документацию разработчика Google reCAPTCHA .

Лучшие практики для интеграции CAPTCHA

Доступность: Обеспечение доступности альтернатив CAPTCHA для пользователей с ограниченными возможностями. Аудио-проблемы или текстовые вопросы, которые могут быть обработаны считывателями экрана, имеют важное значение для соблюдения руководящих принципов WCAG.
Прогрессивное улучшение: Начните с простой формы HTML, затем добавьте JavaScript для CAPTCHA. Если JavaScript отключен, вернитесь к сгенерированному сервером изображению CAPTCHA или простому математическому запросу, отправленному через скрытое поле.
Ограничение скорости: Даже в случае с CAPTCHA, применяйте ограничение скорости на сервере (например, ограничение подачи на IP-адрес в час). Это предотвращает нарушение CAPTCHA определенным злоумышленником вручную.
Бег и мониторинг: Логировать сбои CAPTCHA и необычные шаблоны представления. Эти данные помогают точно настроить пороги и определить новые векторы атак.
Обфускат JavaScript: Минифицируйте и запутайте логику CAPTCHA, чтобы ботам было сложнее понять генерацию вызовов.
Комбинированные множественные методы:] Используй многоуровневый подход. Медовый котел, проверка времени, слайдер и двойная проверка на стороне сервера вместе обеспечивают гораздо лучшую защиту, чем любой один метод.

Заключение

Внедрение CAPTCHA с JavaScript дает вам гибкость для создания интерактивных, удобных для пользователя мер борьбы со спамом. От простых математических головоломок до задач слайдера эти методы могут сдерживать многие автоматизированные атаки, особенно в сочетании с проверкой на стороне сервера, медовыми точками и проверками на основе времени. Для высокопроизводительных или чувствительных форм рассмотрите возможность интеграции профессиональной службы, такой как reCAPTCHA или hCaptcha, чтобы извлечь выгоду из постоянных улучшений в обнаружении ботов.

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