19 Jul, 2007

Published at 02:07PM

Tagged with css, hacks, programming, spam, and web

This post has 2 comments

Preventing web-form spam using CSS

I just came across a pretty clever way to prevent comment spam (or any web-form spam for that matter). It’s straight forward and sticks to the basics. I’m honestly surprised I’ve never thought of this before.

In order to leave comments here, you must first fill in the spam-prevention field, which basically asks, “Are you human?” Since any extra field is a pain, I’m storing a cookie for you (if you answer correctly once, chances are you’re a human forever). I realized, today, that I can essentially do the same thing without the extra field. Since humans typically fill in fields that aren’t hidden, I could have:

// somewhere in the form...
<input type="text" name="verification" id="verification" />

// somewhere in the css...
input#verification { visibility: hidden; display: none; }

If a value from the verification input is posted to the server, it must be a robotronic spambot that fills in hidden fields, which is obviously not allowed. Personally, I think that’s a pretty clean way to deal with spam. I might use it on golf trac.

Comments

JRS Tuesday, 31 Jul, 2007 Posted at 02:23PM

Wow, I never really thought about this either! I guess I just don’t know that much about spam bots and how they fill up all the fields. I think I might give this a try for a site I am developing myself. Have you been able to test this method reliably? I wouldn’t know how to go about trying to get a spam bot to leave a comment :)

Thanks for the great idea!

-JRS

Ryan Tuesday, 31 Jul, 2007 Posted at 05:30PM

Yes, I am using it on a couple of places, and it seems to be an effective approach so far. As for simulating a “spam bot”, all you really need to do is post the form with that field filled in. You don’t need to hide the field to test it, as that’s the point in a way. The automated spam won’t care if the field is hidden or not, which means all you need to check for is if that field shows up on the server. Once you get your code working, then you can hide the field via CSS.

I’m developing in Rails, so testing was even easier. I just wrote a couple of (functional) tests to simulate a form post with and without the “verification” field.

And while I wish I would have thought of this, I didn’t. Credit goes to: http://klauskjeldsen.dk/2007/07/19/...

Do you have something to say about this post?
Retype the image to the right Spam Hint: Are You Human? Textile Formatting Tips

or

Ryan Heath | Site Management A Ruby on Rails production.

This site is a Formed Function. Formed Function LLC | @formedfunction | Get in Touch