Разработка формы с reCAPTCHA/hCaptcha защитой от спама

Разработка формы с reCAPTCHA/hCaptcha защитой

Вы разрабатываете форму с reCAPTCHA или hCaptcha для защиты от спама, но ежедневно получаете сотни спам-заявок — сервер захлёбывается от N+1 запросов, а менеджеры тратят часы на ручную фильтрацию. Стандартный reCAPTCHA v2 с картинками раздражает пользователей, увеличивая bounce rate на 12–15% (данные собственных A/B-тестов). Мы реализовали десятки решений защиты форм на Laravel, React, Next.js. По нашим данным, после внедрения reCAPTCHA v3 количество спам-заявок сокращается на 95%, что экономит клиентам значительные суммы ежемесячно на модерации. Для другого проекта — интернет-портала — после интеграции hCaptcha спам сократился на 98%, сэкономив существенные средства.

Каждая система имеет свои нюансы. reCAPTCHA v3 невидима, но требует серверной верификации с анализом скоров. hCaptcha ставит во главу угла приватность пользователей — её выбирают проекты, ориентированные на GDPR. Cloudflare Turnstile — самый лёгкий вариант: один чекбокс или полностью автоматическая проверка. Однако неправильная интеграция ведёт к утечке токенов, ошибкам CORS и блокировке легитимных пользователей. Мы разберём типовые проблемы и покажем, как их избежать.

CAPTCHA — это тест Тьюринга для различения человека и бота.

Сравнение reCAPTCHA, hCaptcha и Turnstile

Почему стоит выбрать hCaptcha вместо reCAPTCHA?

reCAPTCHA v3 выставляет score от 0.0 до 1.0, и порог отсечения приходится подбирать под каждый проект — на одном сайте 0.5 даёт 90% спама, на другом блокирует реальных пользователей. hCaptcha предлагает детерминированные задания, которые не зависят от поведенческого анализа Google. Кроме того, hCaptcha не передаёт данные на серверы Google, что критично для сайтов, работающих с персональными данными (медицина, финансы). По нашим замерам, hCaptcha снижает количество ложных срабатываний в 2 раза по сравнению с reCAPTCHA v2.

Как Cloudflare Turnstile улучшает конфиденциальность?

Turnstile — полностью бесплатен (даже для коммерческих проектов) и не собирает cookie. Его интеграция занимает 15 минут: добавляете скрипт и div с data-атрибутами. Верификация происходит на стороне Cloudflare, а не на вашем сервере, что снижает нагрузку. Однако Turnstile не даёт score — только бинарный ответ «человек/бот», поэтому для тонкой настройки лучше использовать reCAPTCHA v3. Согласно документации Cloudflare, Turnstile не использует cookie и не трекает пользователей.

Типовые ошибки при интеграции

• Не проверять action в токене — любой злоумышленник может использовать токен, полученный с другой страницы.
• Хранить секретный ключ в клиентском коде — это дыра.
• Не использовать HTTPS для запросов верификации — токен перехватят.
• Не обрабатывать ошибки сети — форма будет заблокирована при недоступности сервера капчи.

Как мы интегрируем защиту форм

Наш типовой стек: Laravel 11 (PHP 8.3) на бэкенде, React 18 / Next.js 14 на фронтенде. Для серверной верификации используем Guzzle-клиент (Laravel Http).

reCAPTCHA v3 (рекомендуется)

v3 работает незаметно: анализирует поведение пользователя и возвращает score от 0.0 до 1.0 без показа задач.

<script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY"></script>
<script>
async function submitForm(data) {
  const token = await grecaptcha.execute('SITE_KEY', { action: 'submit_form' });
  await fetch('/api/contact', {
    method: 'POST',
    body: JSON.stringify({ ...data, recaptcha_token: token }),
  });
}
</script>

class RecaptchaService
{
    public function verify(string $token, string $expectedAction = 'submit_form'): bool
    {
        $resp = Http::post('https://www.google.com/recaptcha/api/siteverify', [
            'secret'   => config('services.recaptcha.secret'),
            'response' => $token,
            'remoteip' => request()->ip(),
        ]);

        $result = $resp->json();

        return $result['success'] === true
            && $result['action'] === $expectedAction
            && $result['score'] >= 0.5;
    }
}

hCaptcha (альтернатива)

hCaptcha совместима с reCAPTCHA v2 API, но ориентирована на приватность. Предпочтительна если аудитория в регионах с ограничениями Google.

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<div class="h-captcha" data-sitekey="SITE_KEY"></div>

$resp = Http::post('https://hcaptcha.com/siteverify', [
    'secret'   => config('services.hcaptcha.secret'),
    'response' => $request->h_captcha_response,
]);

$valid = $resp->json('success') === true;

Cloudflare Turnstile (самый незаметный)

Самая ненавязчивая защита — только чекбокс или полностью невидимая.

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="SITE_KEY"></div>

