Yandex SmartCaptcha для 1С-Битрикс: современная защита форм без доработки компонентов

Оглавление

Спам через формы обратной связи, автоматические регистрации, массовые запросы на восстановление пароля, боты в комментариях и отзывах — стандартная проблема практически любого публичного сайта.

В «1С-Битрикс» есть собственный механизм CAPTCHA, и он по-прежнему поддерживается платформой. Однако классическая CAPTCHA с изображением и ручным вводом символов не всегда удобна для пользователя: необходимо рассмотреть код на картинке, правильно его распознать и вручную ввести в поле.

Один из вариантов модернизации такой защиты — Yandex SmartCaptcha.

Но здесь возникает другая задача: недостаточно просто вывести новый виджет рядом с формой. Необходимо корректно встроить его в существующий механизм «1С-Битрикс», поддержать AJAX, несколько форм на странице, динамически загружаемый контент, многосайтовость, серверную валидацию и при этом предусмотреть ситуацию, когда внешний сервис временно недоступен.

Именно для этого мы разработали модуль «Установка Яндекс SmartCaptcha PRO».

Он автоматически заменяет штатную CAPTCHA «1С-Битрикс» на Yandex SmartCaptcha и при этом старается максимально сохранить стандартную логику работы компонентов.

Зачем вообще менять стандартную CAPTCHA

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

В стандартном варианте «1С-Битрикс» используются идентификатор CAPTCHA и введённое пользователем контрольное слово. Такой механизм существует в платформе много лет и продолжает использоваться в различных компонентах.

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

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

Yandex SmartCaptcha позволяет использовать другой подход. В том числе поддерживается невидимый режим, при котором проверка инициируется без постоянного отображения пользователю отдельной кнопки CAPTCHA. При необходимости SmartCaptcha сама может потребовать дополнительное действие.

Но для сайта на «1С-Битрикс» возникает вопрос интеграции.

Можно заменить HTML в одном шаблоне. А что делать, если на проекте десятки компонентов, несколько сайтов, AJAX-формы, модальные окна и собственные формы разработчиков?

Мы решили эту задачу на уровне модуля.

Как работает «Установка Яндекс SmartCaptcha PRO»

Главный принцип модуля — по возможности не заставлять разработчика переписывать уже работающие формы.

После установки модуль определяет формы, использующие стандартные поля CAPTCHA «1С-Битрикс», скрывает штатное изображение и поле ручного ввода и размещает вместо них Yandex SmartCaptcha.

Поддерживаются, в частности:

• captcha_sid и captcha_code;
• captcha_word и встречающийся вариант capcha_word;
• имена полей в верхнем регистре;
• вложенные имена вроде order[captcha_sid] и order[captcha_word].

Поэтому в большинстве стандартных сценариев изменять шаблон компонента не требуется.

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

Проверка выполняется не только в браузере

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

После прохождения SmartCaptcha формируется токен. Он должен быть проверен сервером сайта через сервер Yandex SmartCaptcha.

Именно такой механизм предусмотрен самим сервисом Yandex: для отображения используется клиентский ключ, а для серверной проверки — отдельный Server Key. Токен проверяется запросом к API SmartCaptcha.

В нашем модуле реализована именно эта схема.

Упрощённо обработка выглядит так:

Пользователь → форма «1С-Битрикс» → SmartCaptcha → токен → сервер сайта → серверная проверка Yandex → стандартная обработка формы

То есть SmartCaptcha не становится исключительно декоративным JavaScript-элементом.

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

Видимая и невидимая SmartCaptcha

Модуль поддерживает два основных режима.

Видимый режим

В форме отображается виджет SmartCaptcha.

Такой вариант удобно использовать на этапе первоначального внедрения: администратору и разработчику проще визуально контролировать, что CAPTCHA действительно появилась в необходимых формах.

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

Невидимый режим

В невидимом режиме проверка запускается при попытке отправки формы.

Постоянно отображать отдельный блок CAPTCHA при этом не требуется. Сам Yandex описывает invisible CAPTCHA как вариант подключения SmartCaptcha без кнопки «Я не робот» на странице.

С точки зрения UX это особенно удобно для:

• обратной связи;
• быстрых заявок;
• форм «Заказать звонок»;
• оформления заказа;
• регистрации;
• восстановления пароля.

Пользователь работает с обычной формой, а механизм антибот-защиты вмешивается только тогда, когда это действительно необходимо.

