Documentation: Hide an e-mail address from a spam bot

The Wordfence settings are too tight and I can’t add any HTML-code.

In words:

• Add the class email to the a-tag.
• Add the username part of the email address, encrypted with the JavaScript function <span class=”jscolor”>window.<span class=”jspropertycolor”>btoa</span>()</span>, to the id of the a-tag.

Very clever! Thank you.

Wouldn’t  a human be able to get the email address from the page source?

Ah okay, thanks, I understand now. That’s why Contact Forms were invented I guess. A well-made form does not display the receiving email address. That way, it not only protects against the spam bots, but even a human cannot read the address. This human could be head of an army of  a thousand spam bots…

Great thinking, Champi!

But I think Verhoeckx’s solution is better. Because it is way cleverer and more complicated.

If I were a spam bot reading your code, I would see  <span class=”st0″>”mail_link”>, which would trigger my attention.

Then I would see : <span class=””>data-server=</span><span class=”st0″>”bar”</span> , where  “bar” in reality would be “gmail” or similar, further arousing my interest.

The extension “.com” would remove my doubts.

Then, the jQuery would read like an open book for an educated spam bot like me 😉

Just my impression, an amateur designer thinking out loud. 🙂

Here is the ultimate improved code (indeed exactly the one we use in our agency to counter google bots and improve seo)

<span fusb="Zm9vQGJhci5jb20=">Send me an email</span>
The rest of my webpage here
<script>
    $("*[fusb]").click(function () {
        location.href="mailto:"+atob($(this).attr("fusb"));
    });
</script>

[anonymous] wrote:

Somewhere in the coming weeks I have to build a few forms. Can you tell me what honeypots are and how they work? A link to a website is also good.

First I’ll explain what is a honeypot. In a form you have a field which is invisible to the normal humans but visible to bots (and really attractive to complete). If this field is completed, then I don’t send the form. If it’s empty I send the form. You should not just block the send button or do nothing. You should do everything as if the message had been sent but send the message. If you use an “thank you page, you should redirect to this page (without sending) or if you just display a message to confirm that the message has been sent, just display it. The bot will think that the message has been sent but it will not really be sent 😉

I’m used to do forms in php but I think this ca easily be converted in js.

So here is an example of form with my honeypot :

<form method="post">
    <input id="login" name="login" type="checkbox" value="Y" tabindex="-1" autocomplete="false">
    <input type="text" name="name" value="" id="name"  required="">
    <input type="submit" value="Submit">
</form>

The honeypot field here is the login one.

I can just hide it in css for example (display none or visibility hidden or position absolute left -10000).

Then in php :

if (isset($_POST['login']) && $_POST['login'] == 'Y') {
    // Honeypot (here it's a redirection)
    $header = "Location: thankyou.html";
} else {
    // Code used to send the mail
}

In javascript (once again, jQuery, sorry guys ^^ but it’s so easier !) you can have the same effect like this (I haven’t tested this code, there might be some bugs but I think it’s easy to understand) :

$("form input[type='submit']").click(function (e) {
    var form = $(this).closest('form');
    var check = $("input[name='login']",form).val();
    if(check=='Y'){ // If honeypot is lit
        e.preventDefault(); // We don't send the form
        // Do something that looks as if the form was sent...
    } 
});

If someone click on a submit button, I simply check the honey field in this form and if the checkbox is checked, I don’t send the form. That’s easy and it should work as good as the php method.

The advantage of php in this situation is that the bot can inspect whatever it wants, the only one to know if it should send the form is the server. everything is decided server side. In js, it could maybe detect somehow if the form was sent or not. But I think it’s already a really good protection against spambots.

[anonymous] wrote:

One question however: I know that the code you gave is just an example but I think you have to leave out the code value=Y because otherwise the value Y is always send to the server. Instead, I think, you have to check if the value is not null?

Indeed you’re right. I did a little mistake. You can just check if the inout is or is not checked. You ca use a simple input too. just check the length of the value and if it’s not equal to zero, then prevent the form send.

Now the correct code :

$("form input[type='submit']").click(function (e) {
    var form = $(this).closest('form');
if ($("input[name='login']",form).is(':checked')) { // If honeypot is lit
        e.preventDefault(); // We don't send the form
        // Do something that looks as if the form was sent...
    } 
});