Protect your email address from spam

I have only just started putting content on my website. Some of the content includes my contact details such as my cell phone number and email address. I was, however, a little nervous about putting my email address on my web pages. Why? Email harvesters. An email harvester is a program or a script that basically scours the web collecting email addresses from unsuspecting web pages. No prizes for guessing what these email addresses are used for: spam. I receive enough junk email in my other email accounts. The last thing I want, or need, is yet more spam.

What I needed was a solution that would allow people to send me email while at the same time hiding my email address from harvesters. This article discusses a solution to this problem and is in fact the solution that I use on this website.

Harvester of Sorrow

Email harvesters are the reason you see some email addresses displayed on web pages as “me AT mydomain DOT com”. This may defeat simple email harvesters but it would be trivial to modify a harvester to strip out the AT’s and DOT’s. I don’t like this solution as it makes it more difficult to read. Users should not have to be experts in obfuscation in order to send me an email! Other solutions involve using an image that displays the email address. This is probably the safest means of disguising your email address but it is a pain to maintain. Every time you change your email address, you have to create another image.

My solution involves using javascript to write out the email address into the web page dynamically. The advantage of using javascript is that it is only run on the client side, e.g. in the browser. This means that the email address never has to appear directly in the HTML of the document. Try it! If you click on the email address at the bottom of this page you will be able to send me an email, but if you view the page source the email link doesn’t appear anywhere in the HTML. The javascript looks like this:

address.js


var el = "joe";
var e2 = "@example";
var e3 = ".com";

function printEmailAddress() {
  document.write("<a href=\"mailto:");
  document.write(e1 + e2 + e3);
  document.write("\">");
  document.write(e1 + e2 + e3);
  // close the tag
  document.write("</a>");
}

I decided to put the javascript in a separate file and include it in each page as this allows me to re-use the same function across a number of different pages. The example below shows you how you can display your email address on a web page using the javascript defined above:

example.html


<html>
<head>
<script type="text/javascript" src="address.js"></script> 
</head>
<body>
<script language="javascript">
   // print the email address here
   printEmailAddress();
</script>
</body>
</html>

All you have to do is call the function at the point in the page where you want the email address to appear. The javascript will take care of the rest.

Conclusion

This solution should be adequate to prevent email harvesters from extracting your email address from your web pages. It may, of course, be only a temporary solution. Spam is big business so perhaps spammers will eventually incorporate javascript checking into their email harvesters. However, there are an infinite number of ways of incorporating your email address into javascript, I just happened to use 3 separate variables for this example. There are so many ways in fact, that even if spammers did start checking javascript it would make it infinitely more difficult to extract an email address from a web page.

The only drawback I have come across so far is that I am unable to modify the style of the link using the default CSS file. Presumably this is because the browser applies the styling to the page before the javascript adds the link. If you have any thoughts on how to solve this problem, please send me an email.