AJAX, модальные окна и динамические формы

На практике именно здесь часто начинаются проблемы с простыми интеграциями CAPTCHA.

Современный сайт на «1С-Битрикс» редко состоит только из статически загруженных сервером страниц.

Форма может:

• находиться в popup-окне;
• загружаться AJAX-запросом;
• появляться после действия пользователя;
• повторно перерисовываться компонентом;
• добавляться в DOM JavaScript-кодом;
• существовать в нескольких экземплярах одновременно.

Поэтому простого поиска CAPTCHA при первоначальной загрузке страницы недостаточно.

«Установка Яндекс SmartCaptcha PRO» поддерживает AJAX- и динамически добавляемые формы.

Кроме того, модуль рассчитан на ситуацию, когда CAPTCHA присутствует сразу в нескольких формах одной страницы.

Например, на одной странице интернет-магазина одновременно могут находиться:

• форма авторизации;
• форма регистрации;
• форма быстрого заказа;
• форма обратного звонка;
• форма вопроса о товаре.

Модуль должен корректно обрабатывать каждую из них независимо.

Поддержка AJAX и нескольких CAPTCHA встречается и в других решениях для «1С-Битрикс», поэтому сама по себе эта возможность не является уникальной.

Для нас было важно пойти дальше и закрыть не отдельный сценарий, а весь жизненный цикл CAPTCHA на реальном проекте.

Что произойдёт, если Yandex SmartCaptcha недоступна

Интеграция с любым внешним сервисом создаёт новую зависимость.

Даже если доступность сервиса очень высокая, разработчик должен заранее ответить на вопрос: что произойдёт с формой сайта, если внешний JavaScript или API временно недоступны?

Для формы заказа или заявки ответ «форма просто перестанет работать» нас не устраивает.

Поэтому в модуле реализовано два уровня отказоустойчивости.

Если не загрузился JavaScript SmartCaptcha

Для загрузки клиентского скрипта задаётся отдельный таймаут.

По умолчанию модуль ожидает его до 5000 миллисекунд, а администратор может установить значение от 1000 до 15000 мс.

Если за отведённое время SmartCaptcha не загрузилась или при создании виджета возникла ошибка, модуль возвращает стандартную CAPTCHA «1С-Битрикс».

В результате проблема внешнего сервиса не обязательно превращается в неработающую форму.

Пользователь просто увидит обычную CAPTCHA и сможет продолжить работу.

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

Fail-open или fail-closed: администратор выбирает сам

Есть и второй возможный сбой.

JavaScript успешно загрузился, пользователь прошёл проверку, сервер сайта получил токен — но серверный API SmartCaptcha временно не отвечает.

Как поступать в такой ситуации?

Единственно правильного ответа здесь нет.

Для интернет-магазина потерять реальный заказ из-за кратковременного сетевого сбоя может быть хуже, чем временно принять дополнительный риск спама.

Для чувствительной формы, наоборот, безопасность может быть важнее доступности.

Поэтому мы не стали принимать это решение за владельца сайта.

Модуль предлагает две политики.

allow

При временной невозможности выполнить серверную проверку обработка формы может быть продолжена.

Это классический подход fail-open.

Он подходит там, где критична доступность формы.

deny

Если проверить SmartCaptcha невозможно, запрос считается не прошедшим проверку.

Это подход fail-closed.

Он подходит для форм, где требования к защите выше требований к непрерывности работы.

Для серверного запроса можно отдельно настроить таймаут от 1 до 10 секунд. Значение по умолчанию — 2 секунды.

Таким образом, администратор управляет не только CAPTCHA, но и политикой поведения системы при инфраструктурной ошибке.

Полноценная поддержка многосайтовости «1С-Битрикс»

Многосайтовость — ещё один сценарий, который легко не учитывать при разработке небольшого интеграционного модуля.

Одна установка «1С-Битрикс» может обслуживать несколько сайтов и доменов.

При этом настройки CAPTCHA для них совершенно не обязательно должны совпадать.

Поэтому в «Установка Яндекс SmartCaptcha PRO» конфигурация хранится отдельно для каждого сайта.

Независимо настраиваются:

• включение и отключение модуля;
• Client Key;
• Server Key;
• режим SmartCaptcha;
• язык;
• положение служебного элемента;
• URL-исключения;
• текст ошибки;
• таймаут загрузки JavaScript;
• таймаут серверного запроса;
• политика allow / deny;
• журналирование.

