Как подключить CAPTCHA с Cloudflare Turnstile на сайт WordPress

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

Цифры говорят сами за себя: по данным экспертов по безопасности, более 90% всех попыток входа в административные панели сайтов носят автоматизированный характер. Ежедневно тысячи ботов прочесывают интернет в поисках уязвимых WordPress-сайтов, чтобы провести атаку на форму логина (брутфорс), организовать DDoS или просто засорить вас миллионами спам-комментариев и заявок. В данной публикации, я расскажу про подключение бесплатного и главного эффективного решения CAPTCHA с Cloudflare Turnstile.

Эпоха Antispam Bee

WordPress, будучи самой популярной CMS в мире (ей пользуются более 40% всех сайтов), закономерно становится главной мишенью для злоумышленников. Ее открытость и распространенность делают ее лакомой мишенью, один успешный метод атаки можно применить к огромному количеству ресурсов. Это не просто раздражающая помеха — это прямая угроза безопасности, производительности и репутации вашего проекта. Стандартные методы вроде капчи с искаженными буквами уже не работают — их давно научились обходить с помощью OCR, да и они очень легко считываются ИИ, а простые скрытые поля (honeypot) уже давно научились обходить умные боты. А те, что еще работают, всерьез портят пользовательский опыт, заставляя людей всматриваться в размытые символы и кликать на картинки с гидрантами или мотоциклами.

Только вдумайтесь:

• На один среднестатистический сайт приходится десятки, а то и сотни неудачных попыток входа ежедневно.

• Если бы у меня на этапе создания сайта не было базовой защиты от спама в комментариях, то их количество в день достигало бы от 200 до 500, а то и выше. Чтобы бы в комментариях, только не продавалось. Я помню, что однажды захожу в админку сайта и вижу несколько тысяч однотипных не одобренных комментариев на похабную тему. Я их удалил, но они в любом случае оставляют за собой мусор в базе данных, который со временем накапливается и негативно сказывается на производительности ресурса.

До начала текущей недели всей защитой со спамом в комментариях занимался плагин Antispam Bee. Это был своего рода «народный герой» — бесплатный, от немецких разработчиков, с открытым исходным кодом и с вполне себе достойной эффективностью. Это был классический контент-фильтр. Он не показывал пользователям никаких капч. Вместо этого он тихо и молча анализировал отправляемые комментарии и заявки по огромному числу параметров: наличие подозрительных ссылок, стилистику текста, страну отправления, наличие грамматических ошибок, известные спам-сигнатуры и т.д. На основе этого анализа он помечал запрос как spam/ham и действовал по заданному сценарию (удалить, пометить, отклонить). Функционал был весьма богатым, и его до определенного времени хватало, но темные силы интернета не перестают развиваться😄.

Antispam Bee - Входил во все списки обязательных плагинов, кто думал делать свой сайт на WordPress. Особенно в середине 2010-х.

С 2020 и по сегодняшние дни количество поисковых-краулерных роботов только растет, с развитием IPv6 и его дешевизной гигантскими шагами стали развиваться и наращивать обороты ботофермы по накрутке поведенческих факторов,  фермы по Ddos атакам и похожие им нечисти. Все это привело к тому, что ваш ресурс ежесекундно подвергается не только атакам, но и бессмысленно теряет производительность обрабатывая все это.

Если вы используете Cloudflare, то обязательно отключайте там работу IPv6.

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

Я человек долгий на подъем в таких вопросах, но все же решил, что-то попробовать новое и мой выбор пал на решение CAPTCHA с Cloudflare Turnstile.

Cloudflare Turnstile: Магия незаметной защиты, которая просто работает

Представьте себе капчу, которая не просит вас ничего угадывать, не показывает светофоры и не заставляет искать велосипеды. Она просто... есть. И при этом она невероятно эффективно отсекает 99.9% ботов.  Это не фантастика, это Cloudflare Turnstile. Прочитал я эту замануху и решил попробовать.

Почему Turnstile — это лучшее решение на сегодня?

1. Невидимая или однокликовая проверка (Non-intrusive): В большинстве случаев пользователь вообще не видит никаких заданий. Turnstile в фоновом режиме анализирует множество поведенческих факторов (движение мыши, взаимодействие с формой, тайминги) и если поведение кажется человеческим — просто пропускает запрос. В более сложных случаях может появиться простая кнопка «Я не робот». Никаких головоломок.

