Боремся со спамом с помощью CSS

Борьба со спамом - это то, с чем сталкивается почти каждый владелец сайта, на котором разрешено комментирование. Самый популярный и эффективный (?) способ борьбы со спамом - использование специального изображения капча, информацию с которого комментатор должен ввести в предусмотренное для этого поле. С тех пор, как появились алгоритмы OCR, которые позволяют распознавать текст на изображении, на капчах стали выводить “грязный” и искаженный текст.

Для справки:

OCR (англ. Optical Character Recognition - Оптическое распознавание символов) - механическая или электронная конвертация изображений символов и букв в текст, редактируемый на компьютере. Перевод осуществляется программным путём, после получения изображения со сканера или фото.

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

Новое решение

“Грязный” и искаженный текст может раздражать пользователей и препятствовать тому, чтобы они оставляли комментарии. Еще одна вещь, которая заставляет подумать дважды, когда заходит речь об использовании некоторых из существующих вариантов капчи, - тот факт, что вы не можете контролировать их внешний вид.

А как на счет того, чтобы призвать на помощь технологию CSS.

Уловка, использующая CSS, внешне практически не отличается от стандартного способа отображения капчи. Но, тем не менее, есть большое различие в результате.

Как было сказано выше, существует технология OCR, которая распознает символы на изображениях. Но для того, чтобы эта технология работала, необходимо наличие самого изображения, что логично.

Теперь начинается самое интересное. Изображение капчи нужно выводить не тегом <img>, как это делается везде, а использовать его в виде фонового изображения, заданного с помощью CSS.

И в результате OCR не сможет ничего распознать. Согласитесь, что вряд ли робот обучен тому, чтобы сначала просканировать html-код, определить расположение вашего CSS-файла, сравнить CSS-селекторы, найти нужно CSS-правило, определить расположение изображения и прочитать его, используя OCR.

Вот простой пример использования данного метода.

HTML код

CSS код

Положительные стороны

Плюсы метода заключаются в том, что можно легко самому задать нужный внешний вид капчи, поместить на изображение свой собственный текст, простую математическую функцию и т.д. И робот при этом не сможет ее разобрать, т.к. изображение выводится с помощью CSS.

Недостатки

Единственный минус метода заключается в том, что при просмотре сайта через браузер с отключенной поддержкой CSS (такие вообще часто встречаются?), не поймут, что вы просите их сделать. Т.е. используя этот трюк, вы препятствуете добавлению комментариев частью вашей аудитории.

VIA

* * *

На веб-сайте progam.ru вы найдете всегда актуальные новости компьютерных игр. Здесь публикуются скриншоты, трейлеры, видео, саундтреки к играм.