Разработка, создание и продвижение сайтов в Гомеле

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

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

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']. Если робот — галочки в коде нет, отметить не сможет.

Проверим на сервере, например, таким образом:

Проверка, установлена ли галочка «Я не робот», на сервере

Можно немного усложнить пример и сделать проверку «антиспама» в отдельной секции и вывести отдельную ошибку — как пожелаете, я думаю принцип понятен.

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

Дата 2016-07-13 13:23:16

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

Вы не залогинены!

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

Логин:
Пароль:
Запомнить меня

Имя пользователя: