РазделыСтатьиРазработка сайтов → Антиспам «Я не робот»

Стоит задача создать простейший антиспам для формы отправки писем, надёжно отсекающий спам-роботов.

Создание «антиспама» начнем с постановки задачи.

1. Система должна быть простой, осуществляющей проверку в 1 клик мышью.
— Более всего этому соответствует галочка «Я не робот».
2. Технология должна быть доступна для людей и не видна большинству спам-роботов.
— Галочку «Я не робот» добавим с помощью яваскрипта, так как он работает в браузере у человека и не работает у большинства спам-ботов.
3. Просмотр HTML кода страницы не поможет роботу найти антиспам-систему.
— Достаточно разбить добавляемый на страницу тег в виде строки на части — применив яваскрипт-оператор «плюс», добавив для затруднения анализа рандомно пробелы.

Этап первый.
Делаем форму отправки. Для добавления галочки перед кнопкой «Спросить» сделан контейнер с id="nerobot". После загрузки страницы яваскрипт сработает и добавит туда галочку «Я не робот»
Код: HTML

<form action="./#contact" method="post">

   <
input type="hidden" name="question" value="true">
   <!--  
Здесь можно добавить дополнительные поля  -->
   <
input type="text" name="Name" placeholder="Имя" value="" />
   <
input type="email" name="email" placeholder="Email" required="required" value=""/>
   <
textarea placeholder="Введите Ваш вопрос" rows="6" name="text" required="required"></textarea>
    <
div id="nerobot" class="box-desc form-inline"></div>
    <
button type="submit" class="submit">Спросить</button>
</
form>
Этап второй.
Пишем яваскрипт, я буду использовать jQuery.
В тег с id="nerobot" добавляем чекбокс с name="nerobot".
Попутно замусорим код тегами и неравномерыми разрывами с помощью яваскрипт-оператора «плюс». Это сильно затруднит анализ роботу.
Код: Javascript

<script type="text/javascript">

    $(
document).ready(function() {
    $(
"#nerobot").append(' <table> < t'+'r><td><input id="sde"'+' type="check'+'box"   class="checkbox"  name="ner'+'obot" required></td><td><la''bel for="sde">Я н' +'е робот</label ></td></t' 'r></table>');
    });
</
script>
В конечном итоге после загрузки страницы форма будет выглядеть примерно так
Антиспам «Я не робот»

Этап третий — проверка на сервере, была ли отмечена галочка.
Очень просто — если на сайт зашёл человек, то он увидит галочку и отметит её.
Отправленные галочкой данные попадут в переменную $_POST['nerobot']. Если робот — галочки в коде нет, отметить не сможет.
Проверим на сервере, например, таким образом:
Проверка, установлена ли галочка «Я не робот», на сервере
Можно немного усложнить пример и сделать проверку «антиспама» в отдельной секции и вывести отдельную ошибку — как пожелаете, я думаю принцип понятен.

Возникшие вопросы задавайте в комментариях к статье. Не забывайте обрамлять код соответствующими тегами, форматированнный код проще читать.
13.07.2016 13:23 Автор/источник: Den1xxx

Комментировать

Вы не залогинены! Регистрация

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.