Защита от спама комментариев и форм обратной связи, добавление Google reCAPTCHA v3 на WordPress сайт без плагина и с помощью плагина, оптимизация сайта по скорости после добавления reCAPTCHA v3 — этими вопросами займемся в данной статье. И, кстати, описанная в статье защита от спама успешно используется на данном сайте.
Защита от спама
Защита от спама формы обратной связи подробно разбирается в статье: «WordPress Email. Настраиваем отправку писем«. Здесь же разберем защиту от спама комментариев. Ведь даже молодым сайтам приходится сталкиваться с тонной комментариев от спамеров, а вручную удалять спам очень уж трудоемко.
Лучший способ защиты от спама — это добавить на сайт капчу.
Google reCAPTCHA v3 против Google reCAPTCHA v2
Как же меня раздражает подтверждать, что я не робот, отмечая картинки со светофорами, пешеходными переходами или гидрантами. Это и есть Google reCAPTCHA v2. В отличие от нее Google reCAPTCHA v3 работает в фоновом режиме без какого-либо взаимодействия с пользователем. Пользователь ничего не видит и не вводит. ReCAPTCHA v3 анализирует действия пользователя и выдает числовую вероятность того, что пользователь является человеком или роботом.
Не будем раздражать пользователей своего сайта и добавим на сайт Google reCAPTCHA v3.
Капча и серверное кэширование
Серверное кэширование — это техника, которая позволяет сохранять копии динамически генерируемых веб-страниц на сервере и предоставлять их повторно клиентам без необходимости выполнения дорогостоящих операций обработки на сервере. Преимущества серверного кэширования — это улучшение производительности сайта и снижение нагрузки на сервер. На WordPress сайте серверное кэширование включается с помощью плагина WP Fastest Cache. Подробнее в статье: «Оптимизация WordPress. Ускоряем загрузку сайта«.
Серверное кэширование мешает работе обычной капчи, которая в виде картинки с текстом, который нужно пользователю ввести. Такая капча генерируется на сервере, а затем отправляется пользователю и отображается у него в браузере. При включенном серверном кэшировании в браузер пользователя попадает закэшированная старая капча, предназначенная совсем другому какому-то пользователю. И пользователю пройти проверку капчи становится невозможным.
Серверное кэширование не мешает работе Google reCAPTCHA v2. Это AJAX капча, которая получает задание для пользователя с сервера без перезагрузки страницы. А, следовательно, пользователь получает свое актуальное задание, а не закэшированное устаревшее задание другого пользователя, как в случае с обычной капчей.
Серверное кэширование так же не мешает работе Google reCAPTCHA v3. Поскольку, эта капча вообще не взаимодействует с пользователем, а только анализирует его действия.
Защита от спама с reCAPTCHA v3 и WordPress плагином
Добавить Google reCAPTCHA v3 на WordPress сайт можно с помощью плагина. Например, с помощью плагина Расширенная версия Google reCAPTCHA:
Но, к сожалению, при таком добавлении reCAPTCHA v3 на сайт производительность сайта сильно падает. Результаты тестирования производительности сайта смотрите в разделе «Тесты производительности сайта«. Поэтому, давайте добавим reCAPTCHA v3 на сайт без помощи плагинов, тем более, это не составит большого труда.
Защита от спама с reCAPTCHA v3 без плагина
Публичный ключ и секретный ключ reCAPTCHA v3
Чтобы добавить Google reCAPTCHA v3 на сайт, необходимо сначала получить ключи (публичный и секретный) от Google. Переходим по ссылке: https://www.google.com/recaptcha/admin/create, выбираем тип reCAPTCHA v3, указываем домен, на котором будет установлена капча, и нажимаем кнопку ОТПРАВИТЬ.
Публичный ключ (или ключ сайта) и секретный ключ получены:
Файл functions.php
Переходим в админ-панель WordPress сайта, на который устанавливаем reCAPTCHA v3, и выбираем меню Внешний вид и подменю Редактор тем.
Отредактируем файл functions.php. В конец файла добавим следующий код:
/*** Add reCAPTCHA v3 to Comment Section ***/
function add_recaptcha_script() {
if ( is_singular( 'post' ) ){
wp_enqueue_script( 'google-recaptcha', 'https://www.google.com/recaptcha/api.js?render=RECAPTCHA_PUBLIC_KEY', array(), null, true );
}
}
add_action( 'wp_footer', 'add_recaptcha_script' );
function add_recaptcha_jscode () {
if ( is_singular( 'post' ) ){
echo '<script>
document.getElementById("buttonSubmit").onclick = function onClick(e) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute("RECAPTCHA_PUBLIC_KEY", {action: "submit"}).then(function(token) {
document.getElementById("g-recaptcha-response").value = token;
document.getElementById("commentform").submit();
});
});
}
</script>';
}
}
add_action( 'wp_print_footer_scripts', 'add_recaptcha_jscode' );
function add_recaptcha_field($submit_field) {
$submit_field['comment_notes_before'] = '';
$submit_field['submit_field'] = '
<div>
<small>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</small>
</div>
<p class="form-submit">
<input type="submit" name="buttonSubmit" id="buttonSubmit" class="submit" value="'.$submit_field['label_submit'].'">
<input type="hidden" name="comment_post_ID" value="'.get_the_id().'" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
</p>
';
return $submit_field;
}
if (!is_user_logged_in()) {
add_filter('comment_form_defaults','add_recaptcha_field');
add_filter('comment_form_default_fields', function($fields) {
unset($fields['url']);
unset($fields['email']);
return $fields;
});
}
function verify_recaptcha_response() {
$captcha = $_POST['g-recaptcha-response'];
if(empty($captcha)){
wp_die(__("<b>Spam detected</b>"));
return;
}
$captcha_postdata = http_build_query(
array(
'secret' => 'RECAPTCHA_PRIVATE_KEY',
'response' => $captcha,
'remoteip' => $_SERVER['REMOTE_ADDR']
)
);
$captcha_opts = array(
'http' => array(
'method' => 'POST',
'header' => 'Content-type: application/x-www-form-urlencoded',
'content' => $captcha_postdata
)
);
$captcha_context = stream_context_create($captcha_opts);
$captcha_response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify", false, $captcha_context), true);
if($captcha_response['success'] && $captcha_response['score'] > 0.5){
return;
}else{
wp_die(__("<b>Spam detected</b>"));
}
}
if (!is_user_logged_in()) {
add_action('pre_comment_on_post', 'verify_recaptcha_response');
}где RECAPTCHA_PUBLIC_KEY — это публичный ключ reCAPTCHA v3, выданный Google.
RECAPTCHA_PRIVATE_KEY — это приватный ключ reCAPTCHA v3, выданный Google.
По добавляемому в файл functions.php коду пояснения следующие:
- Функция
add_recaptcha_script()добавляет скрипт reCAPTCHA, только если текущая страница является записью (is_singular('post')). Добавляемый скрипт reCAPTCHA располагается по адресу:https://www.google.com/recaptcha/api.js?render=RECAPTCHA_PUBLIC_KEY. add_action( 'wp_footer', 'add_recaptcha_script' )указывает WordPress, что функциюadd_recaptcha_scriptнужно выполнить при выводе футера страницы. Это позволяет добавить скрипт reCAPTCHA в футер сайта.- Функция
add_recaptcha_jscode()добавляет JavaScript-код, только если текущая страница является записью (is_singular('post')). Этот JavaScript-код обрабатывает клик по кнопке с идентификаторомbuttonSubmit. При клике на кнопку выполняется следующая логика: отменяется действие по умолчанию (предотвращается отправка формы), а затем выполняется функция reCAPTCHA. Токен reCAPTCHA помещается в скрытое поле с идентификаторомg-recaptcha-response, а затем форма с идентификаторомcommentformотправляется. - Через хук
wp_print_footer_scriptsфункцияadd_recaptcha_jscode()добавит JavaScript-код непосредственно в футер сайта. - Функция
add_recaptcha_field()добавляет поле reCAPTCHA. Оно включает кнопку отправки комментария с идентификаторомbuttonSubmit, скрытое поле для хранения результата reCAPTCHA и ссылку на политику конфиденциальности и условия обслуживания Google. Ссылка нужна, чтобы, не нарушая условия использования, скрыть логотип reCAPTCHA, появляющийся в правом нижнем углу сайта и занимающий огромное количество места при просмотре сайта на мобильных устройствах. - С помощью хука
comment_form_defaultsфункцияadd_recaptcha_field()добавит поле reCAPTCHA в форму комментариев, но только для неавторизованных пользователей сайта. - Функция
verify_recaptcha_response()обращается для проверки к Google reCAPTCHA API (https://www.google.com/recaptcha/api/siteverify) и получает оценку (score) от 0.0 до 1.0. Значение 0.0 относится к роботу, значение 1.0 относится к человеку. Запрос на комментарий будет ободрен, если оценка превысит 0.5. В противном случае выводится сообщение об обнаружении спама. - С помощью хука
pre_comment_on_postфункцияverify_recaptcha_response()привязывается к событию отправки комментария.
Вот и все! Google reCAPTCHA v3 добавлена на сайт.
Скрываем логотип reCAPTCHA v3
Логотип reCAPTCHA v3 занимает много места на экране, еще и загораживает текст на сайте. На мобильных устройствах это особенно неудобно. Смотрите, как это выглядит на мобильном устройстве, например, на iPhone 12 Pro:
Чтобы не нарушить условия использования, скрыв логотип Google reCAPTCHA v3, мы уже добавили на сайт ссылку на политику конфиденциальности и условия обслуживания Google, когда редактировали файл functions.php.
Чтобы скрыть сам логотип Google reCAPTCHA v3, нужно добавить следующий код в файл стилей WordPress сайта:
.grecaptcha-badge {
visibility: hidden;
}В моей теме WordPress сайта это делается, перейдя в меню Внешний вид, а затем в подменю Настроить:
Далее выбираем настройку Дополнительные стили и вставляем код:
Готово! Логотип Google reCAPTCHA v3 скрыт.
Оптимизация сайта по скорости
Асинхронная загрузка JS скрипта
Скрипт reCAPTCHA может загружаться асинхронно, т.е. независимо от основного потока выполнения страницы. Асинхронная загрузка скрипта reCAPTCHA не влияет на работоспособность самого скрипта, а производительность сайта при этом улучшается.
Давайте поменяем загрузку скрипта reCAPTCHA на асинхронную, т.е. в исходном коде страницы с reCAPTCHA строка:
<script src='https://www.google.com/recaptcha/api.js?render=RECAPTCHA_PUBLIC_KEY'>должна будет поменяться на строку:
<script async="async" src='https://www.google.com/recaptcha/api.js?render=RECAPTCHA_PUBLIC_KEY'>Добавим в конец файла functions.php следующий код:
function add_async_attribute($tag, $handle) {
if ('google-recaptcha' === $handle) {
$tag = str_replace(' src', ' async="async" src', $tag);
}
return $tag;
}
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);Здесь используется фильтр script_loader_tag для добавления атрибута async к скрипту reCAPTCHA.
В следующем разделе статьи узнаем, какой прирост производительности сайта дает асинхронная загрузка скрипта reCAPTCHA.
Тесты производительности сайта
Производительность сайта тестировалась с помощью онлайн сервиса Google Page Speed https://pagespeed.web.dev/. Привожу результаты тестирования только для мобильных устройств. Результаты для мобильных устройств более показательные.
Результат тестирования сайта без reCAPTCHA v3:
Результат тестирования сайта с reCAPTCHA v3, установленной с помощью WordPress плагина Расширенная версия Google reCAPTCHA:
А это результат тестирования сайта с reCAPTCHA v3, установленной без плагина:
А после проведенной оптимизации предыдущий результат улучшился:
Эффективность защиты от спама
Защита от спама, описанная в статье, работает на данном сайте и уже показала свою эффективность. За все время использования reCAPTCHA v3 на сайте не было получено ни одного спама ни в комментариях под статьями, ни в электронных письмах, отправленных из контактной формы раздела Контакты сайта.
Google предоставляет интересную статистику по используемой reCAPTCHA на сайте (https://www.google.com/recaptcha/admin/).
Количество запросов — это количество запросов к reCAPTCHA v3, которые сделал сайт, чтобы распознать пользователя сайта, робот он или человек. Темно-синим цветом обозначено количество запросов с высоким уровнем риска, т.е. от роботов-спамеров. Светло-синим цветом обозначено количество запросов с низким уровнем риска, т.е. от реальных людей. На графике Распределение оценок мы видим четкое разделение: все роботы-спамеры получают минимальную оценку (0.1), а реальные люди — максимальную (0.9). Такое четкое разделение говорит об эффективности алгоритма распознавания робот или человек.
Выводы
Эффективность описанной защиты от спама — 100%. Единственный минус — небольшое «проседание» скорости загрузки сайта. Поэтому, тестируйте, взвешивайте плюсы и минусы и принимайте решение. А в комментариях, пожалуйста, напишите, какую защиту от спама на сайте используете вы? Будет интересно!
Комментарии