Боремся со спамом с помощью 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.
Недостатки
Единственный минус метода заключается в том, что при просмотре сайта через браузер с отключенной поддержкой CSS (такие вообще часто встречаются?), не поймут, что вы просите их сделать. Т.е. используя этот трюк, вы препятствуете добавлению комментариев частью вашей аудитории.
* * *
На веб-сайте progam.ru вы найдете всегда актуальные новости компьютерных игр. Здесь публикуются скриншоты, трейлеры, видео, саундтреки к играм.
Смотрите также
Обновление CSStemplater.com (CSS Layout Generator)
На сайте CSStemplater.com, который представляет из себя генератор HTML+CSS шаблонов проведено обновление, которое включает ряд нововведений различного характера: Появилась возможность задавать произвольные параметры у прежних опций, это: ширина макета; минимальная ...
Web 2.0 генератор шаблонов HTML + CSS
Сегодня двумя веб-разработчиками в лице меня и PHP-мастера Антона a.k.a. molodoy официально дан старт онлайн-сервису под названием “CSS Layout Generator” – генератор шаблонов HTML + CSS. Собственно, из названия сервиса ...
Цвет курсора в поле input и кроссбраузерность
Однажды я верстал страницу, на которой присутствовало текстовое поле поисковой формы. Ее особенность состояла в том, что фон был темно-серого цвета (с текстом белого цвета), с чем я встретился впервые ...
5 советов верстальщику
Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что “пинок” получил от трех человек. 1) Читайте блоги специалистов в данной ...
Комментарии (35)
Взлом-щик, описаное решение больше подходит для тех, кто пользуется стандартной капчей. А циферки – это альтернативный, но тоже эффективный вариант.
Злой способ.. надо заюзать, хотя аксимет неплохо справляется ))
Хм, что-то новенькое – не слышал до этой статьи о таком способе. Минус включенности цсс для современных пользователей интернета думаю надуман – без включеннего цсс можно забыть о нормальном сёрфинге в Инете, как собственно и с отключенными картинками.
Вот единственное что плохо, что в перспективе, если технология возымеет популярность, то начнут делать роботов, которые будут обходить и её, ведь найти нужный селектор в цсс-е и сделать нужный отступ от спрайта, согласитесь, длеко не архисложная задача…
>>можно забыть о нормальном сёрфинге в Инете с отключенными картинками.
Категорически не согласен. Дома постоянно сижу без картинок. И не чувствую себя ущемленным. Иногда, сайт без картинок, кстати, смотрится даже лучше, чем с картинками:) Ну и загрузка быстрее. А про экономию трафика я молчу.
В любом случае, далеко не все пользователи рунета имеют безлимитный скоростной инет. Поэтому доля пользователей с отключенными картинками достаточно велика, чтобы не пренебрегать ими.
На счет отключенного цсс – согласен. Ни разу не видел идиота, который бы его отключал.
[quote post=”774″]На счет отключенного цсс – согласен. Ни разу не видел идиота, который бы его отключал.[/quote]
Тоже согласен =)
Ещё один вариант более приспособленный для пользователей с отключённой графикой: вместо лейбла с бэкграундом грузить iframe, где нормальную картинку ставить. Так, как и ваш способ сломать можно, но под конкретный проект делать парсер вряд ли будут, а если будут, то можно усложнять и это.
Ну и конечно автоматически генерируемые имена полей и их расположение тоже забывать не надо…
Народ! Боты давно уже парсят CSS. Тут ничего такого нет.
У меня есть идея генерить ASCII-ART для этой цели :)
Я вообще против капчи. Но для поклонников самое оно, заодно и народу лишняя вилка в зад, чтобы к css приобщаться :)
ЗЫ
Нафига, вообще в браузерах, функция выключить CSS.
ЗЗЫ
С тысячой поздравляю )
Интересный способ борьбы со спамом. Я на данном моменте остановился на Akismet и премодерация для первого коммента юзера и вроде пока не сильно много комментов всё нормально и плагин отсеивает хорошо хотя и зачастую нормальные комменты.
Давай, твори, интересно посмотреть на реализацию ;)
Здорово сказал =)))
Спасибо!
Александр Кузнецов, у меня аналогично, только еще плюс цифровая капча. Отключал ее на какое-то время – начинает накапливаться спам, который нужно модерировать, а так – все чисто, никаких лишних действий.
Возможно, так бывает из-за того, что, комментаторов, попадающих в спам, однажды пометили на спам на каком-то другом блоге, а поскольку база Акисмета общая, он впоследствии везде помечает такие комменты, как спам.
А вот mail.ru ввел новую капчу: http://win.mail.ru/cgi-bin/signup
Ого… жестокая там капча
>Вот единственное что плохо, что в перспективе, если технология возымеет популярность, >то начнут делать роботов, которые будут обходить и её, ведь найти нужный селектор в >цсс-е и сделать нужный отступ от спрайта, согласитесь, длеко не архисложная задача…
Ну пока не сделали надо пользоваться ), в любом случае для чего угодно их сделают.
[quote comment=”2790″]А вот mail.ru ввел новую капчу: http://win.mail.ru/cgi-bin/signup[/quote]
Да там жесть, повидимому их очень серьезно достали боты.
Ерунда какая-то со статичной картинкой. Намного интереснее использовать приемы вообще без капчи, как в этом блоге. Чтобы искусственный интеллект вообще не справился.
Только не использовать 4+10 = ? как в этом блоге… А, например, такой вопрос: “Напишите первую букву доменного имени этого блога”.
Если даж со временем кто-то нибудь пропишет правильный ответ в спамилки, не составит труда сменить вопросик на какой-нибудь другой.
Именно по этому принципу я настроил “анти-спам бот” в QIP, и избавился от спамеров. Теперь осталось тож самое сделать для формы и всё.
Как вам?
Ну почему вконце поста, не сделать принскрин или дать линк на урл?
Вот уж не знаю, капча по моему не больно то останавливает тех кому надо наспамить. Вот у меня есть предложение сделать так чтобы капча просто выглядела сложным хитрым сочетанием тэгов, с классами CSS, любым мусором. К примеру капча PREVED будет записана NASPREVEHEHE тут ещё надо класс hidden запрятать куданибудь поглубже. Естественно всё это должно быть ещё более запаренным, можно даже нестандартный шрифтик для этого дела подшить. Одним словом, как альтернатива… Делать эту капчу бакграундом и потом париться оттого что она кэшируется, хех, имхо не много толку.
Подобного рода боты есть уже давно: загружают страницу, выцепляют css файл, находит id или класс, берут картинку, распознают ее. Да и вообще это не решение )))
А я себе антиспам поставил – в виде галочки я не бот!
а я сам использовал этот метод давно только еще в чем косяк этого метода то что если человек не разберет что написано на картинке загрузить новую картинку без перезагрузки страницы нельзя!
JS – возможно всё, а про то, что изображение можно обновить отдельно от страницы средствами браузера далеко не каждый пользователь осведомлён.