Делаем captcha "Я не робот"

Сегодня ко мне обратился клиент, у которого на протяжении двух недель через форму отзывов о товаре на сайт приходит спам. Мы решили его проблему при помощи альтернативной каптчи "Я не робот". Это статья о создании такой каптчи, с целью защитить сайт от спам-ботов.
В интернет-магазинах часто используют отзывы о товаре, они полезны для SEO и дают больше информации пользователям, вызывают доверие у покупателей. Отзывы вместе с рейтингами могут использоваться в микроразметке для создания снипетов в поисковой выдаче. Администраторы магазинов получают от пользователей обратную связь по качеству товара.
Вообщем, отзывы - это очень полезный блок в карточке товара, единственный их недостаток в том, что они содержат форму в которую спам-боты грузят ссылки и всякий другой рекламный контент.
Кроме отзывов на сайте могут быть и другие формы, например, Обратная связь на странице контактов, обратный звонок и т.д, куда можно программно залить информацию.

Отследить добавление нового спам-сообщения просто, они приходят на почту администратора и он их удаляет ежедневно, тратит свое время, нервничает, что сайт не защищен. Чтобы мусора на почту приходило меньше, на формы ставят каптчу. В 1С Битрикс есть стандартные инструменты по генерации CAPTCHA и настройки ее в компонентах. Все было бы хорошо, но роботы научились распознавать данные для проверки, в то время как немногим пользователям удается с первого раза прочитать символы на картинки.

На рисунке пример формы добавления отзывов, где не в лучшем виде представлена CAPTCHA из стандартного функционала CMS 1С Битрикс. Защитный код практически не читабельный, пользователь его не сможет ввести с первого раза. Только роботу под силу распознать код).

  Для снижения активности спамеров можно создать каптчу, которая работает по js-событию браузера. Поскольку роботы работают только с исходным кодом страницы, они не смогут создать событие. На этом и построена логика, она используется на многих крупных проектах.

Чтобы технически создать каптчу "Я не робот", в форму добавляем скрытое поле:

В данном поле будем менять значение по клику на ссылку.

Вместо CAPTCHA ставим блок, который содержит ссылку "Я не робот" и картинку, для красоты.

Я не робот

Добавляем скрипт, который будет менять значение в скрытом блоке через 1,5 секунды после нажатия на ссылку.

function fn_robot(){ 
setTimeout(function(){
$("#robot").attr("value",""); 
} 
},1500);
 }

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

В итоге получаем защиту от спам-ботов и удобную для пользователя альтернативу CAPTCHA.
16.05.2016

Семен Голиков.