Например, корпоративный сайт может использовать невидимый режим с одной парой ключей, а интернет-магазин в той же установке — видимый режим с другими ключами и более строгой политикой deny.

Для разных доменов можно использовать отдельные CAPTCHA и отдельные ключи Yandex.

Исключения для отдельных страниц

Автоматическое подключение удобно до тех пор, пока не появляется страница с особой логикой.

Например:

/personal/*
/catalog/import/
/services/legacy-form/

Для таких случаев предусмотрены URL-маски исключений.

Символ * соответствует произвольной последовательности символов.

Если URL страницы соответствует исключению, SmartCaptcha на ней не подключается и продолжает использоваться стандартный механизм «1С-Битрикс».

Это позволяет внедрять модуль постепенно и не ломать нестандартные или legacy-сценарии.

Свои сообщения об ошибках

Техническая интеграция — это не только API.

Пользователь должен понимать, почему форма не отправилась.

Поэтому сообщение при неуспешной проверке можно настроить отдельно для каждого сайта.

Если собственный текст не задан, используется стандартный: «Не удалось подтвердить, что вы не робот. Пройдите проверку еще раз».

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

Язык и положение shield

Для виджета можно оставить автоматическое определение языка или задать его явно.

Например:

• ru;
• en;
• be;
• kk;
• tt;
• uk;
• uz;
• tr.

Отдельно настраивается положение служебного элемента SmartCaptcha в невидимом режиме.

Например:

• bottom-right;
• bottom-left;
• bottom-center;
• top-right.

Сам Yandex предусматривает служебный элемент в сценарии невидимой CAPTCHA, поэтому возможность управлять его расположением важна для сайтов со сложной фиксированной навигацией, чатами, callback-виджетами и другими элементами интерфейса.

Журналирование без утечки секретов

Одна из неприятных ситуаций при интеграции CAPTCHA выглядит примерно так:

«Пользователь говорит, что форма не отправляется. Почему — непонятно».

Поэтому в модуле можно включить журналирование.

Результаты проверок и технические ошибки записываются в стандартный журнал событий «1С-Битрикс».

Не требуется создавать отдельную систему логирования или искать файлы логов на сервере.

При этом значения токенов SmartCaptcha и секретные Server Key в открытом виде в журнал не записываются.

Это принципиальный момент: диагностическая информация не должна сама становиться причиной утечки чувствительных данных.

Встроенная диагностика

Кроме журналирования в модуле есть отдельная диагностика для каждого сайта.

Она позволяет быстро проверить:

• включён ли модуль;
• указан ли Client Key;
• указан ли Server Key;
• какой режим работы выбран;
• какой endpoint используется для проверки;
• какая политика обработки недоступности SmartCaptcha настроена.

Это особенно удобно при многосайтовой конфигурации, где проблема может быть не глобальной, а относиться только к одному SITE_ID.

Вместо ручной проверки десятка параметров администратор получает отдельный диагностический экран.

Для каких форм подходит модуль

Модуль ориентируется не на название компонента, а на наличие совместимых стандартных полей CAPTCHA.

Поэтому его можно использовать не только в одной заранее заданной форме.

Типовые сценарии:

• регистрация;
• восстановление пароля;
• обратная связь;
• комментарии;
• отзывы;
• формы интернет-магазина;
• собственные формы разработчиков, построенные на стандартном механизме CAPTCHA «1С-Битрикс».

Для нестандартной формы главное условие — наличие совместимых полей стандартной CAPTCHA.

Это существенно уменьшает привязку решения к конкретному шаблону или компоненту.

Что нужно для установки

Модуль устанавливается стандартным способом через Маркетплейс «1С-Битрикс».

Требования:

• «1С-Битрикс: Управление сайтом» либо совместимая коробочная конфигурация;
• PHP 8.2 или выше;
• доступ сервера к Yandex SmartCaptcha;
• Client Key;
• Server Key;
• административный доступ к сайту.

Yandex использует отдельный клиентский ключ для подключения виджета и серверный ключ для проверки результата. Server Key должен оставаться секретным и не должен попадать в публичный код сайта.

После установки решение специально остаётся выключенным.

Мы считаем такое поведение правильнее автоматической активации.

Сначала администратор:

1. создаёт CAPTCHA в Yandex;
2. указывает разрешённые домены;
3. получает Client Key и Server Key;
4. сохраняет их в настройках нужного сайта;
5. выбирает режим;
6. проверяет диагностику;
7. только после этого включает модуль.

До момента включения существующие формы продолжают работать как раньше.

Как проверить модуль после установки

Мы рекомендуем не ограничиваться проверкой одной страницы.

Минимальный чек-лист после включения выглядит так:

1. Открыть диагностику и проверить ключи.
2. Открыть обычную страницу со стандартной CAPTCHA.
3. Убедиться, что вместо неё появилась SmartCaptcha.
4. Успешно пройти проверку и отправить форму.
5. Проверить сценарий неуспешной CAPTCHA.
6. Проверить AJAX-форму.
7. Проверить popup или модальное окно.
8. Проверить страницу с несколькими формами.
9. Проверить динамически загружаемую форму.
10. При включённом журналировании посмотреть журнал событий.
11. Проверить поведение при недоступности клиентского скрипта.
12. Убедиться, что выбранная политика allow или deny соответствует требованиям проекта.

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

Нужно ли изменять дизайн сайта

Для интеграции модуль создаёт собственный контейнер: .delement-yandexcaptcha-container

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

Если дизайн формы этого требует, контейнер можно стилизовать средствами шаблона сайта — например, изменить внешние отступы или расположение.

При этом мы не рекомендуем вмешиваться во внутреннюю структуру самого виджета Yandex SmartCaptcha.

Почему мы называем решение PRO

На Маркетплейсе «1С-Битрикс» существуют и другие модули для подключения Yandex SmartCaptcha.

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

Мы смотрим на задачу иначе.

PRO для нас — это не наличие ещё одного виджета CAPTCHA, а полнота обработки реального production-сценария.

В одном решении мы собрали:

Возможность	«Установка Яндекс SmartCaptcha PRO»
Автоматическая замена штатной CAPTCHA	✓
Без обязательной правки стандартных компонентов	✓
Серверная проверка токена	✓
Видимый режим	✓
Невидимый режим	✓
Несколько форм на странице	✓
AJAX-формы	✓
Динамически создаваемые формы	✓
Вложенные имена CAPTCHA-полей	✓
Многосайтовые настройки	✓
Разные ключи для каждого сайта	✓
URL-исключения	✓
Настраиваемые таймауты	✓
Fail-open / fail-closed	✓
Возврат к стандартной CAPTCHA при проблемах JS	✓
Журналирование	✓
Защита секретов в логах	✓
Встроенная диагностика	✓

Именно совокупность этих возможностей позволяет нам считать «Установка Яндекс SmartCaptcha PRO» одним из наиболее функционально полных решений для интеграции Yandex SmartCaptcha с «1С-Битрикс».

Не потому, что оно просто выводит другую CAPTCHA.

А потому, что модуль учитывает то, что происходит вокруг неё на реальном сайте.

Главное преимущество — существующий сайт не приходится перестраивать вокруг CAPTCHA

Для нас это, пожалуй, основной принцип решения.

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

Поэтому модуль построен вокруг существующего механизма CAPTCHA «1С-Битрикс»:

• находит совместимые формы;
• заменяет пользовательскую часть;
• выполняет серверную проверку;
• работает с динамическим контентом;
• учитывает многосайтовость;
• умеет диагностировать проблемы;
• предусматривает отказ внешнего сервиса;
• а при проблемах с клиентской частью способен вернуть штатную CAPTCHA.

В результате Yandex SmartCaptcha можно внедрить как отдельный системный слой, а не как набор индивидуальных доработок каждого шаблона.

Итог

Если на сайте «1С-Битрикс» используется стандартная CAPTCHA, переход на Yandex SmartCaptcha не должен превращаться в отдельный проект по переделке всех форм.

«Установка Яндекс SmartCaptcha PRO» автоматизирует эту интеграцию и добавляет механизмы, которые особенно важны для production-сайтов: AJAX и динамические формы, многосайтовость, серверную валидацию, диагностику, журналирование и управляемую отказоустойчивость.

Для обычного пользователя результат выглядит просто: вместо необходимости разбирать символы на изображении он получает современную SmartCaptcha — а в невидимом режиме в большинстве сценариев вообще не отвлекается от работы с формой.

Для администратора и разработчика за этой простотой остаётся полноценная интеграционная логика.

И именно это, на наш взгляд, отличает полноценное решение для «1С-Битрикс» от простой вставки виджета CAPTCHA.