recaptcha v3 или v2 что лучше для сайта
Использование Google reCAPTCHA v2 и v3 в одной форме
Введение
У Google появилась замечательная reCAPTCHA v3. Замечательна она тем, что освобождает пользователя от необходимости тыкать по картинкам в поисках светофоров и пожарных гидрантов, при этом вполне успешно анализирует его действия на сайте и оценивает их по шкале от 0 до 1. Чем выше балл, тем качественней наш бот выше вероятность, что пользователь реальный. Обычно выставляют порог равным 0.5.
А что делать, если хочется добра пользователям сайта, но есть у его владельца некая обеспокоенность, что не пропустит невидимая столь ценного реального пользователя, который может и ведет себя странно и подозрительно, но совсем не бот?
Что делаем
Тут обозначу основные моменты. Весь код есть по ссылке на github. достаточно переименовать файл config.example.php в config.php и поменять в нем ключи доступа на настоящие.
Для подключения необходимо получить публичные (site key) и приватные (secret key) ключи от обеих версий Google reCAPTCHA на сайте.
Добавляем на страницу скрипт, указав в параметре публичный ключ версии 3
Создаем форму, в которую помимо наших полей добавляем два скрытых для токенов, а также один блок, в который будет добавляться видимая капча. Блоку требуется задать значение атрибута «id».
Форма у нас будет отправляться по ajax. Пишем обработчик для события подтверждения формы. Тут:
— открытый который проверяет, что определена переменная grecaptcha из библиотеки Google, получает токен и записывает его в скрытое поле, после чего отправляем форму.
Отправляем ajax запрос с данными формы на сервер
Если на сервере проверка пройдена и данные формы приняты, получаем сообщение об успехе и выводим информацию об этом пользователю
Если произошла ошибка, связанная с версией 3 (не отчечает сервер или недостаточно баллов), то рендерим капчу версии 2
В функции-коллбеке setTokenV2 передается токен от второй версии капчи, его мы записываем во второе скрытое поле
В этой же функции можно сразу вызвать sendForm() или предоставить пользователю самостоятельно нажать на кнопку. На этот раз форма улетает уже с двумя токенами, при этом первым проверяется токен версии 2, на всякий случай на стороне сервера по нему тоже получаем инофрмацию от Google, и если все в порядке, возвращаем информацию об успехе в браузер, где и показывем соответстующее сообщение.
Код серверной части в файле ajax.php:
Надеюсь, кому-то пригодиться в работе, также буду рад комментариям и вопросам.
Защита форм от спама «невидимой» Google reCAPTCHA v3 без потери баллов по PageSpeed Insight
Периодически возникал вопрос по защите от ботов различных форм на сайте: регистрация, авторизация, подписка на рассылку, обратная связь, комментирование и т.д.
Стандартная капча — бесполезная, ботами она проходится «на раз», а пользователям создает проблемы.
Оптимальное решение это использовать Google reCAPTCHA v2 или v3. Обе версии Google reCAPTCHA — отличный вариант. Это лучшее, что сейчас доступно на рынке из понятных и надежных решений к тому же бесплатных.
Основная проблема у обеих версий — при подключении значительно снижаются баллы по PageSpeed Insight на 20-30.
Пример reCAPTCHA v2 — требует угадывать картинки
 |
 |