2. Бесплатность и отсутствие лимитов: В отличие от Google reCAPTCHA v3, которая теоретически бесплатна, но на практике требует обязательной регистрации и может иметь скрытые лимиты, Turnstile предлагает неограниченное количество бесплатных проверок для некоммерческих и мелких коммерческих сайтов.

3. Приватность и GDPR: Cloudflare заявляет, что для проверки им не нужны персональные данные пользователей. Это огромное преимущество перед Google, которая де-факто собирает данные для своих рекламных и аналитических целей. Для европейских сайтов это ключевой момент.

4. Простота интеграции: API Turnstile невероятно прост. Всего два параметра: Sitekey (публичный ключ) и Secret Key (секретный ключ). Не нужно подключать тяжелые JS-библиотеки, как в reCAPTCHA v3.

Получаем ключи Cloudflare Turnstile и создаем виджет

Для подключения CAPTCHA с Cloudflare Turnstile вам необходимо пройти регистрацию на сайте, я лично захожу туда через Google авторизацию.

https://dash.cloudflare.com/

Далее вам необходимо зайти в раздел Turnstile. Теперь вы должны нажать кнопку "Add widget".

В открывшейся странице в поле "Widget name" укажите удобное для вас имя, я обычно ввожу там адрес домена. В моем примере там будет мой тестовый сайт pyatilistnik.net. После чего нажмите кнопку "Add Hostname".

В поле "Add a custom hostname" добавьте адрес вашего ресурса и нажмите кнопку "Add". После чего внизу у вас активируется кнопка "Add", нажмите ее, чтобы попасть в мастер управления режимом виджета.

Обратите внимание, что бесплатно вам можно сделать до 10 виджетов, на разные ресурсы. За, что большое спасибо Cloudflare.

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

1. Managed
2. Non-interactive
3. Invisible

Режим Managed (Управляемый)

Это «умный» режим по умолчанию и, во многих случаях, оптимальный выбор. Cloudflare использует машинное обучение и поведенческий анализ (телеметрию браузера, движения мыши, тайминги и т.д.), чтобы принять решение: может ли запрос быть безопасно пропущен без каких-либо действий со стороны пользователя, или же он выглядит подозрительно и требует подтверждения.

• Если все хорошо: Пользователь ничего не видит и не делает. Запрос проходит невидимо.

• Если есть сомнения: Пользователю показывается простейшая интерактивная задача — поставить галочку в квадратике (как в старом добром reCAPTCHA v2). Никаких картинок, головоломок или поиска гидрантов.

• Для большинства сайтов. Это универсальный режим установил и забыл.

Почему это часто лучший выбор: Он сочетает в себе превентивную мощь невидимой проверки для 95% пользователей и страхует на тот случай, если бот станет умнее и научится симулировать поведение человека. Это как умный охранник, который молча пропускает сотрудников, но останавливает и задает вопрос незнакомцу.

Режим Non-interactive (Неинтерактивный)

В этом режиме виджет Turnstile всегда виден пользователю, но он не требует от него активных действий. Пользователь видит анимированный логотип Cloudflare с индикатором загрузки. В это время в фоне выполняется тот самый сложный браузерный challenge (вызов) — проверка поведения, вычисление токена и т.д. Как только проверка завершена (обычно за 2-5 секунд), индикатор исчезает, и форма готова к отправке.

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

• Пользователь четко видит, что происходит процесс проверки безопасности. Это может даже повышать доверие.

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

Режим Invisible (Невидимый)

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

• Идеальный пользовательский опыт (UX): Никаких задержек. Максимально чистая и быстрая форма.

• Техническая реализация: Часто требует более точной ручной интеграции, особенно для обработки Ajax-форм.

Выбирается, когда важна каждая миллисекунда и каждый пиксель. Например, на формах оформления заказа (WooCommerce Checkout) или на высококонкурентных лендингах. Для одностраничных приложений (SPA) и сайтов с динамически подгружаемыми формами.

Начинайте с «Managed». Это золотая середина. Вы получите высочайший уровень безопасности для 99% пользователей, которые пройдут проверку невидимо, и при этом у вас будет страховка на случай сложных ботов в виде простой галочки. Это рекомендация по умолчанию для WordPress-форм (логин, комментарии, регистрация).

В итоге я выбираю "Managed" и нажимаю кнопку "Create".

