Friday, May 22, 2009

Hide your email address on websites from Spam Robots and Crawlers using JavaScript and DHTML

Plain text email addresses on your website is very easy to parse for spam robots. The standard syntax for email hyperlink in HTML is “mailto:youremail@domain.com” which is very vulnerable to attacks from spam robots hunting for email id’s on the internet. The best way to secure your email id is to print it dynamically using JavaScript.

I have implemented two techniques to print the email id dynamically. The first one is a simple JavaScript function which prints the email address when the page is loaded.

function printemail(emailid, domain) {
document.write("<a href=" + "mail" + "to:" + emailid + "@" + domain+ ">" + emailid + "@" + domain + "</a>" + ".")
}

This function can be used to print email address from the HTML page any number of times:

<script language="JavaScript">
printemail("youremail","gmail.com")
</script>

This method works fine but the flaw here is that the email address is always printed if the page is rendered by any kind of browser. So here comes my second technique, which is more robust because it prints the email address only when someone clicks on the email link. The trick here is to use DHTML functionalities combined with JavaScript onclick() method to dynamically change link url to point to the email address.

You can use inline scripting as follows for each email address on the page:

<a href="#" onclick="this.href='mailto:'+'youremail'+'@'+'domain'+'.com'">Email Me</a>

Or use a common function like this in a separate JavaScript file for different email addresses on the page:

function email(id) {
if (id == 'h'){ document.getElementById(id).href = "mailto:" + "youremail" + "@hotmail" + ".com"; }
if (id == 'g'){ document.getElementById(id).href = "mailto:" + "youremail" + "@gmail" + ".com"; }
if (id == 'y'){ document.getElementById(id).href = "mailto:" + "youremail" + "@yahoo" + ".com"; }
}

I wrote this function to accommodate different kind of email accounts in one function. You can modify this function to include as many email address as you want on the page. For extra precaution do not use your email address as the link title, instead use something like “Send Mail” or “Email Me” which is not recognized by the spam robots.

<a onclick="email('h')" id="h" href="#">Hotmail</a>
<a onclick="email('g')" id="g" href="#">Gmail</a>
<a onclick="email('y')" id="y" href="#">Yahoo</a>

When a visitor clicks on the email link, the link id is passed to the email() function which prints the appropriate email address depending upon the id specified. Every email link on the page should have a unique id. This way the spammers cannot gain access to your email address by using web crawlers.

Feel free to modify the above functions and protect your email address from spammers :)

1 comment:

  1. I like this approach. I will try this on my websites.


    On a separate note, how do you format code in blogspot. It is so freaking bad and removes all indentations!

    ReplyDelete

Thanks a lot for your valuable comments :)