Важный для меня момент — не создавать проблемы реальным пользователям, т.к. я сам не большой любитель угадывать транспортные средства в reCAPTCHA v2, поэтому мой выбор v3.
Итак две проблемы Google reCAPTCHA v3, которые необходимо решить:
В лицензионном соглашении Google допускает убрать логотип, скрыв его через CSS.
Взамен под каждой формой написать «Защита от спама reCAPTCHA Конфиденциальность и Условия использования» со ссылками на соответствующие страницы Google.
|
Потеря баллов по Google PageSpeed Insight
При подключении javascript-файла от reCAPTCHA v3, сильно снижаются баллы по Google PageSpeed Insight. Для меня это было критично. Думаю, что это связано с анализом поведения пользователей (подобное снижение происходит при использовании вебвизора в Яндекс.Метрике).
На хорошо оптимизированных ресурсах можно потерять 20-30 баллов. Поэтому использовать её на отдельных страницах, где скорость не важна (например, контактов) можно и без модификаций. Для использования на всём сайте (например, для защиты сквозной формы авторизации или подписки на рассылку) желательно сделать модификацию.
Я придумал вариант инициализировать reCAPTCHA v3 по клику на поля формы. По умолчанию javascript-файл от reCAPTCHA v3 не загружаю, и только если пользователь поставил курсор на одно из полей формы выполняю его загрузку. Скорее всего данный метод снижает точность определения реальных пользователей, но проблем не возникало. Для моих задач данной точности хватает.
Данную методику начал применять сначала на веб-формах 1С-Битрикс, далее для сквозных форм авторизации и подписки на рассылку на сайтах без Битрикса.
Ввиду того, что 1С-Битрикс публичная CMS, расскажу в общих чертах на её примере — про методику и возможный вариант использования. Более тонкую настройку можно сделать под свои потребности.
Использование Google reCAPTCHA v3 в веб-формах 1С-Битрикс
1. Форму вызываем стандартным компонентом bitrix:form и делаем 2 дополнения:
|
2. Добавляем в javascript-файл сайта или компонента инициализацию reCAPTCHA при клике по полям формы (в этом примере я предполагаю, что вы используете jQuery):
3. Добавляем отслеживание клика по кнопке button в форме. Далее внутри, используем пример описанный в документации Google. Он заполняет поле g_recaptcha_response, которое мы будет использовать на последнем шаге для валидации пользователя.
4. Отслеживаем event onBeforeResultAdd в init.php
Перед отправкой результатов формы делаем обращение на сервер Google с вашим
, и значением из hidden поля g_recaptcha_response из формы.
В ответ получаем баллы данного пользователя:
В заключение
Данную методику можно использовать на любых сайтах и формах вне зависимости от CMS. Я привёл общие методики работы, которые можно применять в своём проекте.
Подобным образом можно поступить и с Google reCAPTCHA v2, инициализировать по клику на форме и просить пользователя установить галочку «Я не робот» и отгадать картинки, если потребуется. В данном случае это также сэкономит баллы по PageSpeed Insight и даст пользователю инструмент (выбирать картинки), чтобы доказать, что он не робот. Но как я уже говорил выше для меня самое важное, это не создавать пользователю преград.
Что такое капча? В чем разница между ReCaptcha v1, v2 и v3?
Капчи есть везде, от веб-сайтов электронной коммерции до порталов бронирования билетов. Бросая вызов вам доказать, что вы не робот на основе различных тестов, Captcha помогли контролировать спам-трафик в Интернете.
Благодаря эффективности теста популярность Captcha выросла, и миллионы людей во всем мире решали Captcha для создания электронных писем или доступа к необходимому контенту. По словам доктора фон Ана, в 2006 году люди ежедневно решали 200 миллионов капч.
Recaptcha: Captcha для цифровой эпохи
Хотя Captcha помогала Интернету предотвращать атаки ботов, человеческие усилия по решению этих головоломок не использовались эффективно. Так родилась рекапча. Вместо использования случайно сгенерированных слов Рекапча использовал слова из старых книг, которые переводились в цифровую форму и не могли быть поняты компьютерами.
Recaptcha работала, показывая своим пользователям пару слов, оба из которых были из книги, оцифрованной. Одно из показанных пользователю слов может быть понято компьютером с помощью программного обеспечения оптического распознавания символов (OCR). Напротив, другое слово не может быть идентифицировано с помощью того же самого. Слово, которое может быть идентифицировано с помощью OCR, известно как контрольное слово и используется для проверки правильности ответа на неопознанное слово и проверки того, что человек является человеком.
Это было отличным нововведением, и в 2009 году Google купил Recaptcha. Он использовал Recaptcha для архивирования книг в архивах книг Google. Она также использовался Google для улучшения просмотра улиц Google, помогая картам Google эффективно отображать адреса в Картах Google.
Все это было здорово, но с развитием искусственного интеллекта и алгоритмов глубокого обучения компьютеры догоняли людей, и они могли разгадывать капчи с большой эффективностью. Фактически, данные из Captcha использовались для обучения сверхточных нейронных сетей с точностью 99,8%. Это было проблемой, потому что компьютеры могли решать капчи с текстовыми изображениями, и требовалось что-то новое.
Recaptcha V2: проще для людей, но не для ботов
Кажется странным, правда? Раньше вам приходилось идентифицировать текст с линиями и плохим фоном, а теперь все, что вам нужно сделать, это установить флажок, и вы не будете считаться роботом. Это связано с тем, что, когда вы устанавливаете флажок, Google использует предварительный анализ рисков на основе вашей активности в Интернете, чтобы определить, являетесь ли вы ботом или нет.
Recaptcha V2 также поставляется с невидимой версией, в которой пользователю не нужно устанавливать флажок, вместо этого скрипт Recaptcha запускается при нажатии кнопки на веб-сайте.
Если Google считает, что пользователь не является ботом, он перенаправляет пользователя на следующую страницу, в противном случае пользователю показывается проблема классификации изображений, которая очень сложна для ботов. Опять же, если пользователь решает проблему, он перенаправляется на следующую страницу.
Хотя Recaptcha V2 был лучше, чем Recaptcha, конечному пользователю это доставляло некоторые неудобства. Если по какой-то причине анализ рисков Google решил, что вы бот, вам нужно было найти светофор в наборе изображений или т.п.
Идеальна ли Recaptcha V3?
Увидев действие на странице, веб-мастер может решить, что нужно сделать с этим действием. Веб-мастер может запросить у пользователя двухфакторную проверку или любую другую форму идентификации, чтобы пропустить суеверные действия или полностью заблокировать такую активность.
Для создания этой оценки Google использует адаптивный анализ рисков и, благодаря адаптивному характеру алгоритма, изучает, как люди взаимодействуют с конкретным веб-сайтом, и соответственно присваивает оценки. Из-за этого ботам сложно имитировать людей.
При этом Recaptcha v3 небезупречна, и ее можно обойти с помощью обучения.
Google рекомендует веб-мастерам встраивать скрипт Recaptcha V3 на несколько страниц, чтобы Google мог лучше анализировать трафик на веб-сайте.
Используя демонстрационный веб-сайт, на котором запущен скрипт Recaptcha, вы можете увидеть свои оценки, которые генерирует скрипт. Если вы откроете сайт в обычном веб-браузере, в который вошла ваша учетная запись Google, вы получите высокий балл 0,9. С другой стороны, если вы используете VPN вместе с браузером, в котором нет вашей учетной записи Google, ваша оценка может снизиться до 0,3. Это показывает, что алгоритм может быть смещен в сторону пользователей, которые используют VPN или блокировщики рекламы для повышения конфиденциальности, давая им более низкий балл.
Google сообщил Fastcompany, что сценарий также отправляет «информацию об оборудовании и программном обеспечении, включая данные об устройствах и приложениях, обратно в Google для анализа, и что служба используется только для борьбы со спамом и злоупотреблениями».
Хотя Google утверждает, что данные, собранные с помощью Recaptcha, не используются для рекламы, он по-прежнему собирает данные от своих пользователей с помощью скриптов, работающих на заднем плане веб-сайтов.
Глядя на Recaptcha V3, можно сказать, что это палка о двух концах. Google много работал над улучшением обнаружения ботов в Интернете, создавая беспроблемный опыт для пользователей, но он собирает данные и вторгается в конфиденциальность пользователей, чтобы обеспечить такой опыт.
Традиционно на данный момент все настраивают именно Google Recaptcha (произносится как «Гугл Рекапча»).
Она бесплатная, простая и всем знакомая.
Поэтому ее и будем использовать для установки на сайт.
Я работаю с WordPress и Opencart, и сейчас рассмотрю процесс установки рекаптчи именно в этих системах.
Первые шаги
Далее вам предложат выбрать что поставить: Recaptcha v3 или Recaptcha v2
Такая капча не видна для 99% «порядочных» пользователей, а появляется только для тех, кого Гугл посчитает роботом.
Это очень удобно.
Можно отправлять любые формы и не заморачиваться с каптчей.
А вот спам-боты уже столкнутся с защитой.
Recaptcha v2
Recaptcha v3
Настройки
Итак, выбрали ReCaptcha V3, как-то сверху обозвали свой проект (например, «Гугл Капча 3» или «Мой сайт») и затем вводите свой домен, на который устанавливается каптча.
Если у вас много доменов, то можно, конечно, внутри нашлепать их много в одной капче. Но по моему опыту чем больше напихано разных доменов внутрь одного набора ключей, тем выше вероятность появления капчи, поэтому я рекомендую для каждого домена создавать свой набор ключей.
Внизу переходим далее по кнопке и видим ключи, которые нужно добавить на сайт.
Отсюда их надо будет копировать на сайт.
Можете и сразу себе куда-нибудь скопировать, если не хотите потом возвращаться в настройки.
Жмем «Открыть настройки» и выбираем еще флажок «Разрешить использование Гугл капчи на AMP страницах», может пригодится, если будете использовать формы в AMP (как ускорить сайт с AMP в 10 раз).
Добавление ключей капчи в WordPress
99% всех шаблонов на WordPress содержит поля, куда можно добавить ключи гугловской капчи.
Жмем на «Интеграция» и видим удобные поля для размещения ключей.
Вставляем по очереди каждый ключ и сохраняем.
Всё готово.
Теперь во всех формах, которые работают с помощью плагина Contact Form, будет автоматическая невидимая капча.
В WP Forms всё аналогично.
Собственные настройки шаблона
Если нет плагина форм типа Contact Form или подобного, то уточните у разработчика шаблона или сайта: «Куда мне ввести ключе гугл капчи» и вам подскажут.
Вот, например, как это может добавляться в настройках темы:
Добавляете ключи в соответствующие поля и каптча готова к использованию.
Добавление ключей капчи в Opencart
Тут еще проще, потому что добавление гугловской капчи версии 2 поддерживается на уровне самого движка, не нужны ни специальные темы, ни сторонние модули.
Теперь переходим внутри (синяя кнопка редактировать) и вводим ключи. Сохраняем.
Убедитесь что напротив Google Recaptcha есть слово «по умолчанию». Это значит, что будет использоваться именно эта капча.
Если нету этого слова, то открывайте основные «Настройки» магазина.
Сохраните.
На всякий случай сбросьте кэш, иногда бывает, что настройки магазина кэшируются.
Обычно или сразу, или через несколько минут Google Recaptcha вступает в действие.
Как понять что капча работает:
Гугл Капча 2 версия: появляется знакомое поле для флажка «я не робот». Можно также использовать невидимую каптчу.
Гугл капча 3 версия: изначально невидимая, но появляется справа внизу плавающий стикер, который имеет смысл отдельно скрыть через css, чтобы не маячил.
Возможные проблемы
Основные трудности, которые я встречал при установке гугловской капчи.
«Неверный ключ домена»
Значит не правильно прописаны ключи.
Или не те, что надо. Или не всё скопировалось. Или не в те поля.
Или просто надо подождать минут 20.
Или вы всё-таки забили на то, что я написал ранее, и всунули Рекаптчу 3 в Opencart 
«Гугл Капча 2 версии часто появляются картинки»
Если вы решили поставить привычную вторую версию рекапчти, иногда можно заметить, что после клика на привычный флажок «Я не робот» вдруг появляются невнятные картинки из серии «найди светофор» или «найди все мосты» и т.п.
В этом случае Google Recaptcha считает, что вы и ваши посетители очень похожи на роботов и предлагает усложненное задание. Это ухудшает конверсии (не забываем 5 простых способов повысить конверсии), поэтому при настройке второй версии каптчи лучше изначально выбрать уровень безопасности как «простой». Это делается в настройках рекаптчи простым перетягиванием ползунка.
В версии 3 такой настройки в Google нет, там уровень безопасности от 0 до 1 определяют сами плагины и модули, если в них встроен такой функционал (в WordPress в плагине WP Forms я его встречал, в Opencart не видел).
«Recaptcha не работает»
Установили капчу, а спам всё равно валится? Скорее всего, есть где-то форма, в которую разработчик сайта забыл поставить рекаптчу.
Чаще всего, это происходит в магазинах Opencart, потому что форм много: регистрация, быстрый заказ, обратный звонок, нашли дешевле и т.п. Банально программист мог забыть куда-то что-то дописать.
Вот еще видео как я ставил гугл рекапчу v2 на готовый магазин Opencart 3
Выводы и итоги
Чтобы его отключить можно добавить в CSS сайта строчку:
Обычно это легко можно сделать.
В тех готовых решениях, что я предлагаю, впрочем, это уже настроено.
В результате блок визуально не отображается на сайте и не отвлекает посетителей от ценного контента
Успехов в бизнесе!
Полезный совет: Как можно быстро добавить полезную статью в закладки своего браузера: просто нажмите на клавиатуре «CTRL + D» и кнопку «Готово», это работает в большинстве браузеров, проверьте сейчас!
Recaptcha v3 или v2 что лучше для сайта
Хостинг и домены
VPS/VDS и серверы
Прочие услуги
Практически каждый владелец сайтов в интернете сталкивался с проблемой вредоносных ботов, которые начинают атаковать формы обратной связи, окна регистрации на сайте, комментарии под постами и так далее. Если не защитить данные объекты, то это может привести к серьезным проблема. IP-адрес сайта может попасть в спам базы, комментарии под записями на сайте могут стать рассадником вредоносных ссылок, почтовые сервера могут начать считать что ваш сайт используется для рассылки спама, что приведет к проблемам с отправкой писем с вашего почтового домена, иными словами, нормальные письма с вашего сайта начнут попадать в папку «Спам» у пользователей вашего сайта. Мы перечислили только несколько основных проблем, однако, уже по ним можно понять, что негативное воздействие ботов на сайтах необходимо пресекать.
Исторически сложилось, что самым оптимальным решением данной проблемы является ввод на сайт капчи. Самым распространенным видом капчи является reCAPTCHA от Google. В данной статье мы рассмотрим принципы работы двух актуальных на текущий момент версий этой капчи – v2 и v3.
Просим вас заметить, что в данной статье не будет идти речь о reCAPTCHA v1. Данная версия капчи не поддерживается Google с марта 2018 года.
В чем отличия reCAPTCHA v2 и v3?
Если вкратце, то v2 проверяет запросы с помощью заданий, а v3 с выполняет проверку с учетом оценок пользователя на веб-сайте.
Разберем данные версии более детально:
reCAPTCHA v2
При обычной настройке, данный вид капчи, после выполнения какого-либо запроса, например, по отправке информации из формы обратной связи, или при запросе на регистрацию на сайте, попросит пользователя поставить флажок возле надписи «Я не робот»:
После того, как пользователь установит флажок, google, с помощью своих алгоритмов, проанализирует риски на основе активности данного пользователя в интернете и определит, является ли он роботом или нет. Если google решит, что пользователь вероятнее всего является человеком, то запрос пользователя обработается. Данный способ с установкой флажка также называется «NoCAPTCHA». Если система посчитает что пользователь может быть роботом, то появится окно с задачей, которую пользователю предстоит решить. Например, это может быть запрос найти все изображения с грузовиками, лодками, светофорами и другими объектами из предоставленных 9 картинок. Для ботов эта задача довольно проблематичная, поэтому данная капча является надежным вариантом для защиты вашего сайта от вредоносного воздействия. Если пользователь правильно решит задачу, то его запрос на сайте будет выполнен, либо ему откроется следующая страница, в зависимости от изначального запроса.
В чем недостатки такой капчи?
Алгоритмы google могут принять обычного пользователя за подозрительного, в силу чего, посетителю вашего сайта может не понравится решение задачи капчи, вместо простого использования функционала сайта. Зачастую данные «головоломки» являются довольно сложными и для обычного человека, так как восприятие объектов у каждого человека свое и порой отличить грузовик от внедорожника для некоторых людей может быть проблемой, особенно учитывая низкое качество предоставляемых картинок.
Вторым немаловажным моментом в минусах у данной версии капчи является особенность ее работы. Для анализа поведения человека в интернете также используются куки его браузера. Если куки были очищены, либо пользователь сидит в анонимном режиме браузера (инкогнито), то с большей долей вероятности, посетитель вашего сайта в любом случае будет вынужден решать задачу капчи, то есть «NoCAPTCHA» для данных посетителей будет недоступна.
У reCAPTCHA v2 есть еще один режим работы, так называемая невидимая версия работы. В данном режиме, вместо появления окна с чекбоксом «Я не робот», система автоматически начнет проверять пользователя с помощью своих алгоритмов.
reCAPTCHA v3
Это самая новая версия reCAPTCHA, которая фактически является невидимой для обычных пользователей, или, другими словами, фоновой. В данной версии используется более сложная система продвинутого анализа риска с усовершенствованным поведенческим анализом. Теперь, скрипты на сайте анализируют поведение посетителя и ставят ему оценку от 0.0 до 1.0. Чем выше оценка поставлена посетителю вашего сайта, тем с большей вероятностью он является реальным человеком. По умолчанию данная оценка для пользователя является 0.5. Исходя из этих цифр, вы можете настраивать, какое значение оценки должно быть, чтобы клиент мог выполнить определенное действие на вашем сайте. Например, на форму входа в аккаунт вы можете задать значение 0.7, чтобы только более достоверные пользователи без проблем заходили в аккаунт. Если оценка посетителя будет ниже установленной, то система сможет запросить у пользователя двухфакторную аутентификацию или различные другие действия, которые вы зададите для определенного сценария.
Какие минусы могут быть у данного метода?
Google скрывает принципы работы своих алгоритмов, связанных с reCAPTCHA v3, поэтому как точно будет поставлена оценка в определенных моментах работы вашего сайта трудно сказать. Кроме того, есть информация, что использование VPN или блокировщиков рекламы может негативно сказываться на оценке пользователя, то есть данные пользователи могут считаться скорее ботами, чем людьми.
Также, в соответствии с пользовательским соглашением google, на вашем сайте будет висеть логотип, что сайт защищен от спама с помощью reCAPTCHA:
Однако, данное лицензионное соглашение также допускает скрывать логотип с помощью CSS кода:
Но скрыв данный баннер, вам необходимо будет под каждой формой использующей капчу написать: «Защита от спама reCAPTCHA Конфиденциальность и Условия использования» со ссылками на соответствующие страницы Google. Подробнее про данные нюансы вы можете узнать в официальном FAQ по reCAPTCHA от google.
Подведем итоги. Не смотря на сказанные в данной статье минусы, reCAPTCHA v2 и v3 остаются одними из самых надежных способов защиты вашего сайта от спама, брутфорса и прочих негативных воздействий ботов. Кроме того, описанные решения являются бесплатными и простыми в использовании, что делает данные капчи отличным инструментом, который мы рекомендуем использовать на ваших сайтах.