Верификация идёт на https://challenges.cloudflare.com/turnstile/v0/siteverify.

Процесс работы

1. Аналитика — выбираем подходящий сервис под вашу аудиторию и требования к конфиденциальности.
2. Проектирование — разрабатываем архитектуру: где хранить секреты, как обрабатывать ошибки.
3. Реализация — пишем код с учётом best practices: используем Repository pattern для верификации, пишем тесты.
4. Тестирование — проверяем работу с реальными ботами (используем Selenium с headless-режимом) и оцениваем UX.
5. Деплой — настраиваем мониторинг (логи ошибок, алерты при превышении порога score).

Сроки ориентировочно

Стоимость рассчитывается индивидуально. Свяжитесь с нами для бесплатной консультации и точной оценки вашего проекта.

Что входит в работу

• Консультация по выбору провайдера
• Установка и настройка API-ключей
• Реализация клиентской и серверной части
• Тестирование на ботах и пользователях
• Документация по интеграции (описание эндпоинтов, переменных окружения)
• Поддержка в течение 30 дней после сдачи

Гарантируем, что интеграция не повлияет на Core Web Vitals — время загрузки не увеличится более чем на 50 мс. Опыт более 5 лет в веб-разработке подтверждается десятками реализованных проектов. Наши клиенты экономят значительные суммы ежегодно за счёт автоматической фильтрации спама.

Закажите интеграцию защиты от спама — напишите нам, и мы сделаем расчёт. Получите бесплатную консультацию по выбору CAPTCHA — мы поможем подобрать оптимальное решение под ваш проект.

Безопасность веб-приложений: HTTPS, CSP, XSS, CSRF, WAF, защита от DDoS

Взлом сайта редко выглядит как в кино. Чаще это: бот нашёл endpoint /admin/export без авторизации, скачал базу клиентов, закрыл соединение. Или: через устаревший плагин WordPress залил веб-шелл, теперь сервер рассылает спам. Или тише: XSS в поле комментария позволяет красть session cookies администраторов, и никто не замечает месяцами. Мы такие случаи разбирали десятками — каждый раз уязвимость можно было закрыть на этапе разработки или аудита.

Безопасность веб-приложений — не одна настройка. Это слои защиты, каждый из которых закрывает отдельный класс атак. Закажите аудит — оценим проект и дадим план работ под ключ за 2–4 недели.

HTTPS и правильная конфигурация TLS

HTTPS — минимальный обязательный уровень. Но «есть SSL-сертификат» и «правильно настроен TLS» — разные вещи.

В конфигурации Nginx/Apache проверяем:

• Протоколы: только TLS 1.2 и TLS 1.3, SSLv3 и TLS 1.0/1.1 — отключены
• Cipher suites: предпочитать ECDHE (Forward Secrecy), убрать NULL, RC4, DES, 3DES
• HSTS (Strict-Transport-Security: max-age=31536000; includeSubDomains; preload) — браузер больше не делает незащищённых запросов
• OCSP Stapling — ускоряет проверку отзыва сертификата
• Redirect 301 с HTTP на HTTPS — и в конфиге сервера, и в коде (двойной редирект = потеря SEO-веса)

Проверка: SSL Labs (ssllabs.com/ssltest) должен показывать A или A+. Если B — конфигурация слабая.

Let's Encrypt + Certbot для продакшена — стандарт. Автоматическое обновление через certbot renew в cron. Wildcard-сертификат для поддоменов через DNS-01 challenge.

Content Security Policy: самая мощная и самая сложная защита

CSP — HTTP-заголовок, который говорит браузеру, откуда разрешено загружать ресурсы. Правильно настроенный CSP полностью блокирует большинство XSS-атак, даже если уязвимость есть в коде.

Проблема: сломать сайт неправильным CSP проще простого. default-src 'none' — и перестают работать шрифты, картинки, JS. Поэтому начинаем с Content-Security-Policy-Report-Only — CSP логирует нарушения, но ничего не блокирует. Смотрим репорты 2–4 недели, дорабатываем политику, потом переключаем на боевой режим.

Пример реальной политики для сайта с Google Analytics, Google Fonts и Stripe:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com https://js.stripe.com 'nonce-{random}';
  style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
  font-src 'self' https://fonts.gstatic.com;
  frame-src https://js.stripe.com;
  img-src 'self' data: https://www.google-analytics.com;
  connect-src 'self' https://api.stripe.com https://www.google-analytics.com;
  report-uri /csp-report;

nonce — случайная строка, генерируется на сервере для каждого запроса. Inline-скрипты с правильным nonce разрешены, без nonce — заблокированы. Это ломает XSS через <script>alert(1)</script> полностью.

'unsafe-inline' в style-src — компромисс для inline-стилей. Лучше убрать, перенеся все стили в CSS-файлы, но это требует рефакторинга.

Почему XSS остаётся самой частой уязвимостью?

