Code Snippet: Stop Spambots from Grabbing your Email Address

In my ongoing quest for new techniques, I have recently been reading up on DOM scripting, which allows HTML coding to be dynamically inserted into a web page. This script is the first result of my efforts to learn this technique.

The snippet prevents the harvesting of a 'mailto:' link by spammer's robots. Nothing shows in the webpage where it is used, other than an empty <span> element. The email address of the link will not show up even when you "View Source".

 1 function mailTo()
 2 {  
 3  if (!document.getElementById("mailTo")) return false;
 4  var spanobj = document.getElementById("mailTo");
 5  var anch = document.createElement("a");
 6  var email = "recipient@website.com";
 7  var mailto = "mailto:" + email;
 8  anch.setAttribute("href",mailto);
 9  spanobj.appendChild(anch);
10  var txt = document.createTextNode(email);
11  anch.appendChild(txt);
12  return true;
13 }

Brief explanation:   Providing a tutorial on DOM scripting [1] is beyond the scope of this snippet. Just a few observations:

Line #3 prevents the script from trying to run if there is no tag in your HTML with an id = "mailTo", or if the browser is so old that it does not understand DOM methods.

Line #4 locates where you want to insert your link, and lines #5-#11 create the code and insert it into your webpage.


How to use the script:

1) If your email address is to be hidden from robots, the script cannot be located on your webpage. Just follow the instructions on the main Snippets Page for how to install a javascript function that runs at load time.

2) Put the following code in your webpage wherever you want the link to appear:

<span id="mailTo"></span>

Caveats:  This script does not degrade gracefully. If a user has javascript disabled, the link will not be visible or useable. This will not be a problem for the majority of users, since javascript is finally beginning to lose its undeserved bad reputation. In any case, the script is a definite improvement over the other scripts I have seen that leave the components of the email address right in the source code.

I would, however, strongly urge that you have another way for users to reach you, such as a "Contact Page". There are security issues with using forms as well, but that is the topic of another snippet.


Update (May 12, 2006):  Today in the Site Reference Newsletter, there was a feature article, Protect Your Email from Spambots, by Jody Hale, which provides a neat way to make the email link accessible to non-javascript users and text-readers. Jody uses a <noscript> tag containing a coded address. Using this along with the mailTo script looks like a winner to me if you need degradablility!


See it in action:  The first button below will take you to the Home Page of another of my websites, Professor's Opportunites. Notice the email link near the bottom of the page. Then "View Source", and you will see that the email address cannot be found anywhere in the source code.



[1] An excellent, up-to-date book on this subject by Jeremy Keith: DOM Scripting - Web Design with Javascript and the Document Object Model