Bráníme útokům na WordPress pomocí No Captcha reCaptcha

Existuje mnoho různých řešení, jak zabránit botům, aby odesílali webové formuláře; jedním z nejoblíbenějších je služba reCaptcha. reCaptcha zobrazí obrázek, v němž je graficky ztvárněn nějaký text. Uživatel musí tento text zadat, teprve pak se může formulář úspěšně odeslat.

Pro boty bývalo velmi obtížné přečíst text, který je v obrázku, ale jak se algoritmy botů stávaly stále vyspělejšími, začínaly pronikat i do tohoto bezpečnostního opatření. Až přestalo být bezpečné. Tato stará metoda byla také dost špatná z hlediska přívětivosti k uživateli. Google pak vytvořil novou reCaptcha a nazval ji No Captcha reCaptcha.

V tomto článku se podíváme, co přesně No Captcha reCaptcha je, i jak se vytvoří plugin, který bude integrovat službu reCaptcha do formulářů WordPressu pro přihlášení, registraci, přidání komentáře a přidělení nového hesla (Login, Registration, Comment, Lost Password), aby se zabránilo různým typům útoků.

Jak vypadá No Captcha reCaptcha

No Captcha reCaptcha prostě jen zobrazí zaškrtávací políčko, které uživatele žádá, aby zkontroloval, zda není robot. Možná se vám zdá, že se to dá snadno hacknout, ale interně používá Google vyspělé algoritmy a metody, jimiž zjišťuje, zda je daný uživatel robot nebo lidská bytost. Nový model je uživatelsky přívětivější a bezpečnější než ten starý.

Jak to funguje?

Vypadá sice jako obyčejné zaškrtávací políčko, ale vlastně to vůbec žádné zaškrtávací políčko není. Je to grafika, která se chová jako zaškrtávací políčko. Většina botů nespouští JavaScript, takže takovou grafiku nemohou emulovat. Ale i u botů, kteří ji emulovat umějí, je to sledováno pohybem myši a detekčními algoritmy Googlu rozpoznávajícími padělané kliky (Adsense fraud click).

Registrace aplikace No Captcha reCaptcha

Uživatelé, kteří si nainstalují tento plugin, musejí zaregistrovat svůj web, aby získali klíč webu a tajný klíč.

Pak je třeba vytvořit stránku nastavení pro plugin, která umožní administrátorovi WordPressu nainstalovat klíč webu a tajný klíč, které byly získány z administračního panelu reCaptcha.

function
no_captcha_recaptcha_menu()
{
add_menu_page( "reCapatcha Options", "reCaptcha Options", "manage_options", "recaptcha-options", "recaptcha_options_page", "", 100 );
}
function recaptcha_options_page()
{
?>
<div class="wrap">
<h1>reCaptcha Options</h1>
<form method="post" action="options.php">
<?php
settings_fields( "header_section" );
do_settings_sections( "recaptcha-options" );
submit_button();
?>
</form>
</div>
<?php
}
 
add_action( "admin_menu", "no_captcha_recaptcha_menu" );
 
function display_recaptcha_options()
{
add_settings_section( "header_section", "Keys", "display_recaptcha_content", "recaptcha-options" );
 
add_settings_field( "captcha_site_key", __("Site Key"), "display_captcha_site_key_element", "recaptcha-options", "header_section" );
add_settings_field( "captcha_secret_key", __("Secret Key"), "display_captcha_secret_key_element", "recaptcha-options", "header_section" );
 
register_setting( "header_section", "captcha_site_key" );
register_setting( "header_section", "captcha_secret_key" );
}
 
function display_recaptcha_content()
{
echo __( '<p>You need to <a href="https://www.google.com/recaptcha/admin" rel="external">register you domain</a> and get keys to make this plugin work.</p>' );
echo __( "Enter the key details below" );
}
function display_captcha_site_key_element()
{
?>
<input type="text" name="captcha_site_key" id="captcha_site_key" value="<?php echo get_option('captcha_site_key'); ?>" />
<?php
}
function display_captcha_secret_key_element()
{
?>
<input type="text" name="captcha_secret_key" id="captcha_secret_key" value="<?php echo get_option('captcha_secret_key'); ?>" />
<?php
}
 
add_action( "admin_init", "display_recaptcha_options" );

Proberme teď, jak výše uvedený kód funguje:

• Na administrátorském dashboardu WordPressu jsme vytvořili stránku nastavení.
• Tato stránka nastavení zobrazí dvě vstupní textová pole pro klíč webu a tajný klíč.
• Tyto klíče jsou uložené jako volby WordPressu. Tyto volby jsme pojmenovali site_key a secret_key.

Jak zabráníme komentářovým spamům

Službu reCaptcha byste měli integrovat do front-endových formulářů určených pro komentáře, abyste botům zabránili posílat spamové komentáře.

V adresáři svého pluginu vytvořte soubor style.css a umístěte do něho tento kód:

#submit { display: none; }

Kód uvedený výše skryje tlačítko „Odeslat“ (submit) na formuláři WordPressu určeném pro komentář, takže můžeme nad odesílací tlačítko umístit box reCaptcha tak, že ručně vložíme jak odesílací tlačítko, tak i box reCaptcha.