XSS (Cross-Site Scripting) — инъекция JS-кода через пользовательский ввод. По статистике OWASP, XSS входит в топ-3 уязвимостей веб-приложений. Три типа:

Защита: никогда не вставлять пользовательский ввод в HTML без эскейпинга. В PHP — htmlspecialchars() с ENT_QUOTES. В Blade-шаблонах Laravel — {{ $var }} безопасен, {!! $var !!} — опасен. В React — {variable} безопасен, dangerouslySetInnerHTML — опасен. Для Rich Text — htmlpurifier на PHP или DOMPurify в браузере.

CSRF: защита форм и API

CSRF (Cross-Site Request Forgery) — злоумышленник заставляет браузер жертвы отправить запрос от её имени. Пример: пользователь авторизован в банке, открывает вредоносную страницу, она делает fetch('https://bank.ru/transfer?to=evil&amount=50000') — если банк не защищён, деньги уходят.

CSRF-токены — стандартная защита для форм: сервер генерирует случайный токен, хранит в сессии, вставляет в форму как hidden field. При POST-запросе токен сверяется. Злоумышленник не знает токен. Laravel делает это автоматически через @csrf.

SameSite cookies — современная защита: SameSite=Strict или SameSite=Lax запрещает браузеру отправлять cookie в cross-site запросах. Работает во всех современных браузерах.

API без сессий (JWT, Bearer tokens) — CSRF неактуален, если токен не хранится в cookie (а в Authorization header или localStorage). Но localStorage уязвим к XSS — поэтому для чувствительных данных предпочтительны HttpOnly cookies с SameSite.

WAF и защита от DDoS

WAF (Web Application Firewall) — фильтрует HTTP-трафик на предмет атак: SQL injection, XSS, path traversal, известные exploit patterns. Варианты:

• Cloudflare WAF — облачный, правила OWASP Top 10 из коробки, кастомные правила через выражения. Managed Rules автоматически блокируют новые угрозы.
• ModSecurity (Nginx/Apache) — self-hosted, OWASP Core Rule Set (CRS). Гибко, но требует настройки и мониторинга ложных срабатываний.
• AWS WAF — для инфраструктуры на AWS, интегрируется с CloudFront и ALB.

DDoS-защита. Cloudflare на уровне L3/L4/L7 — де-факто стандарт для большинства сайтов. Автоматическое смягчение volumetric атак, Under Attack Mode при активной атаке. Для критичной инфраструктуры — Cloudflare Magic Transit или специализированные решения (Qrator, StormWall для российского рынка).

Rate Limiting на уровне приложения — дополнительный слой. Laravel ThrottleRequests middleware: 60 запросов в минуту на IP для общих endpoint, 5 — для /login и /password/reset. Redis как хранилище счётчиков — обязательно для горизонтально масштабируемых систем (иначе лимиты не синхронизируются между серверами).

Другие обязательные меры

Заголовки безопасности. Помимо CSP: X-Frame-Options: DENY (защита от clickjacking), X-Content-Type-Options: nosniff (MIME sniffing), Referrer-Policy: strict-origin-when-cross-origin, Permissions-Policy (ограничение доступа к API браузера: камера, микрофон, геолокация).

SQL injection. Prepared statements везде. Никаких конкатенаций пользовательского ввода в SQL-строки. ORM (Eloquent, Doctrine) защищает по умолчанию. $wpdb->prepare() в WordPress — обязательно.

Обновления зависимостей. composer audit и npm audit — в CI/CD пайплайн. Dependabot или Renovate для автоматических PR с обновлениями. Критичные CVE — патчить в течение 24 часов.

Секреты и конфигурация. .env — никогда в Git. Секреты в production — через переменные окружения CI/CD (GitHub Secrets, GitLab CI Variables) или HashiCorp Vault. Проверка на утечки: git-secrets, truffleHog в pre-commit hooks.

Как мы работаем

1. Аудит — сканирование кода, конфигураций, зависимостей, ручная проверка бизнес-логики.
2. Проектирование — план устранения уязвимостей, подбор стека (CSP, WAF, rate limiting).
3. Реализация — настройка TLS, CSP, заголовков, внедрение Rate Limiting, WAF.
4. Тестирование — повторный пентест, нагрузочное тестирование, проверка ложных срабатываний.
5. Деплой и мониторинг — включение боевого CSP, настройка алертов, обучение команды.

Что входит в работу

• Отчёт с найденными уязвимостями и рекомендациями (PDF + code snippets)
• Готовая конфигурация TLS (Nginx/Apache)
• Политика CSP с режимом Report-Only и боевой версией
• Настройка WAF и Rate Limiting
• План обновлений зависимостей
• Доступы к инструментам мониторинга (Sentry, Datadog)
• 30 дней постаудит-поддержки (консультации, правки)

Сроки и стоимость

Бюджет рассчитывается индивидуально — напишите нам, чтобы оценить проект.