Простая, невидимая капча на JavaScript для формы обратной связи

На некоторых сайтах используются настолько простые движки, что порой нет возможности отключить визуальный редактор (типа TinyMCE) и каждая страница представляет из себя выбеленный html/xhtml-код.

Как же быть если на страницу необходимо встроить некоторую простую форму, например для контактов, заказа звонка или простой калькулятор с отправкой суммы когда использовать php на страницах напрямую мы не можем?

Все это можно реализовать с помощью html-формы с некоторыми добавками javascript, ну и без серверного php-скрипта обработчика переданных из формы данных и одновременно мейлера не обойтись.

При чем тут JavaScript-captcha?

Если страницы у нас это сгенеренный html, то мы например не сможем стартовать сессии, чтобы в итоге использовать старинную капчу в стиле «угадай три (4, 5) символа».

В поисках решения наткнулся на такую идею:
1. Создаем еще одно скрытое поле в форме.

Пользователи не будут видеть это поле и не изменят его значения по умолчанию.
Спам-скрипты могут заполнить это поле случайным значением.

2. Добавим немного javascript-кода:

var antiSpam = function() {
        if (document.getElementById("antiSpam")) {
                a = document.getElementById("antiSpam");
                if (isNaN(a.value) == true) {
                        a.value = 0;
                } else {
                        a.value = parseInt(a.value) + 1;
                }
        }
        setTimeout("antiSpam()", 1000);
}
 
antiSpam();

Этот небольшой кусок кода заполняет это скрытое поле значением количества секунд прошедшего с момента загрузки страницы.
Когда пользователь закончит заполнение формы и нажмет кнопку «submit» обрабатывающий скрипт получит новое значение скрытого поля antiSpam вместе с остальными значениями полей.

Обработка полученного значения весьма разнообразна, вот один из алгоритмов:

If AntiSpam = An Integer
        If AntiSpam >= 10 Seconds
                Comment = Approved
        Else
                Comment = Spam
        End
Else
        Comment = Spam
End

В данной логике к спаму относится все то, что забивалось в форму менее 10 секунд.

Пример


По идее в этом поле должны отсчитываться секунды прошедшие после загрузки страницы. Таким образом если это поле будет находится в контактной форме, будет скрытым и адекватным по величине, можно говорить, что форму заполнял человек.
Рассмотрим внедрение такого вида капчи в стандартную форму для контактов в Joomla 1.0.X. Воспользуемся старым методом внедрения в эту форму обычной картиночно-цифровой капчи KCaptcha:

  • 1. В /components/com_contact/contact.html.php в функции _writeEmailForm добавим скрытое поле с отсчетом секунд (после строки 694):
    <input type="hidden" name="antiSpam" id="antiSpam" value="что угодно" />
  • 2. В in/components/com_contact/contact.php в функцию sendmail добавим проверку отправленного количества секунд (line 382):
    $sessionCheck = $mparams->get( 'sessionCheck', 1 );

    // BEGIN PATCH
    if(!isset($_POST['antiSpam']) || $_POST['antiSpam'] < 10){
    mosErrorAlert('Что-то вы быстро форму заполнили, давайте ка помедленнее, как человек ^_^');

Метод пока только описан, но не протестирован, да и у источника идеи, спам на блоге присутствует, т.е. теоретически есть способ такую капчу обойти (либо она не отрабатывает задуманным способом).

Дополнение:

Как показать результат обработки формы, то есть результат работы скрипта указанного в action-атрибуте формы, в popup-окне

1. Добавить на страницу javascript-функцию:

<script language="JavaScript"> 
function popupwin() { 
  window.open("serverscript.php", "popupwindow",  
    "width=300,height=250,status=no,toolbar=no,menubar=no"); 
} 
</script>

2. Добавить атрибут в тег form:

<form name="form" action="serverscript.php" target="popupwindow">

3. Добавить вызов функции создающей popup-окно при клике на кнопку «Отправить»:

<input value="Отправить" type="submit" onClick="popupwin()">;

Комментариев: 10

  • 26.12.2010 Олег:

    По теме невидимой капчи предлагается много решений, все они хороши. А как будут вести себя боты, когда они на странице вообще не находят никакой формы? Как тут:

    fotoword.com.ua/?action=uploads

    Форма выводится в зашифрованном виде и расшифровывается при загрузке страницы. ключ к расшифровке генерируется на основе SID, т.е. для каждого пользователя код разный, включая названия полей формы. Является ли данная невидимая капча непробиваемой, или я заблуждаюсь?

  • 26.12.2010 Кирилл:

    Думаю вероятность "пробивания" вашей невидимой капчи весьма низка :) . Думаю, в целом, спам-боты ищут скорее стандартные формы, чем что-то оригинальное.

  • 26.12.2010 Олег:

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

    скрытые поля, которые человек не может заполнить, а бот заполняет — это понятно. Но почему никто не додумался до скрытой формы?? или, может, кто-то додумался, и я зря тут возникаю.

  • 18.01.2012 Артем:

    А куда мне установить код с обработкой? Языками не владею...

    Это туда же в head между тегами script и /script?

    Будет ли работать так с формой для отправки сообщения по e-mail?

    Спасибо!

    • 18.01.2012 Кирилл:

      Привет, пока что дописал теоретическую часть в пост :) как попробую ее в деле — отпишусь.

    • 17.07.2012 Кирилл:

      Good news, вставил эту капчу в форму для связи на старой Joomla 1.0.XX, и спам исчез, будем смотреть на какое время.

  • 19.07.2012 Даша:

    А куда лучше добавлять js??

    И можно ли проверку значений сделать также на js?

    • 19.07.2012 Кирилл:

      А куда лучше добавлять js??

      — лучше на страницу с формой

      И можно ли проверку значений сделать также на js?

      — теоретически можно, но на вскидку не расскажу, надо искать варианты

  • 11.11.2012 Сергей:

    Помогите определиться какой лучше, выбираю из invisible captcha и NoSpamNX. Вроде они используют одинаковый способ — подмена полей.

  • 14.01.2015 Николай:

    Хорошо придумано с временем заполнения формы. А как же быть если человек заполняет поля, используя автозаполнение формы от браузеров? Там же заполнение поля длится более секунды.


Добавление комментария:

 css.php