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.
Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of
Catar4x on 18 Feb, 2008 wrote:
Cssglobe forever :p
Brian Rock on 18 Feb, 2008 wrote:
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 on 19 Feb, 2008 wrote:
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 on 19 Feb, 2008 wrote:
Felipe on 19 Feb, 2008 wrote:
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 on 19 Feb, 2008 wrote:
How do you get the captcha image to display different math questions? Would you have to use some more script?
cssglobe on 19 Feb, 2008 wrote:
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 on 19 Feb, 2008 wrote:
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 on 19 Feb, 2008 wrote:
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 on 19 Feb, 2008 wrote:
Julien on 19 Feb, 2008 wrote:
kik on 19 Feb, 2008 wrote:
Sarah on 19 Feb, 2008 wrote:
Iain Fraser on 20 Feb, 2008 wrote:
Josh A. on 20 Feb, 2008 wrote:
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 on 20 Feb, 2008 wrote:
James Coletti on 21 Feb, 2008 wrote:
derek allard on 21 Feb, 2008 wrote:
Sirius on 22 Feb, 2008 wrote:
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 on 23 Feb, 2008 wrote:
Richard on 4 Mar, 2008 wrote:
Ralph on 7 Mar, 2008 wrote:
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 on 7 Apr, 2008 wrote:
Dave on 13 Apr, 2008 wrote:
Dave
Eric on 28 Apr, 2008 wrote:
Arabia on 11 Jun, 2008 wrote:
thank you
Nikita Baffix on 14 Jun, 2008 wrote:
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 on 20 Jun, 2008 wrote:
sander houttekier on 23 Jul, 2008 wrote:
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 on 1 Dec, 2008 wrote:
Busby SEO on 2 Dec, 2008 wrote:
Busby SEO Test on 7 Jan, 2009 wrote:
Regards.
busby seo test info on 13 Jan, 2009 wrote:
Inventory Management Software on 21 Jan, 2009 wrote:
Barbara on 30 Jan, 2009 wrote:
craig on 7 Feb, 2009 wrote:
gosip artis on 11 Apr, 2009 wrote:
redips on 1 May, 2009 wrote:
Kris Utter on 16 Jun, 2009 wrote: