•
    Кейс Павлов Студио: как мы внедрили Яндекс SmartCaptcha для защиты всех форм сайта на сайте битрикс
    Оставить заявку
    close
    Email: pavel.ps2014@yandex.ru
    Оставить заявку

    Напишите нам в социальных сетях

    Оставить заявку
    #Создание сайтов

    🎯 Кейс Павлов Студио: как мы внедрили Яндекс SmartCaptcha для защиты всех форм сайта на сайте битрикс

    Заказчик
    Павлов Студио
    Задача
    Исключить спам и автоматические отправки во всех формах сайта клиента, сохранив удобство для пользователей.

    📌 Проблема клиента

    У заказчика — более 10 форм:

    • заявки на услуги;

    • формы обратной связи;

    • подписка на рассылку;

    • попап-формы.

    Спам-боты ежедневно отправляли 20–30 нежелательных сообщений, некоторые — напрямую в обработчики Bitrix, обходя фронтенд.

    🛠 Решение: трёхуровневая защита

    Мы реализовали три подхода, чтобы покрыть все сценарии.

    1. 📍 Видимая капча на всех формах

    Когда применяли: в формах с высокой ценностью заявки (запрос расчёта, заказ звонка).

    Что сделали:

    • Подключили SmartCaptcha глобально.

    • Автоматически добавили виджет во все формы.

    • Перед отправкой проверяем токен.

    Пример кода (JS)

    html
    <script src="https://smartcaptcha.yandexcloud.net/captcha.js" defer></script>
    <script>
    (    function() {
    const siteKey = "ВАШ_SITEKEY";

    function addCaptcha(form) {
    if (!form.querySelector(".smart-captcha")) {
    const div = document.createElement("div");
    div.classList.add("smart-captcha");
    div.setAttribute("data-sitekey", siteKey);
    div.setAttribute("data-hl", "ru");
    form.appendChild(div);
    }
    }

    function initForms() {
    document.querySelectorAll("form").forEach(addCaptcha);
    }

    document.addEventListener("DOMContentLoaded", initForms);
    new MutationObserver(initForms).observe(document.body, { childList: true, subtree: true });

    document.addEventListener("submit", function(e) {
    const form = e.target;
    const widget = form.querySelector(".smart-captcha");
    if (widget) {
    const token = smartCaptcha.getResponse(widget);
    if (!token) {
    e.preventDefault();
    alert("Пожалуйста, пройдите проверку капчи.");
    } else {
    let input = form.querySelector('input[name="smart-token"]');
    if (!input) {
    input = document.createElement("input");
    input.type = "hidden";
    input.name = "smart-token";
    form.appendChild(input);
    }
    input.value = token;
    }
    }
    });
    })();
    </script>

    2. 🕵 Невидимая капча для быстрого UX

    Когда применяли: в формах, где важна мгновенная отправка (подписка, быстрый заказ).

    Отличие: пользователь не видит капчу — токен генерируется автоматически.

    Пример кода (JS)

    html
    <script src="https://smartcaptcha.yandexcloud.net/captcha.js" defer></script>
    <script>
    (    function() {
    const siteKey = "ВАШ_SITEKEY";

    function addInvisible(form) {
    if (!form.querySelector(".smart-captcha")) {
    const div = document.createElement("div");
    div.classList.add("smart-captcha");
    div.setAttribute("data-sitekey", siteKey);
    div.setAttribute("data-hl", "ru");
    div.setAttribute("data-invisible", "true");
    form.appendChild(div);
    }
    }

    function initForms() {
    document.querySelectorAll("form").forEach(addInvisible);
    }

    document.addEventListener("DOMContentLoaded", initForms);
    new MutationObserver(initForms).observe(document.body, { childList: true, subtree: true });

    document.addEventListener("submit", function(e) {
    const form = e.target;
    const widget = form.querySelector(".smart-captcha");
    if (widget) {
    e.preventDefault();
    smartCaptcha.execute(widget).then(function(token) {
    let input = form.querySelector('input[name="smart-token"]');
    if (!input) {
    input = document.createElement("input");
    input.type = "hidden";
    input.name = "smart-token";
    form.appendChild(input);
    }
    input.value = token;
    form.submit();
    }).catch(function() {
    alert("Не удалось пройти проверку капчи.");
    });
    }
    });
    })();
    </script>

    3. ⚡ Глобальная серверная проверка в Bitrix

    Когда применяли: всегда.
    Это защита от ботов, которые отправляют формы напрямую, без фронтенда.

    Пример кода (/bitrix/php_interface/init.php)

    php
    <?php
    AddEventHandler("main", "OnBeforeEventAdd", "PavlovStudioSmartCaptcha");

    function PavlovStudioSmartCaptcha($event, &$lid, &$arFields) {
    $secret = 'ВАШ_SECRET';

    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['smart-token'])) {
    $token = $_POST['smart-token'];
    $ip = $_SERVER['REMOTE_ADDR'];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "https://smartcaptcha.yandexcloud.net/validate?secret={$secret}&token={$token}&ip={$ip}");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    curl_close($ch);

    $result = json_decode($response, true);

    if (!isset($result['status']) || $result['status'] !== 'ok') {
    global $APPLICATION;
    $APPLICATION->ThrowException("Ошибка: капча не пройдена.");
    return false;
    }
    } else {
    global $APPLICATION;
    $APPLICATION->ThrowException("Ошибка: капча обязательна.");
    return false;
    }
    }

    📊 Результаты внедрения

    Метрика До внедрения После внедрения
    Спам-заявок в день 20–30 0–1
    Пропущенных заявок 0 0
    Время внедрения — 2 дня
    Довольные пользователи — ✅ 100%

    💡 Итог

    Павлов Студио внедрила многоуровневую защиту:

    • Видимая капча — для ключевых форм.

    • Невидимая капча — для быстрого UX.

    • Глобальная проверка в Bitrix — для защиты на уровне сервера.

    В результате клиент полностью избавился от спама, сохранил удобство работы с сайтом и получил универсальное решение, которое можно использовать в будущих проектах.