How to Obfuscate Email Addresses

One of the most common things I see on so many websites that screams ‘bad practice’ and infuriates the hell out of me is email addresses without any form of Obfuscation.

Firstly I’d ask the question, does it have to be an email, as when it comes to providing a spam-free and easy way for people to contact you, nothing beats the convenience of a simple, web-based email form, so I’d always recommend using one instead of an email address if possible. Having said that, I’m all too aware that this is not always possible, so can appreciate those occasions when using an email address is the only option. However I’ve always considered it to be one of the default rules that when displaying an e-mail address on a website you obviously want to obfuscate it to avoid it getting harvested by spam-bots, but maybe a lot of web designers don’t think about this or at least don’t know how to go about creating email obfuscation.

If you fall into the latter category then don’t worry as it’s really not that hard, so to help anyone who doesn’t know how to hide an email address from those nasty spam-bots, I’m posting this handy guide.

Before I explain how I do it, I should mention that there is multiple ways of implementing email obfuscation on a website, but I’m only going to be describing my preferred method in this guide, which is to encode/decode using ROT13/JavaScript.

The ROT13-algorithm is an encoding method whereby all alphabetic characters are rotated by 13. Similarly, ROT5 is used to encrypt numeric digits, whereby every number is incremented or decremented by 5. This type of cipher is commonly used in Usenet/chat threads.

Using ROT13, I use this simple online tool, although you can also use PHP to encode an email address and then use JavaScript to decode it in the web page.

If we entered a test email address (test@testing.com) for demonstration purposes into the online tool, it would encode our example email address, and the output we would get is this:

grfg@grfgvat.pbz

We then include this ROT13-encoded address in the web page using this JavaScript:

<script>
document.write("<n uers=\"znvygb:grfg@grfgvat.pbz\" ery=\"absbyybj\">Fraq n zrffntr</n>".replace(/[a-zA-Z]/g,
function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));</script>

That little snippet of Javascript will then display the following markup on our page:

<a href="mailto:test@testing.com" rel="nofollow">Send a message</a>

..which will create an email link on the page for all of your visitors to use.

I’ve used this method on loads of websites where I’ve had to include an email address and I’ve never noticed an increase in spam being received once it’s live, so I feel fairly confident of it’s effectiveness in protecting email address from spam bots. Of course the one downside to this method is that it requires Javascript for it to work, so if that’s something that you have to work around then I’d suggest looking into an alternative methods or if all else fails you could resort to using an image to display your email address, but the accessibility and usability is pretty poor so I’d only recommend this method if you’ve exhausted all other options.

Hopefully this post will have helped to give a better understanding of how to hide email addresses from spam-bots, and while if you have the time, I’d always suggest using a web-based email form for contact pages, if you just need a way to simply include an email address, my suggested method for email obfuscation will hopefully do a great job at for keeping your publicly displayed emails spam-free.