Fighting form spam is something almost every website owner has to face. If you allow comments on your site you will most likely be a subject of form spam attacks. The most effective and most popular way of fighting form spam is using generated images (captchas) that contain text that user should then retype into an input field. Since there are OCR algorithms that can read images, most of the time captchas contain messy and distorted text.
Fresh Solution
Messy and distorted text can be annoying to users, that it can prevent them from posting a comment. One more thing that can make to think twice when it comes to using some of the existing captcha solutions, is the fact that you can't control their appearance. Generated images can be, well - ugly! To a delicate designer soul that can be even greater issue than spending time every day moderating comments.
So how about we call CSS to the rescue.
The trick I am using on my comment forms doesn't appear to be that much different from regular captchas. But there is a great difference.
As we said there are some OCR technologies that can recognize symbols on the image. But in order for that to work you must have an image to start with.
Well, I don't use <img> tag so OCR doesn't apply to this trick. Instead, I use background image displayed with css. You'll agree when I say that there's absolutely no way that a robot can scan your html, locate your css file, compare css selectors, find a css definition, locate the image and read the image using OCR algorithm.
Here's a sample code from my form. You can of course use the same principle on your own form's markup.
The html code
<p> <label class="captcha" for="captcha">Answer?</label> <input type="text" name="captcha" id="captcha" /> </p>
The css code
label.captcha{
display:block;
background:url(/images/captcha.gif) no-repeat 0 0;
height:28px;
line-height:28px;
padding-left:90px;
margin-bottom:.5em;
}
Good sides
Good sides would be having easiest possible captcha and ability to design it anyway you like. You can put your own text, simple mathematical function, whatever...
Downsides
Downside to this trick is that people browsing your site with css disabled readers can't tell what you're asking them to do. Unfortunately, using this trick you prevent a part of your audience from commenting.
Catar4x 18 Feb, 2008
Cssglobe forever :p
Brian Rock 18 Feb, 2008
Another CSS tactic I read about was creating an extra field that didn't hold any meaningful data. Alter the CSS so a human won't see it. Then if a value is filled in, you know it was an auto-bot doing the spamming.
warnis 19 Feb, 2008
If you somehow could give users and alternative way of getting the data that would still bypass the spam bots as well then everything would be fine (I was thinking of the title="" attribute but I don't think that will cut it).
One way that I have thought of would be using the noscript-tags to wrap an input element and then hide the input via CSS.
Very few UAs would render that input (javascript and CSS disabled) and you could always give it a meaningful label (please dont fill this in or something). I don't know whether spam bots read content inside of noscript-tags or not so I guess it needs to be tested.
James 19 Feb, 2008
Felipe 19 Feb, 2008
IHow long does it takes to a spammer to learn to its bot that CSS rule learn.captcha in default.css has a link to an image?
Wait, it isn't even an external CSS so the link won't change (or cache browsers would prevent regular users to see the recent image they should have seen and answered)
So you just have to read http://cssglobe.com/v3.0/images/human_check.gif and I wonder if the image is changed session-based, daily (I can spam for a few hours now, great) or never (ouch, just have to learn a bot to enter "4" in the 3rd text input) ?
Jermayn 19 Feb, 2008
How do you get the captcha image to display different math questions? Would you have to use some more script?
cssglobe 19 Feb, 2008
You can also make it really complicated to bots once they find your image. i.e. your image could say "Enter third letter from the word IGNORANT".
Adding some more script you can make it as dynamic as you want, you can have several images appearing randomly.
Actually, the idea behind this was more of aesthetic nature. I wanted to avoid ugly captcha images and have something that blends more into my design. Not to mention that I hate retyping barely recognizable letters.
Barney 19 Feb, 2008
So:
# Create an additional field at the front of your form.
# Label it " First name** ".
# Style it to display:none.
# Write an explanation for those CSS-disabled users (we should really start a charity for those guys): " ** Leave blank. "
# Give that display:none too.
# Tell your form not to submit if the form is filled in. Any robot will.
The user has nothing extra to do, the code is much simpler, and you can run the same thing, staticly, over and over.
Julien 19 Feb, 2008
Just a thought: if your captcha image looked like " X Q W O K P M D ", and you just displayed a random portion of the image, via CSS, for the user to copy? (example: " O K ")
The OCR would try to copy everything it recognizes in the image, but a human wouldn't.
What do you think?
Dennison Uy - Graphic Designer 19 Feb, 2008
Julien 19 Feb, 2008
kik 19 Feb, 2008
Sarah 19 Feb, 2008
Iain Fraser 20 Feb, 2008
Josh A. 20 Feb, 2008
If you're going to use this technique then give it a class name that's completely irrelevant. That, I would argue, a robot couldn't detect.
Personally, I think there are other methods. Check the percentage of links used, or whether real words are used, and make the decision to allow on the server-side. Or use another method.
Fodcj 20 Feb, 2008
James Coletti 21 Feb, 2008
derek allard 21 Feb, 2008
Sirius 22 Feb, 2008
Solution one: An image shows three numbers: "34 20 63", and the task is to "Type in the number with the lowest value, multiplied with five:".
Solution two: An image shows five numbers: "9 4 6 3 7 2", and the task is to "Type in the sum of the three numbers with the lowest value".
There's no symbols (like + - * /) to tell the bot what to do, and the bot doesn't know if it's going to use all of the numbers or only some of them.
John 23 Feb, 2008
Richard 4 Mar, 2008
Ralph 7 Mar, 2008
Second, we all know, behind the spam are only people the write code for machines. If somebody of spam-code writer will be here they will improve your code to send more spams, it's your job (:
Ralph
Test Commenter 7 Apr, 2008
Dave 13 Apr, 2008
Dave
Eric 28 Apr, 2008
Arabia 11 Jun, 2008
thank you
Nikita Baffix 14 Jun, 2008
CAPTCHA breaking tools aren't always bots, as in autonomous robots scanning for web pages to look for CAPTCHA images they can attempt to defeat.
Good article.
Miadeo 20 Jun, 2008
sander houttekier 23 Jul, 2008
if a bot can check for css selectors, and can find a background image, it can also check if a field is hidden or not... (so i believe)
thus it might leave fields be when they are hidden....
so my solution, do not hide the field and label
but wrap them in a div and hide that one, or if you are using tables (*curse, go to hell, *curse) you can hide your tablerow for example...
Sander
smt 1 Dec, 2008
Busby SEO 2 Dec, 2008
Busby SEO Test 7 Jan, 2009
Regards.
busby seo test info 13 Jan, 2009
Inventory Management Software 21 Jan, 2009
Barbara 30 Jan, 2009
craig 7 Feb, 2009
gosip artis 11 Apr, 2009
redips 1 May, 2009
Kris Utter 16 Jun, 2009