Защита от спам коментари и форми за обратна връзка, добавяне на 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 сайт: „`css .grecaptcha-badge { display: none; } „`
.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 src='https://www.google.com/recaptcha/api.js?render=RECAPTCHA_PUBLIC_KEY' async='async'>Добавете следния код в края на файла functions.php:
function add_async_forscript($url) {
if (strpos($url, '#asyncload')===false)
return $url;
else if (is_admin())
return str_replace('#asyncload', '', $url);
else
return str_replace('#asyncload', '', $url)."' async='async";
}
add_filter('clean_url', 'add_async_forscript', 11, 1);Следващият ред:
wp_enqueue_script( 'google-recaptcha', 'https://www.google.com/recaptcha/api.js?render=RECAPTCHA_PUBLIC_KEY', array(), null, true );Заменям с низ на ред:
wp_enqueue_script( 'google-recaptcha', 'https://www.google.com/recaptcha/api.js?render=RECAPTCHA_PUBLIC_KEY#asyncload', array(), null, true );Разликата между редовете във фрагмента #asyncload в URL.
Този код позволява добавяне на асинхронно зареждане на скрипта reCAPTCHA чрез фрагмента #asyncload в URL. Кода обработва този фрагмент в зависимост от контекста (използва се is_admin()) и добавя атрибут async='async' за асинхронно зареждане на скрипта на съответните страници.
В следващата секция на статията ще научим какъв ръст в производителността на сайта дава асинхронното зареждане на скрипта 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%. Единственият недостатък е леко „забавяне“ на скоростта на зареждане на сайта. Затова тествайте, преценявайте предимствата и недостатъците и вземете решение. А в коментарите, моля, напишете каква защита срещу спам използвате на вашия сайт? Ще е интересно!
Коментари