Zde máte kód pro integraci reCaptcha na formulářích pro komentář.

add_action( "wp_enqueue_scripts", "frontend_recaptcha_script" );
function frontend_recaptcha_script()
{
if( get_option( 'captcha_site_key' ) && get_option( 'captcha_secret_key' ) )
{
wp_register_script( "recaptcha", "https://www.google.com/recaptcha/api.js" );
wp_enqueue_script( "recaptcha" );
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_style( "no-captcha-recaptcha", $plugin_url . "style.css" );
}
}
add_action( "comment_form", "display_comment_recaptcha" );
function display_comment_recaptcha()
{
if( get_option( 'captcha_site_key' ) && get_option( 'captcha_secret_key' ) )
{
?>
<div class="g-recaptcha" data-sitekey="<?php echo get_option( 'captcha_site_key' ); ?>"></div>
<input name="submit" type="submit" value="Submit Comment">
<?php
}
}
add_filter( "preprocess_comment", "verify_comment_captcha" );
function verify_comment_captcha( $commentdata )
{
if( isset( $_POST['g-recaptcha-response'] ) )
{
$recaptcha_secret = get_option( 'captcha_secret_key' );
$response = file_get_contents( "https://www.google.com/recaptcha/api/siteverify?secret=" . $recaptcha_secret . "&response=" .$_POST['g-recaptcha-response'] );
$response = json_decode( $response, true );
if( true == $response["success"] )
{
return $commentdata;
}
else
{
echo __( "Bots are not allowed to submit comments." );
return null;
}
}
else
{
if( get_option( 'captcha_site_key' ) && get_option( 'captcha_secret_key' ) )
{
echo __( "Bots are not allowed to submit comments. If you are not a bot then please enable JavaScript in browser." );
return null;
}
else
{
return $commentdata;
}
}
}

Zrekapitulujme, jak funguje kód uvedený výše:

• Pomocí akce wp_enqueue_scripts jsme zařadili do fronty Javascriptový soubor reCaptcha Googlu do frontendu WordPressu.
• Podobně jsme pomocí wp_enqueue_style do fronty zařadili i soubor stylového předpisu style.css.
• Na formuláři pro komentář jsme pomocí akce comment_form zobrazili zaškrtávací políčko.
• Poté, co se komentář odešle, ale předtím, než se vloží do databáze, WordPress zavolá filtr preprocess_comment. Uvnitř tohoto filtru zkontrolujeme, zda je uživatel člověk nebo robot. Pokud je lidská bytost, vrátíme komentář, který se má vložit, jinak vrátíme null, čímž zabráníme, aby se takový (spamový) komentář přidal do databáze.

Prevence proti přihlašovacím útokům hrubou silou

Službu reCaptcha je třeba také integrovat do administrátorského přihlašovacího formuláře, abychom robotům zamezili spouštět útoky hrubou silou s cílem prolamovat hesla. Zde máte kód, který ji integruje do administrátorského přihlašovacího formuláře.

add_action( "login_enqueue_scripts", "login_recaptcha_script" );
function login_recaptcha_script()
{
if( get_option( 'captcha_site_key' ) && get_option( 'captcha_secret_key' ) )
{
wp_register_script( "recaptcha_login", "https://www.google.com/recaptcha/api.js" );
wp_enqueue_script( "recaptcha_login" );
}
}
add_action( "login_form", "display_login_captcha" );
function display_login_captcha()
{
if( get_option( 'captcha_site_key' ) && get_option( 'captcha_secret_key' ) )
{
?>
<div class="g-recaptcha" data-sitekey="<?php echo get_option('captcha_site_key' ); ?>"></div>
<?php
}
}
add_filter( "wp_authenticate_user", "verify_login_captcha", 10, 2 );
function verify_login_captcha( $user, $password )
{
if( isset( $_POST['g-recaptcha-response'] ) )
{
$recaptcha_secret = get_option( 'captcha_secret_key' );
$response = file_get_contents( "https://www.google.com/recaptcha/api/siteverify?secret=" . $recaptcha_secret . "&response=" . $_POST['g-recaptcha-response'] );
$response = json_decode( $response, true );
if( true == $response["success"] )
{
return $user;
}
else
{
return new WP_Error( "Captcha Invalid", __( "<strong>ERROR</strong>: You are a bot" ) );
}
}
else
{
if( get_option( 'captcha_site_key' ) && get_option( 'captcha_secret_key' ) )
{
return new WP_Error( "Captcha Invalid", __( "<strong>ERROR</strong>: You are a bot. If not then enable JavaScript" ) );
}
else
{
return $user;
}
}
}

Zrekapitulujme opět, jak funguje kód uvedený výše:

• Pomocí akce wp_enqueue_scripts jsme zařadili do fronty Javascriptový soubor reCaptcha Googlu do stránek WordPressu pro administrátorské přihlášení, registraci a přidělení nového hesla.
• Pomocí akce login_form jsme zobrazili zaškrtávací políčko.
• Než WordPress vyprodukuje finální autentizační výsledek, spustí filtr wp_authenticate_user, aby umožnil přidat jeden validační krok navíc. Uvnitř tohoto filtru zkontrolujeme, zda je uživatel člověk nebo robot. Pokud je to lidská bytost, vrátíme uživatelský objekt, jinak vrátíme chybový objekt WordPressu.

Prevence proti vytváření padělaných účtů

Službu reCaptcha je třeba také integrovat do administrátorského registračního formuláře, abychom robotům zamezili vytvářet padělané účty. Zde máte kód, který ji integruje do administrátorského registračního formuláře.

 add_action( "register_form", "display_register_captcha" );
function display_register_captcha()
{
if( get_option( 'captcha_site_key' ) && get_option( 'captcha_secret_key' ) )
{
?>
<div class="g-recaptcha" data-sitekey="<?php echo get_option( 'captcha_site_key' ); ?>"></div>
<?php
}
}
add_filter( "registration_errors", "verify_registration_captcha", 10, 3 );
function verify_registration_captcha( $errors, $sanitized_user_login, $user_email )
{
if( isset( $_POST['g-recaptcha-response'] ) )
{
$recaptcha_secret = get_option( 'captcha_secret_key' );
$response = file_get_contents( "https://www.google.com/recaptcha/api/siteverify?secret=" . $recaptcha_secret . "&response=" . $_POST['g-recaptcha-response'] );
$response = json_decode( $response, true );
if( true == $response["success"] )
{
return $errors;
}
else
{
$errors->add( "Captcha Invalid", __( "<strong>ERROR</strong>: You are a bot" ) );
}
}
else
{
if( get_option( 'captcha_site_key' ) && get_option( 'captcha_secret_key' ) )
{
$errors->add( "Captcha Invalid", __( "<strong>ERROR</strong>: You are a bot. If not then enable JavaScript" ) );
}
else
{
return $errors;
}
}
return $errors;
}

Podívejme se, jak funguje kód uvedený výše:

• Pomocí akce register_form jsme zobrazili zaškrtávací políčko.
• Než WordPress vyprodukuje finální autentizační výsledek, spustí filtr registration_errors, aby umožnil přidat jeden validační krok navíc. Uvnitř tohoto filtru zkontrolujeme, zda je uživatel člověk nebo robot. Pokud je to lidská bytost, vrátíme prázdný chybový objekt, jinak přidáme zprávu do chybového objektu a ten vrátíme.

Jak robotům zabráníme odesílat formulář s žádostí o přidělení nového hesla

Službu reCaptcha je třeba také integrovat do administrátorského formuláře, který sděluje, že jsme zapomněli heslo a žádáme o přidělení nového hesla, aby roboti nemohli odesílat ani tento formulář. Zde je, který ji integruje do administrátorského formuláře při přidělení nového hesla.

add_action( "lostpassword_form", "display_login_captcha" );
add_action( "lostpassword_post", "verify_lostpassword_captcha" );
function verify_lostpassword_captcha()
{
if( isset( $_POST['g-recaptcha-response'] ) )
{
$recaptcha_secret = get_option( 'captcha_secret_key' );
$response = file_get_contents( "https://www.google.com/recaptcha/api/siteverify?secret=" . $recaptcha_secret . "&response=" . $_POST['g-recaptcha-response'] );
$response = json_decode( $response, true );
if( true == $response["success"] )
{
return;
}
else
{
wp_die( __( "<strong>ERROR</strong>: You are a bot" ) );
}
}
else
{
if( get_option( 'captcha_site_key' ) && get_option( 'captcha_secret_key' ) )
{
wp_die( __( "<strong>ERROR</strong>: You are a bot. If not then enable JavaScript" ) );
}
else
{
return;
}
}
return $errors;
}

Zopakujme si, jak funguje kód uvedený výše:

• Pomocí akce lostpassword_form jsme zobrazili zaškrtávací políčko.
• Než WordPress vyprodukuje finální odkaz pro resetování hesla, spustí akci lostpassword_post, aby umožnil přidat jeden validační krok navíc. Uvnitř tohoto filtru zkontrolujeme, zda je uživatel člověk nebo robot. Pokud je to lidská bytost, nevrátíme nic, jinak skript násilně ukončíme s chybovou zprávou.

Pár slov nakonec

Je to nový způsob, jak chránit webové formuláře před roboty a zvýšit uživatelskou přívětivost. O tom, jak se používá tento nový typ captcha, se můžete více dozvědět v článku jak Google interně detekuje lidi a roboty. Až budete mít tento plugin integrovaný ve svém webu WordPressu, podělte se s námi o své zkušenosti v diskusi dole.

O autorovi

Narayan Prusty je webový astronaut. Založil web QScutter. Rád sdílí nápady. Když nekóduje, s potěšením hraje fotbal. Často ho najdete na QNimate, což je jeho osobní blog.

Original article: Preventing Bot Attacks on WordPress using No Captcha reCaptcha

Zdrojové kódy jsou pod licencí MIT.

• Translation: RNDr. Jan Pokorný
• Language and expert collaboration: Marek Machač