Още един начин за предотвратяване на спам при HTML формите

 

Защитата срещу автоматично попълване от ботове на HTML формите еволюира, но освен това еволюира и логиката на самите ботове. Резултатът е, че за посетителя на уеб сайта става все по трудно да попълни дадена форма за контакт, коментар или заявка, поради все по-неясните картинки и объркващи въпроси. Тук ще покажем един по-различен подход, който остава невидим за посетителя и все пак дава доста добри резултати.
 


Полета на формата, видими само от ботове
 


Идеята е да се създадат няколко полета във формата, които не са видими за посетителя. Тъй като ботовете анализират HTML кода, те виждат и попълват тези полета. Така проверката за бот се свежда само до проверка дати полето е попълнено. Има няколко начина за реализиране на този подход. Тук ще покажем три такива.
 


Скрит елемент
 


Това е най-лесния начин - просто се добавя скрит елемент <input type="hidden" />. Задаваме му някое широко разпространено име, като например mail, email или name. Например ако имаме форма за коментари с име и коментар, добавяме скрито поле email:

<form method="post" action="">
    <input type="hidden" name="email" />
    Name: <input type="text" name="name" />
    <br />
    Comment: <textarea name="comment"></textarea>
    <br />
    <input type="submit" name="button" value="Add" />
    <br />
</form>    

Тъй като при повечето форми полето за мейл е задължително, е много вероятно бота за попълни точно това поле. Така проверката за бот на PHP би изглеждала горе-долу така:

function detect_bot($post_data) {
    $is_a_bot = false;
    if (isset($post_data['email']) && !empty($post_data['email'])) {
        $is_a_bot = true;
    }
    return $is_a_bot;
}
if ($_POST && detect_bot($_POST)) {
    echo "You are not human";
} elseif ($_POST) {
    echo "Valid submission";
}

Може да видите резултата тук. Използвайте Web developer плъгин за Firefox, натиснете на Tools -> Web developer -> Forms -> Display form details, за да попълните скритото поле и вижте резултата.
 


Текстово поле с CSS прикритие
 


Тъй като полето от горния пример е с различен тип (hidden) от другите полета, то е лесно да бъде разпознато. За да оправим това, използваме CSS, който да скрие самото поле:

<style type="text/css">
    .email_field {
        display: none;    
    }
</style>
<form method="post" action="">
    <input type="text" name="email" class="email_field" tabindex="-1" />
    Name: <input type="text" name="name" />
    <br />
    Comment: <textarea name="comment"></textarea>
    <br />
    <input type="submit" name="button" value="Add" />
    <br />
</form> 
       

Забележете отрицателния tabindex, чрез който се предотвратява случайно попълване от потребителя.
 


Покриващ елемент
 


Друг начин за прикриване на добавеното поле е с друг HTML елемент върху него. В този случай допълнителното поле не може да се различи дори по различния class атрибут. Ето примерен код:

<style type="text/css">
    .email_cover {
        display: block;
        position: absolute;
        width: 500px;
        height: 30px;
        left: -200px;    
        border: 1px solid #000;
        background-color: #fff;
    }
    .clear {
        clear: both;            
    }
</style>
<form method="post" action="">
    <div class="email_cover"></div>
    <input type="text" name="email" tabindex="-1" />
    <div class="clear"></div>
    <br />
    Name: <input type="text" name="name" />
    <br />
    Comment: <textarea name="comment"></textarea>
    <br />
    <input type="submit" name="button" value="Add" />
    <br />
</form>


Заключение
 


Можете да проверите резултатите от трите метода тук. Трябва да отбележим, че те са твърде вероятно да предотвратят спам от ботовете, обикалящи много страници, но лесно могат да бъдат неутрализирани от специално направен за целта скрипт. Така че ако очаквате сайта ви да привлече повече внимание от спамърите е добре да се добавят допълнителни защити от автоматично попълване.
 

Няма коментари

Обратно към списъка със статиите

Тази страница последно е променяна на 2024-04-29 02:50:18