На следующем шаге вам дадут два секретных кода, которые вы не должны нигде светить, это "Site Key" и "Secret Key". Если ы их не записали, то не расстраивайтесь, так как их всегда можно посмотреть в настройках виджета.

"Site Key" и "Secret Key" нам будут нужны для установления связи сайта WordPress с виджетом Turnstile.

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

Подключение Cloudflare Turnstile на сайт WordPress с помощью плагина

Почему начинаю именно с данного методы, все просто, это самый легкий метод, он подойдет подавляющему количеству людей. Нам потребуется плагин "Simple CAPTCHA Alternative with Cloudflare Turnstile". Заходим в раздел добавить плагин и ищем его в поисковой строке, на момент написания статьи там уже более 100 000 установок, так что не промахнетесь. Нажимаем кнопку "Установить сейчас".

Активируем ему с помощью соответствующей кнопки.

Мы почти на финишной прямой, вас перекинет на страницу с настройками плагина. Вам тут нужно ввести те два заветных кода "Site Key" и "Secret Key" в поля "Ключ сайта" и "Секретный ключ".

Из полезных настроек вы можете задать цвет каптчи, исходя из цвета оформления вашей темы.

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

Вы можете настроить списки исключения, например для своих IP-адресов, чтобы Turnstile не проверял вас.

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

Если у вас отключена форма регистрации, то можете для данной формы не выставлять встраивание Cloudflare Turnstile

Cloudflare Turnstile проверит, а вы неявляетесь ботом, поэтому попросит вас выставить галочку и подтвердить, что вы человек.

Ключи API были добавлены. Пожалуйста, проверьте ответ API Turnstile ниже.

Выставляем и нажимаем "тестовый ответ"

В результате если все хорошо, то вы должны увидеть надпись "Успешно! Turnstile корректно работает с вашими ключами API".

Проверка встраивания Cloudflare Turnstile в различные формы сайта

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

Следующим этапом я проверл форм авторизации в админке, и там Cloudflare Turnstile так же присутствовал.

Ну и последняя проверка, это форма восстановления пароля, Cloudflare Turnstile там так же работает.

Почему может неработать Cloudflare Turnstile

На моих сайтах есть плагины кэширования, например WP Super Cache, и пока вы не сбросите там кэш, на ваших формах может непоказываться Cloudflare Turnstile.

Как добавить Cloudflare Turnstile без плагина

Если по каким-то причинам вы не хотите использовать различные плагины, то есть возможность сделать функцию и добавить ее в файл function.php вашей темы WordPress. У меня для удобства редактирования есть плигин profunction, его удобно что он централизованно позволяет все вносить, небеспокоясь, что тема обновится или сам движок и настройки пропадут.

Для начала свяжим ваш ресурс с вашими API ключами.

// Добавление ключей Cloudflare Turnstile

function cloudflare_key(){

$sitekey= "Ключ сайта";

$secretkey= "Секретный ключ";

return [$sitekey,$secretkey];

}

add_action("wp_head", function(){

wp_enqueue_script('cloudflare-turnstile', 'https://challenges.cloudflare.com/turnstile/v0/api.js');

} );

Далее добавим Cloudflare Turnstile в форму авторизации

// Добавление Cloudflare Turnstile в форму авторизации

 

function login_style() {

    wp_register_script('login-recaptcha', 'https://challenges.cloudflare.com/turnstile/v0/api.js', false, NULL);

    wp_enqueue_script('login-recaptcha');

echo "<style>p.submit, p.forgetmenot {margin-top: 10px!important;}.login form{width: 303px;} div#login_error {width: 322px;}</style>";

}

add_action('login_enqueue_scripts', 'login_style');

add_action('login_form', function(){

echo '<div class="cf-turnstile" data-sitekey="'.cloudflare_key()[0].'"></div>';

} );

add_action('wp_authenticate_user', function($user, $password) {

$captcha=$_POST['cf-turnstile-response'];

if (!$captcha) {

     return new WP_Error('Captcha Invalid', __('<center>Captcha Invalid! Please check the captcha!</center>'));

   die();

           exit;

   }

   $secretKey = cloudflare_key()[1];

   $ip = $_SERVER['REMOTE_ADDR'];

   $url_path = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';

   $data = array('secret' => $secretKey, 'response' => $captcha, 'remoteip' => $ip);

$options = array(

'http' => array(

'method' => 'POST',

'content' => http_build_query($data))

);

$stream = stream_context_create($options);

$result = file_get_contents(

$url_path, false, $stream);

$response =  $result;

   $responseKeys = json_decode($response,true);

  if(intval($responseKeys["success"]) !== 1) {

   return new WP_Error('Captcha Invalid', __('<center>Captcha Invalid! Please check the captcha!</center>'));

  die();

   exit;

  } else {

  return $user;

}

} , 10, 2);

Теперь сделаем добавление Cloudflare Turnstile в форму комментария

// Добавление Cloudflare Turnstile в форму восстановления пароля

add_action('lostpassword_form', function(){

echo '<div class="cf-turnstile" data-sitekey="'.cloudflare_key()[0].'"></div>';

});

// Валидация каптчи при восстановлении пароля

add_action('lostpassword_post', function($errors){

if (isset($_POST['user_login'])) {

$captcha = $_POST['cf-turnstile-response'];

if (!$captcha) {

$errors->add('captcha_empty', __('<strong>ERROR</strong>: Please complete the CAPTCHA.'));

return $errors;

}

$secretKey = cloudflare_key()[1];

$ip = $_SERVER['REMOTE_ADDR'];

$url_path = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';

$data = array('secret' => $secretKey, 'response' => $captcha, 'remoteip' => $ip);

$options = array(

'http' => array(

'method' => 'POST',

'content' => http_build_query($data))

);

$stream = stream_context_create($options);

$result = file_get_contents($url_path, false, $stream);

$responseKeys = json_decode($result, true);

if(intval($responseKeys["success"]) !== 1) {

$errors->add('captcha_invalid', __('<strong>ERROR</strong>: Invalid CAPTCHA. Please try again.'));

}

}

return $errors;

});

// Добавление Cloudflare Turnstile в форму комментария

function is_valid_captcha($captcha) {

   if (!$captcha) {

     return false;

   }

   $secretKey = cloudflare_key()[1];

   $ip = $_SERVER['REMOTE_ADDR'];

   $url_path = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';

   $data = array('secret' => $secretKey, 'response' => $captcha, 'remoteip' => $ip);

$options = array(

'http' => array(

'method' => 'POST',

'content' => http_build_query($data))

);

$stream = stream_context_create($options);

$result = file_get_contents(

$url_path, false, $stream);

$response =  $result;

   $responseKeys = json_decode($response,true);

  if(intval($responseKeys["success"]) !== 1) {

   return false;

  } else {

  return true;

}

}

add_action('init', function(){

if (!is_user_logged_in() ) {

    add_action('pre_comment_on_post', function(){

$recaptcha = $_POST['cf-turnstile-response'];

if (empty($recaptcha))

    wp_die( __("<b>ERROR:</b> please select <b>I'm not a robot!</b><p><a href='javascript:history.back()'>« Back</a></p>"));

else if (!is_valid_captcha($recaptcha))

    wp_die( __("<b>please select I'm not a robot!</b>"));

} );

    add_filter('comment_form_defaults',function ($submit_field) {

    $submit_field['submit_field'] = '<div class="cf-turnstile" data-sitekey="'.cloudflare_key()[0].'"></div><br>'.$submit_field['submit_field'];

    return $submit_field;

});

}

});

Какой в итоге эффект от внедрения Cloudflare Turnstile

Хотя я не так давно интегрировал CAPTCHA с Cloudflare Turnstile, но уже за неделю эффект мне понравился. У меня за это время не было ни одного неодобренного спам-комментария. У сервиса есть полезная статистика в которой я еще только пытаюсь разобраться, но уже есть интересные цифры. Так например можно посмотреть количество попыток оставить мне спам на сайте, не знаю верить ей или нет, что за сутки это 325 000 раз. Я понимаю, что ботов сервис обламывает, и они потом автоматически пытаются это повторить.

Удобно, что можно видеть ASN сетей для последующей блокировки.

Для примера, мне стало любопытно, кто все эти Source IP, смотрю информацию по 77.82.243.67, какой-то спам робот из Петропавловск-Камчатский, что ему от меня нужно не понимаю:).

Можно проверить интересующий IP-адрес, например вот так.

80% не проходят антиспам, и это хорошо.

И еще есть такой интересный график.

По итогу я вижу очевидные плюсы от внедрения Cloudflare Turnstile:

1. Поток спама в админке прекратился
2. Меньше стал напрягаться хостинг и база данных
3. Система бесплатная, улучшается, обучается
4. ПРокачал знания с Cloudflare, хоть его пока и не любит РКН

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