Новая reCAPTCHA от Google 3 версии: возможности и установка на сайт

Дата публикации: 24.12.2018

google-recaptcha-v3Доброго времени суток 🙂

С каждым годом спама в Интернете становится всё больше. Большая заслуга этого «достижения» заключается в высоком уровне развития современных информационных технологий.

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

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

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

Думаю, знакомая ситуация 🙂

Но, в то же время Google не собирается полностью отказываться от технологии CAPTCHA, т.к. польза её применения многократно превышает периодические неудобства конечных пользователей Интернет.

Компромиссным вариантом стала модификация данного продукта и выпуск Google reCAPTCHA v3, о которой мы сегодня и поговорим.

Особенности Google reCAPTCHA v3

При создании новой рекапчи Google решил проанализировать предыдущие версии данного продукта, а также все их преимущества и недостатки.

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

При разработке второй версии Google рекапча разработчики применили другой подход, призванный устранить главную проблему первой версии — невозможность её прохождения людям с проблемами со зрениям и дисплексией. Кроме этого, компанию критиковали за бесплатное использование человеческого труда, т.к. тексты с картинок, которые нужно было вводить для прохождения Google CAPTCHA, представляли собой не что иное, как сканы выпусков New York Times с 1851 года, которые Google использовала в своих целях.

Google reCAPTCHA v2 была лишена данного недостатка, т.к. при её прохождении учитывались поведенческие факторы, а для её разгадывания нужно было всего лишь поставить галочку в поле Я не робот. Подозрительным с точки зрения алгоритма пользователям предоставлялась дополнительная проверка в виде выбора подходящих по смыслу картинок, а благонадёжных же система пропускала дальше.

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

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

Всё это послужило стимулом для разработки reCAPTCHA v3, бета-версия которой официально была презентована в мае этого года на конференции Google I/O 2018. А с октября 2018 года данный продукт находится в открытом доступе и воспользоваться ей может любой желающий.

http://cccp-blog.com/wp-includes/images/banners/templatemonster/bundle-20180117.jpg

Особенности алгоритма Google reCAPTCHA v3, естественно, никто не раскрывает, чтобы не давать лазейку хакерам для её взлома, но в ходе публичного бета-тестирования пользователи обратили внимание на следующие особенности новой капчи:

  • Она является бесконтактной и для её прохождения пользователям не нужно ничего делать. Данная версия капча от Google невидимая для посетителей сайта.
  • Для прохождения Google CAPTCHA 3 нужно вести себя естественно, т.к. в основу алгоритма заложен анализ действий пользователя на сайте — advanced risk analysis, который применяется Google с 2013 года ещё с самого начала ввода reCAPTCHA v2.
  • Участники тестирования предполагают, что reCAPTCHA v3 отслеживает положение курсора мыши на экране, а также клики мышкой.
  • Оценка действий пользователя происходит на сервере Google reCAPTCHA, который возвращает JSON-ответ с оценкой пользователя в баллах от 0.0 до 1.0, где максимальный балл соответствует человеку, а минимальный — роботу.

Как видите, для того, чтобы преодолеть Google reCAPTCHA v3, нужно просто оставаться человеком, как это ни банально звучит 🙂 Больше ничего не нужно никому доказывать — система сделает выводы сама.

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

Создание Google reCAPTCHA 3 версии и генерация API ключей

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

На данной странице имеется список всех создаваемых вами Google CAPTCHA, а также форма добавления новых:

spisok-dostupnykh-google-recaptcha-v2-v3

На форме добавления новой капчи вам нужно будет выбрать её версию (сейчас доступны v3 и v2, до недавнего времени была доступна ещё и v1), ввести доменное имя сайта, на котором она будет располагаться (можно несколько, если у вас есть тестовый домен или вы ведёте разработку локально) и название для капчи с целью её идентификации в списке (можно хоть «111» назвать).

В качестве демо Google reCAPTCHA v3 я решил использовать свой тестовый локальный сайт, который я создавал для демонстрации reCAPTCHA v2, состоящей из одной-единственной формы добавления комментариев, защищённой капчей. Доступен он у меня будет на локальном компьютере по адресу http://recaptcha.v3, поэтому при создании reCAPTCHA я ввёл следующие данные:

dobavlenie-novoj-recaptcha-ot-google-3-versii

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

В нижней части формы добавления новой Google CAPTCHA находятся подписи соглашений с условиями использования данного продукта, которые включают в себя обязательное уведомление конечных пользователей об использовании reCAPTCHA v3 у себя на сайте (т.к. она невидимая), согласие на обработку персональных данных:

