Honeypot Technique of Blocking Spam

honey-pot-thumbIn an earlier post I discussed the mystery of forms. Preventing spam on your blog or website can be difficult for anyone as bots and spammers are relentless. However, with the right techniques the battle can be won! One of my favorite techniques to use against bots trying to spam a form is the honeypot technique, because it doesn’t hinder the user from completing the form. Anti-spam techniques should not interfere with a user filling out the form, it could decrease lead conversions. An example of this kind of technique is Captcha.

When a spam bot comes to a form, it fills out EVERY input field, and ignores the CSS, which is a behavior we can exploit. One of the input fields can be hidden with CSS, display: none;, and then use JavaScript when the form is submitted. If the input field is empty submit the form, else, do nothing (or popup an alert message). Easy, right? The user is none the wiser, and we prevent spam bots from submitting the form with junk data.

The CSS:
Let’s get a little technical and show two different ways of handling the CSS. The first example is with a CSS3 attribute selector. Please note that IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified, which should be standard practice. Attribute selection is not supported in IE6 or below.

input[type="text"]#website { display: none; }

The old school way of doing things, but supported by IE6.

input#website { display: none; }

Let me explain the difference. There are several types of inputs: submit, button, password, text, and so on. Now with HTML5 there are even more: tel, number, date, etc. Using input with our unique id allows this style to be set on ANY input type that has this id. By adding [type="text"] it is limiting the style to input types of text that contain this unique id. It’s just a matter of personal preference which method you use and how global the style needs to be.

The JavaScript (jQuery):

<script>
$('form').submit(function(){    
        if ($('input#website').val().length != 0) {
            return false;
        }
});
</script>

The HTML:

<form method="get" action="/">
<input name="firstname" type="text" value="First Name" />
<input name="lastname" type="text" value="Last Name" />
<input id="website" name="website" type="text" value=""  />
<input type="submit" value="Submit" />
</form>

In the example above the website field is hidden with CSS because of id="website". A user enters first and last name and submits the form. If the website field has text in it then the form will do nothing when submitted as you can see by the return false in the JavaScript function. If the field is empty the form will submit as expected.

Things to remember for the novice.
Script and CSS references go in the <head> tag, HTML goes in the <body> tag. Classes can be used throughout the web page and referenced unlimited times, but id’s are unique and used only once. Using a jQuery function requires the jQuery library reference, which can be found here. Always declare a !DOCTYPE if using CSS3 so less modern browsers behave properly. Remember, the web is fun. Enjoy!

Demo:

YouTube Preview Image

Update: The above technique will work on spammers that do not ignore JavaScript. However, spammers that do ignore JavaScript, a server side technique would be a better solution.

About Kim Perry

Web developer at DexMedia. I code, develop, and make websites functional. Technology is always changing and new things pop up, that is what makes it so fun!

Comments

  1. I might be missing something here.. but bots don’t use javascript so how is this going to stop the form from being submitted?

    • Kim Perry says:

      The honey pot technique is good for stopping bots because they don’t see what humans see when the page is rendered. With a hidden input field, or a field set to display:none with CSS, the bot thinks this field should be filled in. All the JavaScript is doing is checking to see if that hidden field has information in it. If it doesn’t, the form will submit. The bots only care about the input fields; the JavaScript is what keeps the form from submitting when the bot adds text to a field that we set to hidden.

      • “if it doesn’t the form will submit” – but my point is the form will submit either way for the bot since it will not have JS enabled. You need to be checking if the field is filled out using your server side (php or whatever) and stop it there. You follow?

        • Kim Perry says:

          Yes, that is a good point. With the submit action being set with HTML it won’t catch the bots since they see HTML. However, if the submit action is being set using JavaScript then the form will not submit with JavaScript disabled, essentially catching the spam. Sadly, if an attacker is bound and determined to target your website there isn’t much you can do to prevent it. This is one of many steps to take to prevent spam. Someone could run Selenium and circumvent the JavaScript validation you have on your forms. This isn’t a sure fire way to prevent spam but its a step in the right direction.

          • Well setting the form action with javascript is not mentioned in the article and is not the standard. This is another likely effective spam prevention option, however, as your article is stated most people will implement this on a normal form and I don’t think it will stop any spam.

          • I would not include Javascript validation AT ALL in the blog post, since it’s easily circumvented. All you need is to hide the honeypot form element with CSS and validate the field being empty on the server side.

  2. As Jesse mentions, the validation should also be done server side as the bot may have JavaScript disabled so for example using PHP it would be:
    if ($_POST["website"] != “”) { //Bot detected }
    else { //Bot not detected }

  3. This post doesn’t seem to make any sense. For the form to be disabled according to the above you would have to have js enabled and spammers don’t have javascript enabled so this would accomplish nothing as currently written above. Please remove this article or rewrite it as to not misguide users.

What do YOU think?

Let us help you grow your business
Newsletter Signup

Newsletter Signup

Subscribe to our weekly newsletter for helpful tips on marketing your business.

Site Seal

Copyright © 2014, Dex Media, Inc. All rights reserved.