Боремся со спамом с помощью CSS
Борьба со спамом — это то, с чем сталкивается почти каждый владелец сайта, на котором разрешено комментирование. Самый популярный и эффективный (?) способ борьбы со спамом — использование специального изображения капча, информацию с которого комментатор должен ввести в предусмотренное для этого поле. С тех пор, как появились алгоритмы OCR, которые позволяют распознавать текст на изображении, на капчах стали выводить «грязный» и искаженный текст.
Для справки:
OCR (англ. Optical Character Recognition — Оптическое распознавание символов) — механическая или электронная конвертация изображений символов и букв в текст, редактируемый на компьютере. Перевод осуществляется программным путём, после получения изображения со сканера или фото.
Текст, преобразованный из графической формы в символьную (текстовую), можно далее обрабатывать любыми текстовыми редакторами.
Новое решение
«Грязный» и искаженный текст может раздражать пользователей и препятствовать тому, чтобы они оставляли комментарии. Еще одна вещь, которая заставляет подумать дважды, когда заходит речь об использовании некоторых из существующих вариантов капчи, — тот факт, что вы не можете контролировать их внешний вид.
А как на счет того, чтобы призвать на помощь технологию CSS.
Уловка, использующая CSS, внешне практически не отличается от стандартного способа отображения капчи. Но, тем не менее, есть большое различие в результате.
Как было сказано выше, существует технология OCR, которая распознает символы на изображениях. Но для того, чтобы эта технология работала, необходимо наличие самого изображения, что логично.
Теперь начинается самое интересное. Изображение капчи нужно выводить не тегом <img>, как это делается везде, а использовать его в виде фонового изображения, заданного с помощью CSS.
И в результате OCR не сможет ничего распознать. Согласитесь, что вряд ли робот обучен тому, чтобы сначала просканировать html-код, определить расположение вашего CSS-файла, сравнить CSS-селекторы, найти нужно CSS-правило, определить расположение изображения и прочитать его, используя OCR.
Вот простой пример использования данного метода.
HTML код
<p>
<label class="captcha" for="captcha">Введите сумму чисел на изображении</label>
<input type="text" name="captcha" id="captcha" />
</p>
CSS код
label.captcha {
display: block;
background: url(i/captcha.gif) no-repeat;
height: 28px;
line-height: 28px;
padding-left: 90px;
}
Положительные стороны
Плюсы метода заключаются в том, что можно легко самому задать нужный внешний вид капчи, поместить на изображение свой собственный текст, простую математическую функцию
Недостатки
Единственный минус метода заключается в том, что при просмотре сайта через браузер с отключенной поддержкой CSS (такие вообще часто встречаются?), не поймут, что вы просите их сделать.
* * *
На веб-сайте progam.ru вы найдете всегда актуальные новости компьютерных игр. Здесь публикуются скриншоты, трейлеры, видео, саундтреки к играм.
Комментарии (35)
Ещё один вариант более приспособленный для пользователей с отключённой графикой: вместо лейбла с бэкграундом грузить iframe, где нормальную картинку ставить. Так, как и ваш способ сломать можно, но под конкретный проект делать парсер вряд ли будут, а если будут, то можно усложнять и это.
Ну и конечно автоматически генерируемые имена полей и их расположение тоже забывать не надо…
Народ! Боты давно уже парсят CSS. Тут ничего такого нет.
У меня есть идея генерить ASCII-ART для этой цели :)
Я вообще против капчи. Но для поклонников самое оно, заодно и народу лишняя вилка в зад, чтобы к css приобщаться :)
ЗЫ Нафига, вообще в браузерах, функция выключить CSS.
ЗЗЫ
С тысячой поздравляю)
Интересный способ борьбы со спамом. Я на данном моменте остановился на Akismet и премодерация для первого коммента юзера и вроде пока не сильно много комментов всё нормально и плагин отсеивает хорошо хотя и зачастую нормальные комменты.
Давай, твори, интересно посмотреть на реализацию ;)
Здорово сказал =)))
Спасибо!
Александр Кузнецов, у меня аналогично, только еще плюс цифровая капча. Отключал ее на какое-то время — начинает накапливаться спам, который нужно модерировать, а так — все чисто, никаких лишних действий.
Возможно, так бывает из-за того, что, комментаторов, попадающих в спам, однажды пометили на спам на каком-то другом блоге, а поскольку база Акисмета общая, он впоследствии везде помечает такие комменты, как спам.
А вот mail.ru ввел новую капчу: win.mail.ru/cgi-bin/signup
Ого… жестокая там капча
>Вот единственное что плохо, что в перспективе, если технология возымеет популярность, >то начнут делать роботов, которые будут обходить и её, ведь найти нужный селектор в >цсс-е и сделать нужный отступ от спрайта, согласитесь, длеко не архисложная задача…
Ну пока не сделали надо пользоваться), в любом случае для чего угодно их сделают.
[quote comment="2790"]А вот mail.ru ввел новую капчу: win.mail.ru/cgi-bin/signup[/quote]
Да там жесть, повидимому их очень серьезно достали боты.
Ерунда какая-то со статичной картинкой. Намного интереснее использовать приемы вообще без капчи, как в этом блоге. Чтобы искусственный интеллект вообще не справился.
Только не использовать 4+10 =? как в этом блоге… А, например, такой вопрос: «Напишите первую букву доменного имени этого блога».
Если даж со временем кто-то нибудь пропишет правильный ответ в спамилки, не составит труда сменить вопросик на какой-нибудь другой.
Именно по этому принципу я настроил «анти-спам бот» в QIP, и избавился от спамеров. Теперь осталось тож самое сделать для формы и всё.
Как вам?
Ну почему вконце поста, не сделать принскрин или дать линк на урл?
Вот уж не знаю, капча по моему не больно то останавливает тех кому надо наспамить. Вот у меня есть предложение сделать так чтобы капча просто выглядела сложным хитрым сочетанием тэгов, с классами CSS, любым мусором. К примеру капча PREVED будет записана NASPREVEHEHE тут ещё надо класс hidden запрятать куданибудь поглубже. Естественно всё это должно быть ещё более запаренным, можно даже нестандартный шрифтик для этого дела подшить. Одним словом, как альтернатива… Делать эту капчу бакграундом и потом париться оттого что она кэшируется, хех, имхо не много толку.
Подобного рода боты есть уже давно: загружают страницу, выцепляют css файл, находит id или класс, берут картинку, распознают ее. Да и вообще это не решение)))
А я себе антиспам поставил — в виде галочки я не бот!
а я сам использовал этот метод давно только еще в чем косяк этого метода то что если человек не разберет что написано на картинке загрузить новую картинку без перезагрузки страницы нельзя!
JS — возможно всё, а про то, что изображение можно обновить отдельно от страницы средствами браузера далеко не каждый пользователь осведомлён.