soglashenie-ob-ispolzovanii-google-recaptcha-v3

Интересным пунктом соглашения является запрет использования капчи для определения платежеспособности, финансового статуса и страховых возможностей — интересно, каким образом? 🙂

А также в самом низу формы появилось поле, после установки галочки в котором вам на email будут поступать сообщения о подозрительном трафике, зафиксированном с помощью Google reCAPTCHA, а также о проблемах с настройкой капчи и сайта в целом.

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

Библиотека курсов

После ввода данных и нажатия на кнопку Регистрация вы попадёте на страницу со сгенерированными API ключами для клиентской и серверной части сайта:

sozdanie-novoj-google-recaptcha-v3

Также моё внимание привлекло сообщение в самом верху страницы о том, что при недостаточном количестве пользователей результаты проверки reCAPTCHA могут быть неточными. Из этого косвенно следует то, что алгоритм определения «человечности» пользователей будет вычислять показатель на основании средней активности пользователей сайта.

Т.е. шкала от 0 до 1 не будет универсальной для всех сайтов. И, нужно сказать, что это правильно, т.к. активность пользователей на странице сайта-казино и блога будет совершенно различной.

Ещё один вывод, который следует из данного сообщения — при локальной разработке и тестировании сайта Google reCAPTCHA v3 лучше отключайте, чтобы сэкономить свои нервы, т.к. она может не срабатывать из-за банальной нехватки статистики.

Правда, я проигнорирую свою же рекомендацию, т.к. мой демо-сайт будет одновременно являться и live/production, поэтому просто продолжу установку.

Установка Google reCAPTCHA v3 на PHP сайт

Шаги установки Google reCAPTCHA v3 очень подробно описаны на финальном экране создания Google reCAPTCHA v3 с API ключами, поэтому я просто их выполню.

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

demo-google-recaptcha-v3

Backend сайта разработан на моём любимом PHP и для данного примера он будет состоять из 2 файлов. Первый из них, index.php, является точкой входа и содержит всего одну строчку рендеринга HTML файла с вёрсткой формы комментариев form.html.

index.php:

<?php

include('form.html');

form.html:

<html lang="ru">
    <head>
        <title>Google reCAPTCHA noCAPTCHA demo</title>
        <meta charset="utf-8">
    </head>

    <body>
        <form method="post" action="verify_captcha.php">
            <p>
                <b>Введите комментарий:</b>
            </p>

            <p>
                <textarea name="comment" rows="12" cols="21"></textarea>
            </p>
			
            <p>
                <input type="submit" value="Отправить">
            </p>
        </form>
    </body>
</html>

Первым этапом добавления Google reCAPTCHA на сайт является добавление JavaScript кода, содержащего клиентский API-ключ, в HTML код сайта. Клиентский код состоит из двух скриптов: общего скрипта библиотеки, предоставляющего объект grecaptcha, который мы должны разместить в шапке сайта между тэгами head, и скрипта отправки запроса на сервер reCAPTCHA.

После добавления кода Google reCAPTCHA v3 код формы стал выглядеть следующим образом:

<html lang="ru">
    <head>
        <title>Google reCAPTCHA noCAPTCHA demo</title>
        <meta charset="utf-8">
        <script src='https://www.google.com/recaptcha/api.js?render=your_key'></script>
    </head>
    
    <body>
        <form id="comment-form" method="post" action="verify_captcha.php">
            <p>
                <b>Введите комментарий:</b>
            </p>
        
            <p>
                <textarea name="comment" rows="12" cols="21"></textarea>
            </p>
        
            <p>
                <input type="submit" value="Отправить">
            </p>
        </form>
    </body>
    
    <script>
        grecaptcha.ready(function () {
            grecaptcha.execute('your_key', {action: 'action_name'})
                .then(function (token) {
                    // Verify the token on the server.
                });
        });
    </script>

При этом на странице в правом нижнем угле появилась иконка Google reCAPTCHA, которая предусмотрена Пользовательским соглашением и служит для информирования пользователей о применении данного продукта. Так что удалять или скрывать её я вам настоятельно не рекомендую, а если это потребует сделать заказчик — можете смело приводить предыдущее предложение в качестве аргумента 🙂

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

Официальная документация Google никаких чётких указаний и примеров не даёт, поэтому пришлось находить решение самостоятельно 🙂

