Effective method to hide email from spam bots

Question

On my homepage, I'm using this method to hide my email from spam bots:

<a href="admin [at] example.com"
   rel="nofollow"
   onclick="this.href='mailto:' + 'admin' + '@' + 'example.com'">Contact me</a>

What do you think about it? Is it effective? What other methods do you know or use?

Answer 1

I think the only foolproof method you can have is creating a Contact Me page that is a form that submits to a script that sends to your email address. That way, your address is never exposed to the public at all. This may be undesirable for some reason, but I think it's a pretty good solution. It often irks me when I'm forced to copy/paste someone's email address from their site to my mail client and send them a message; I'd rather do it right through a form on their site. Also, this approach allows you to have anonymous comments sent to you, etc. Just be sure to protect your form using some kind of anti-bot scheme, such as a captcha. There are plenty of them discussed here on SO.

Answer 2

Spambots won't interpret this, because it is a lesser-known method :)

First, define the css:

email:before {
    content: "admin";
}

email:after {
    content: "@example.com";
}

Now, wherever you want to display your email, simply insert the following HTML:

<div id="email"></div>

And tada!

Answer 3

I just have to provide an another answer. I just came up with something fun to play with.

I found out that in many common character tables, the letters @ and a-z reappear more than once. You can map the original characters to the new mappings and make it harder for spam bots to figure out what the e-mail is.

If you loop through the string, and get the character code of a letter, then add 65248 to it and build a html entity based on the number, you come up with a human readable e-mail address.

var str = '[e-mail]';
str = str.toLowerCase().replace(/[\.@a-z]/gi, function(match, position, str){
    var num = str.charCodeAt(position);
    return ('&#' + (num + 65248) + ';');
});

Here is a working fiddle: http://jsfiddle.net/EhtSC/8/

You can improve this approach by creating a more complete set of mappings between characters that look the same. But if you copy/paste the e-mail to notepad, for example, you get a lot of boxes.

To overcome some of the user experience issues, I created the e-mail as link. When you click it, it remaps the characters back to their originals.

To improve this, you can create more complex character mappings if you like. If you can find several characters that can be used for example in the place of 'a' why not randomly mapping to those.

Probably not the most secure approach ever but I really had fun playing around with it :D

Answer 4

I have a completely different take on this. I use MailHide for this.

MailHide is a system from Google whereby the user needs to complete a reCAPTCHA test to then reveal the email to them.

Answer 5

Working with content and attr in CSS:

.cryptedmail:after {
  content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); 
}

<a href="#" class="cryptedmail"
   data-name="info"
   data-domain="example"
   data-tld="org"
   onclick="window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld; return false;"></a>

When javascript is disabled, just the click event will not work, email is still displayed.

Another interesting approach (at least without a click event) would be to make use of the right-to-left mark to override the writing direction. more about this: https://en.wikipedia.org/wiki/Right-to-left_mark

Answer 6

One easy solution is to use HTML entities instead of actual characters. For example, the "[e-mail]" will be converted into :

<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#109;&#101;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;">email me</A>