Stop Spam Bots 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.
This script was designed to protect your website - to stop spammers by not allowing their robots to "see" your 'mailto:' link. You can easily hide your email address by using this script, since it will be stored off-page. On the webpage where the script is used, nothing is visible in the HTML, 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) To effectively hide your website address from robots, the script cannot be located on your webpage. Just follow the instructions on the main Snippets Page for how to install an off-page 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>
Caveat: 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.
See it in action: Notice the email link at the bottom of this page. Now right-click anywhere on this page, and select "View (Page) Source". Search the source code, until you find class="mailTo". Notice that the email address that you see on the page itself cannot be found anywhere in the source code.
Update ( Nov 19, 2009 ): As I was reviewing this page, I noticed that this mailTo script is not the latest version. In 2007, I revised the script so that it's possible to have more than one email link on a page. 'Class' is used instead of 'id'. If you would prefer using this new version, I will be glad to send you a copy.
[1] I highly recommend this excellent book by Jeremy Keith: DOM Scripting - Web Design with Javascript and the Document Object Model ( 2nd edition ) 
.
Comments
There are currently no comments to display.
Click here to add a comment
Rate this page:
About Me
Accessibility
Legal
Site Map