Google reCAPTCHA v3 в этом плане отличается от предыдущей версии, для интеграции которой нужно было встраивать в защищаемую от спама HTML форму скрытое поле с клиентским API ключом. В итоге, на сервере данный ключ подтверждался отправкой повторного запроса на Google сервер — и вся магия происходила на стороне PHP бэкэнда.

Из кода же рекапчи 3 версии напрашивается решение, что нужно делать ajax запрос на сервер к PHP скрипту, внутри которого проверять, является ли человек роботом или нет.

Отправку AJAX запроса из JavaScript на бэкэнд я реализовал следующей модификацией кода формы:

<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('your_key', {action: 'add_comment'})
            .then(function(token) {
                var data = new FormData();
                data.append("action", 'add_comment');
                data.append("token", token);

                fetch('/verify_captcha.php', {
                    method: 'POST',
                    body: data
                }).then(function(response) {
                    response.json().then(function(data) {
                        if (!data) document.getElementById('comment-form').style.display = 'none';
                    });
                });
            });
    });
</script>

Как видите, отправку HTTP запроса из JavaScript кода я реализовал с помощью JS метода fetch(), запуская на бэке скрипт verify_captcha.php, передавая в него генерируемый на стороне Google reCAPTCHA сервера токен и action, который будет использоваться для дополнительной верификации запроса на нашем сервере.

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

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

<?php

if (isset($_POST['token']) && isset($_POST['action'])) {
	$captcha_token = $_POST['token'];
	$captcha_action = $_POST['action'];
} else {
	die('Капча работает некорректно. Обратитесь к администратору!');
}

$url = 'https://www.google.com/recaptcha/api/siteverify';
$params = [
    'secret' => '6Lfwl4MUAAAAAKCP8ZV13J6ngN_A9RiPtzxM9CDi',
    'response' => $captcha_token,
    'remoteip' => $_SERVER['REMOTE_ADDR']
];

$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$response = curl_exec($ch);
if(!empty($response)) $decoded_response = json_decode($response);

$success = false;

if ($decoded_response && $decoded_response->success && $decoded_response->action == $captcha_action && $decoded_response->score > 0) {
    $success = $decoded_response->success;
    // обрабатываем данные формы, которая защищена капчей
} else {
    // прописываем действие, если пользователь оказался ботом
}

echo json_encode($result);

В итоге, при отправке запроса на сервер рекапчи с нашего бэкэнда я получил ответ в следующем формате:

stdClass Object
(
    [success] => 1
    [challenge_ts] => 2018-12-20T22:34:13Z
    [hostname] => recaptcha.v3
    [score] => 0.9
    [action] => add_comment
)

На основе полученных данных я и организовал финальную проверку перед обратной отправкой данных на сторону клиента, где проверяются название action, статус операции и оценка действий пользователя, определяющая «человечность» пользователя.

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

Однако у данного подхода есть несколько минусов:

  • Поскольку алгоритм работы Google reCAPTCHA v3 засекречен и неясно, как происходит выставление баллов пользователям, есть велика вероятность, что данная проверка не будет работать корректно из-за недостатка данных.
  • Страница долго грузится, т.к. на этапе её загрузки оправляется 3 лишних запроса на сервер рекапчи и наш собственный.

Чтобы устранить данные недостатки я решил реализовать проверку действий пользователя не на этапе загрузки страницы с отправкой AJAX запроса на наш сервер, а непосредственно при оправке данных формы, прикрепляя к ней action и токен, сгенерированный на reCAPTCHA сервере.

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

При этом код формы у меня принял следующий вид:

<html lang="ru">
    <head>
        <title>Google reCAPTCHA noCAPTCHA demo</title>
        <meta charset="utf-8">
        <script src='https://www.google.com/recaptcha/api.js?render=your_key'></script>
    </head>
    
    <body>
        <form id="comment-form" method="post" action="verify_captcha.php">
            <input type="hidden" name="token" id="token">
            <input type="hidden" name="action" id="action">
        
            <p>
                <b>Введите комментарий:</b>
            </p>
        
            <p>
                <textarea name="comment" rows="12" cols="21"></textarea>
            </p>
        
            <p>
                <input type="submit" value="Отправить">
            </p>
        </form>
    </body>
    
    <script>
        let captcha_action = 'add_comment';
    
        grecaptcha.ready(function() {
            grecaptcha.execute('your_key', {action: captcha_action})
                .then(function(token) {
                    if (token) {
                        document.getElementById('token').value = token;
                        document.getElementById('action').value = captcha_action;
                    }
                });
        });
    </script>
</html>

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

