Felippe Regazio

Posted on Nov 12, 2018 • Edited on Mar 2, 2020

How to create a simple Honeypot to protect your Forms against Spammers

#webdev #security #html #beginners

I think this post will be short and useful. The goal here is to demonstrate a simple technique to help you block spammers and bots that could attack your website forms. This meant to be an extra layer in spam prevention, not the main resource to. Use it with another tools like reCaptcha, etc. Due its simplicity, i really recommend you to follow this form pattern, so, lets code:

Imagine you have the following form structure:

<form id="myformid" action="/myformaction">
    <label for="name">Your Name</label>
    <input type="text" id="name" name="name" placeholder="Your name here" required maxlength="100">
    <label for="email">Your E-mail</label>
    <input type="email" id="email" name="email" placeholder="Your e-mail here" required>
</form>

Most of simple bots will search form common patterns, like label common names, input id's, input common attributes, required fields, etc, and than the bot will fill 'em with fake info to try send you, and your customers, spams or some malicious codes. The most common fields to search are fields named like "email, phone, address"...

So, lets cheat on that and create a simple honeypot by changing our form structure to:


<style>
    .ohnohoney{
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
    }
</style>

<form id="myformid" action="/myformaction">
    <!-- Real fields -->
    <label for="nameaksljf">Your Name</label>
    <input type="text" id="nameksljf" name="nameksljf" placeholder="Your name here" required maxlength="100">
    <label for="emaillkjkl">Your E-mail</label>
    <input type="text" id="emaillkjkl" name="emaillkjkl" placeholder="Your e-mail here" required>
    <!-- H o n e y p o t -->
    <label class="ohnohoney" for="name"></label>
    <input class="ohnohoney" autocomplete="off" type="text" id="name" name="name" placeholder="Your name here">
    <label class="ohnohoney" for="email"></label>
    <input class="ohnohoney" autocomplete="off" type="email" id="email" name="email" placeholder="Your e-mail here">
</form>

Lets see the changes:

First we created a class to hide things. The .ohnohoney class. Important to point some things now:

Dont use display:none, some bots cant access fields with display none, other simply know that they should'nt fill the display none fields. Dont use "hidden" in the class name, some advanced bots can recognize it.
Than we created the "Real fields". This are the visible fields and the ones which must be relevant to your backend in terms of data. This fields must have the identifications changed to hashes. Commonly i use the pattern "nameHASH" all together. Dont use "name-hash" or variations of that, a simple split would expose the real field name. Now, a bot cant recognize what this fields are, they're just know that the form has some fields which must be filled, maybe following the "type" as pattern.
By creating the "h o n e y p o t" fields we will be able to identify the Spammer. Important to: Let the label empty, use your 'ohnohoney' class to hide all those fake inputs. Turn your fake input the most simple, generic and attractive as possible. Use simple and common names as "email, phone, name, etc", disable the autocomplete (so, browser will not fill it), disable rules, but keep the types.

Now we have 2 parts in our form: Real fields with our inputs protected by hashes and strange names (you can implement the hash or strange names as you prefer). And our honeypot (dont write "honeypot", prefer split the letters to avoid any recognition). Now on your backend:

Verify if any of the "h o n e y p o t" fields came filled. If yes, congrats, you trapped a spam. Most of them will fill all this fields without differentiate them. So, all you have to do is to check if any of your "h o n e y p o t" fields came filled, if yes, its a spam. If you prefer, you can do this check on the client, in case of an ajax form, this will avoid use server resources to compute unuseful data (but keep the backend validation anyway). When you catch a spam, just dont send the data and do whatever you want with it. If names as "email, phone, etc" are important to your backend, just transcript the names using arrays.

Here is a single-file repo with a simple implementation of this technique:
https://github.com/felippe-regazio/php-honeypot-example

Remember: this is just a simple layer to prevent attacks in a simple way, some technologies can identify even this patterns, so use all the weapons you can against it. But i believe that this simple pattern can avoid at least 50% of spams in your webpage.

Top comments (29)

delanyo agbenyo • Jun 12 '22

I think it's also good to place tabindex="-1" on the honeypot input fields

Mihail Malo • Nov 12 '18

Good job, now LastPass won't fill my form data into your site and you lost a customer.
I highly recommend no one do this.

Atif Mohammed • Apr 20 '19

If the functionality of LastPass on a webpage is the basis of your judgment on whether you purchase a product or not then maybe there is something questionable about your judgment criteria itself.

Felippe Regazio • Nov 12 '18 • Edited

I understand your point, but i believe you can drive it to your needings, without lose a customer. If you want to integrate with last pass, for example, just keep the inputs you need and creating only one to use as honeypot (phone for example, i dont know), which is hidden, not required and not used by anything. One single input is enough to catch some spammers : )

Mihail Malo • Nov 12 '18

Then LastPass will fill the invisible field, especially after the lengths you went through to make them hidden in a special way, not the conventional way.
It's basically the same thing as your bots 😄

Felippe Regazio • Nov 12 '18 • Edited

so, what i mean is to you to use names that lastpass didnt use or adapt the core ideia on the post to your needings. last pass will not fill your entire form, and you can configure autofill on lastpass or use flags from their api like 'data-lpignore' which will tell the lastpass to not fill some fields. however, hope this to be useful to someone.

Danielle Greaves • Jan 10 '20

I think this is great. Question about accessibility: What is your opinion on using an aria attribute to hide this, so that screenreaders don't come across this and confuse users? Do you think bots are smart enough to recognize and skip this field altogether? Is there some sort of flag we could use instead?

Felippe Regazio • Jan 10 '20

Thats a great question Danielle. I think that the most configurations you add to the elements, the most hints you give to bots and spammers. So, we have to balance. Once we are talking about accessibility, there is no way to say no, we have to be careful.

Some alternatives i can think are:

Wrap the elements on a fieldset element that is aria-hidden and has . ohnohoney can be a good approach.

But, to tell you the truth, i dont see a problem with the aria. The "hidden" attr means hidden to everyone, but "aria-hidden" means hidden to screen readers and similar tools. I think the aria should not warm the technique cause bots should consider those elements too.

Would be cool to let a test running for a while. A form with aria and one without, and compare the spam incidence. If i was writing a bot, i would consider the aria-hidden inputs also, cause we never know the possible pages architectures, but im just guessing.

Sorry if my answer was not so complete as you could be expecting :/

Danielle Greaves • Jan 10 '20

No, I think it's a great thing to consider and have a discussion about. I'm just implementing something similar and thought it was something I should throw out there. Thanks!

Momodu Oladapo • Dec 31 '20

I added only the CSS to my Wordpress honeypot installation because I have a custom built form though contact form 7 but I had to build according to the client's spec.

And whenever I add the honeypot line; it shows up in the form; so this CSS really helped hide it.

I do hope this works from preventing the bots.

red-rego • Nov 5 '19

What if the bot checks for required field? in that case this would fail

Felippe Regazio • Nov 5 '19

thats true, and thats can be a good point to think about how to solve. i use this code in a lot of systems, and it works well for most of cases. but, with no doubt, it has a lot of lacks, as more complex bots would be able to submit the form. i like to think in it as an extra layer of security.

Will Sheppard • Nov 28 '19 • Edited

If you want to remove the "required" HTML keyword, you could use javascript to implement the feature instead.

Md A Zaman • Dec 30 '21 • Edited

I have implemented honeypot using this technique. Not a single bot could interact so far, great! But the problem is, my real human customers are also facing problem submitting form. Basically messenger web view and chrome are silently auto filling the honeypot fields. Is there any solution to this?