Как видите, в данном варианте я, по сути, совместил две версии Google reCAPTCHA в одну: капча является скрытой и токен является генерируемым, как в рекапче v3, но при этом серверная валидация происходит на сервере по запросу с фронта, а не при загрузке страницы.

Достигается это за счёт добавления скрытых полей в форму, значения которым задаются при получении ответа от Google reCAPTCHA сервера.

Мои впечатления от Google reCAPTCHA v3

Что я могу сказать в итоге о новой Google reCAPTCHA v3? С точки зрения пользователя данный продукт однозначно намного удобнее своих предшественников за счёт того, что теперь не нужно вводить никаких трудноразличимых символов и выбирать непонятные картинки. А всё это время и раздражение посетителей, что может привести к тому, что они попросту передумают вводить информацию, а может и вовсе отказаться от использования ресурса в целом.

Теперь же, когда капча стала полностью невидимой, все эти проблемы остались в прошлом, т.к. решение о том, является ли пользователь роботом или нет, будет приниматься в фоновом режиме на основании его поведения на сайте. Главное только, чтобы данный алгоритм действительно защищал ресурсы от автоматизированных атак, т.к. его детали засекречены и всё, что нам остаётся — это верить на слово «Корпорации добра» 🙂

В плане интеграции Google reCAPTCHA 3 на сайт я лично никаких существенных изменений не заметил. Так же, как и раньше, валидация действий пользователя происходит на сервере и клиенте. Серверная часть вообще осталась без изменений — для серверной проверки я использовал код, разрабатываемый для Google reCAPTCHA 2.

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

Одним словом, теперь при интеграции клиентской части кода Google reCAPTCHA v3 появилось ещё больше гибкости, вследствие чего появится ещё больше вариантов реализации капчи на сайтах.

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

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

Демо версию Google reCAPTCHA v3 вы сможете найти внутри репы в каталоге google_captcha_v3. Буду рад любым предложениям по улучшению кода и активному участию в виде pull-requests.

P.S.: если вам нужен сайт, но нет времени самостоятельно его разрабатывать, могу порекомендовать вам своего проверенного партнёра - вебстудию Дениса Нихаева. Было не просто, но я всё-таки выбил для вас скидку 20%, что составит до 20 тысяч рублей в зависимости от выбираемого тарифа 🙂 Вот промо код - CCCP. При заказе сообщите его и скидка вам гарантирована! Друзьям тоже можете рассказать 😉

Понравилась статья? Поделись с друзьями:
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
8 голосов, в среднем: 5 из 5

Похожие темы

26 комментариев к статье "Новая reCAPTCHA от Google 3 версии: возможности и установка на сайт"

  1. Иван

    Спасибо за подробный обзор с примерами кода, 2 версия капчи действительно парила мозги, иногда тратил по 2-3 минуты, щелкая по картинкам)

  2. Алексей

    Доброго дня!

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

    1. Что мне делать при регистрации если у пользователя будет оценка, к примеру, ниже 0.5?
    Блокируем регистрацию для такого пользователя? Навсегда? На час или другой промежуток времени?
    2. Может ли данная капча защитить от автоматической регистрации пользователей? Если да, то какой механизм защиты вы видите?
    3. Может ли данная капча защитить от брутфорс атак формы авторизации?

    1. Pashaster Автор

      Здравствуйте. Спасибо за комментарий 🙂 По поводу Ваших вопросов:

      1. Хороший вопрос, на самом деле 🙂 Самое интересное, что сам Google не даёт чёткого определения, какая оценка соответствует роботу, а какая — человеку. Вот, что говорится в официальной документации Google reCAPTCHA v3: reCAPTCHA v3 returns a score (1.0 is very likely a good interaction, 0.0 is very likely a bot). Т.е. если балл 1.0 — это очень похоже на хорошее взаимодействие (реального пользователя), 0.0 очень похоже на бота. На этой же странице Google рекомендует брать в качестве граничного значения 0.5. Т.е. опять всё основано на рекомендациях и чрезмерной гибкости — решать в итоге всё равно Вам и устанавливать предел для роботов тоже Вам. Следовательно, если reCAPTCHA v3 покажет меньше установленной границы — пользователя можно считать роботом и его действие не засчитывать. По поводу постоянной или временной блокировки — также решать Вам. На практике используются оба подхода.

      2. Да, может. С этой целью все капчи, собственно говоря, и разрабатываются 🙂 Механизм описан выше — выбираете граничное для робота значение и если рекапча покажет меньшее число — пользователь является роботом и его действие должно не учитываться. Как вариант, можно генерировать исключение или отдавать какой-то специфический HTTP код ошибки с обязательной записью попытки в лог сайта, чтобы в дальнейшем можно было проанализировать ситуацию и активность атакующих. Также будет хорошо блокировать пользователя, как Вы и сами предложили ранее, по его IP и внутреннему id пользователя, если атака производилась авторизованным пользователем (а при атаке с разных IP адресов данный параметр будет являться единственной зацепкой для блокировки).

      3. Да, может. С помощью той же временной или постоянной блокировки по IP (внутренний id пользователя здесь не поможет, т.к. пользователь не авторизовался). Поскольку брутфорс-атаки — это разновидность автоматизированных атак, то reCAPTCHA с большой долей вероятности определит частые попытки авторизации как действия робота. А Вам останется только заблокировать данного пользователя. Для уверенности всё же я порекомендовал сделать на бэке дополнительную проверку на частоту запросов с одного IP. Если частота попыток входа с одного адреса будет больше 1 запроса в 2-3 секунды (быстрее реальный человек вряд ли введёт), то это — робот и смело можете банить его. Для начала можно временно (на час, например). Если пользователь получит несколько временных банов — можно банить постоянно.

      Кстати, капча может спасти даже при атаке с разных IP (если каждая атака производится с разных IP), при которых бан по IP будет малоэффективен.

  3. Леонид

    Здравствуйте, мне кажется, что в Вашем втором варианте при валидации капчи может вернуться ошибка: «timeout-or-duplicate» если пользователь затянул с отправкой формы после входа на страницу.
    А вообще статься очень помогла, спасибо!

    1. Pashaster Автор

      Спасибо за отзыв 🙂 Почему Вы думаете, что может возникнуть ошибка валидации CAPTCHA timeout-or-duplicate? Не замечал у себя при реализации. Можете подробнее кейс её возникновения описать?

    2. Илья

      У меня как раз возникает эта ошибка, если форсу отправить 2 раза.

      Спасает обновление страницы.

      Это большой косяк, если пользователь ошибся в номере телефона, отправил… и решил повторно отправить с правильным номером 🙁

      Как лечить, пока не понятно…

      1. Pashaster Автор

        А в чём косяк? Запрос с формы был отправлен. Логично, что для повторной отправки нужно будет вернуться обратно или перезагрузить страницу, если отправка с помощью AJAX без перезагрузки происходила.

        1. Илья

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

          Да — форма отправляется через ajax без перезагрузки.

          В итоге решил так.

          На генерация токена назначил jquery функция.
          1) Первый токен генерируется — по запросу формы.
          2) Новый токен генерируется после отправки формы.

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

          Как-то так.

          Что скажите, корректно это или есть подводные камни в таком способе?
          Спасибо.

          1. Pashaster Автор

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

  4. Илья

    День добрый. Есть вопрос по гугл капча 3. Установил по вашей статье, есть один вопрос. Как назначать действие, после определения оценки?

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

    Спасибо.

    1. Pashaster Автор

      Спасибо за комментарий. Отвечаю 🙂

      Оценка действий пользователя прилетает с сервера Google рекапчи уже при втором запросе с бэкэнда, т.е. из PHP скрипта, как в моём примере, C#, Ruby, Python, Node.js или другого серверного языка программирования.

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

      if ($decoded_response && $decoded_response->success && $decoded_response->action == $captcha_action && $decoded_response->score > 0) {
          $success = $decoded_response->success;
          // обрабатываем данные формы, которая защищена капчей
      } else {
          // прописываем действие, если пользователь оказался ботом
      }
      

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

      Добавил комментарии и обновил код статьи для предотвращения заблуждений у других. Спасибо за идею 🙂

      1. Илья

        Спасибо за ответ.
        Рассказываю свой кейс.

        Коммерческие сайты — форма заявки на услуги, данные уходят на почту операторам, те в свою очередь звонят и т/д
        Бывает или летит куча заявок — ну это сразу видно спам, а бывают заявки — по которым или не могут дозвонится или там люди в шоке и ничего не оставляли. Тут момент — или это боты или уже конкуренты пакостят. Сайты на WP, за форму отвечает CF7.

        Сейчас я значит сделал следующую схему.

        Отказался от CF. Теперь за отправку отвечает Ajax + PHP обработчик + Google Form + reCaptca 3

        Форма через Ajax уходит на обработчик, тот в свою очередь получает ответ от капчи. Если оценка ок — то отправляет в Google таблицу, дальше дело операторов.

        Если оценка низкая, то обработчик отправляет письмо с пометкой бот, где есть IP, User Agent и прочая инфа по которой можно оценить адекватность заявки. И в Google таблицы ничего не заносится, что б не портить статистику.

        Такой вот кейс, надо допилить и выкатывать в свет.

        Изначально идея была просто заявки собирать в таблицы, но в итоге перерасло в такой кейс.

        Главная цель — это не бесить людей «Я не робот» или неведимкой и «выберете светофоры» 🙂

        Уже позже посмотрим как это все работает. Я кстати правильно понимаю, что в идеале ставить одну капчу на все сайты, что б статистика собиралась более полной!?

        И последний вопрос, а почему в комментариях у вас капча 2й версии!? 🙂

        1. Pashaster Автор

          Для Вашего кейса данная капча подойдёт идельно. В принципе, Вы описали стандартный случай её использования.

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

          По поводу reCAPTCHA 2 на данном сайте — это, что называется, «сапожник без сапог» 🙂 На самом деле просто руки не дойдут поменять. У меня и до текущей реализации руки наверное с год доходили. И решился её установить только после того, как пользователи в комментариях стали жаловаться. До этого стояла стандартная WordPress CAPTCHA.

          С этой пока всё в порядке, спама в комментах не очень много, да и пользователи сильно не жалуются. Но есть ещё нюанс — для reCAPTCHA v3 придётся немного пересматривать дизайн, потому что она сама по себе скрытая, но сбоку экрана появится иконка о том, что она установлена (как на превьюшке к статье). Придётся подвёрстывать кнопку «Вверх», на месте которой плашка вылезет.

          В общем, как-то соберусь 🙂

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

  5. Миш

    А можно установить рекапчу перед входом на сайт, чтобы отсекать парсеров и подозрительных ботов? Какой в этом случае код будет?

    1. Pashaster Автор

      Вечер добрый 🙂 Можно, в статье есть вариант html кода страницы для отправки запроса на валидацию капчи сразу после загрузки страницы с помощью AJAX запроса на сервер приложения. Если будут проблемы с установкой — обращайтесь, будем разбираться вместе 🙂

      1. Миш

        Не, у вас там слишком сложно — форма какая-то, ответ от 0 до 1, скрипт php без закрытия кода ?>
        Нам, не программистам, нужно тыкнуть чего и куда прописать, чтобы любой человек, зашедший на сайт, проходил проверку капчей.

        1. Pashaster Автор

          Ну, чего прописать, я всем желающим даю. А уж куда — тут уж извините, всё индивидуально 🙂 Могу и с этим, конечно, помочь, но это уже за деньги.

          1. Миш

            Спасибо, что напомнили про деньги, иначе не раскачался бы, а так посидел и сделал.
            Хороший пример, но добавьте, что библиотеки для php, которые обрабатывают json и curl, могут быть не установлены по умолчанию. Я наткнулся на эти грабли.

            Мне вот нравится, когда проверка идет в фоне, а пользователь смотрит на неактивную кнопку «отправить».
            Может у вас есть подобный пример?

          2. Pashaster Автор

            Готового примера у меня нет, но Вы сами можете его сделать на основании кода из статьи 🙂 Просто в данном фрагменте укажите идентификатор кнопки и изменения её стиля (в примере происходит полное скрытие элемента):

            fetch('/verify_captcha.php', {
                method: 'POST',
                body: data
            }).then(function(response) {
                response.json().then(function(data) {
                    if (!data) document.getElementById('comment-form').style.display = 'none';
                });
            });
            
  6. Миш

    О, спасибо.

    А вообще насколько она надёжная, эта капча?
    Вы статистику смотрели, есть ложные отказы или пропуски?

    1. Павел

      Пока сложно что-то сказать, технология новая. Но оснований не доверять Гуглу, как по мне, нет 🙂

      1. Миш

        Знаете, нужен какой-то тест на робота. Как вот к ней подойти, чтобы она не пропустила?
        Меня со всех компьютеров и всех телефонов пропускает. Может она вообще всех любит? 🙂

        1. Pashaster Автор

          Попробуйте потестировать в режиме инкогнито браузера. Это самое простое. Плюс, самый верный способ — автоматизация процесса тестирования для имитации DDOS, BruteForce и другие видов атак с помощью специальных инструментов.

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

          Из самых доступных инструментов могу посоветовать Postman и другие REST клиенты, позволяющие делать массовую отправку GET/POST запросов. Запросы отправлять на url сабмита формы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *