Protect you e-mail address from Spammers

May 5, 2006

Do you have your e-mail posted to a website? Do you hate the time it takes to separate all the Spam e-mails from legitimate E-mails?

I began to wonder about ways you could make your e-mail address more secure or virtually hidden from those e-mail address-gathering robots without making it difficult for legitimate visitors.

Using JavaScript to hide the address.

Since the search engines and these address-gathering robots cannot read the JS display, this is a great way to hide your address while displaying it to your customers.

Here are two of the most popular ways of using JS to display an address.

JS #1, Scrambled address,

With this script you would place it in your page wherever you want your e-mail address displayed. Since the address is scrambled inside the JS, robots cannot read it yet the display is an auto e-mail link displaying the address to the customer.

HTML looks like this:

JS #2, Simple script;

This requires the JS to be stored as a js file and then call for it to be displayed. This script is handy since the address information is stored on a single page and you then call for it to be displayed by placing the following wherever you want the address displayed. Works like CSS in that you only have to make changes to a single page to update your address across several pages or an entire site.

The js page (I called this one e-mail.js):

document.write('Direct your comments and questions to our <a href="mailto:webmaster@yourdomain.com">Webmaster</a>');

The HTML placed in the page where you want the address displayed:

The big draw back to using JavaScript to display your address is that any visitor to your site that has JavaScript disabled or is using a text reader will not see or hear your address. Robots and text readers cannot read the JavaScript display

The normal and recommended action would be to place your address inside a <noscript></noscript> tag and placing this at the end of the JS. This then makes your address available to the robots.

HTML for scrambled script:

HTML for simple script:

Both scripts would display like this: (I have bolded what would be an auto e-mail tag)

(With JS) Direct your comments and questions to our Webmaster.

(Without JS) Direct your comments and questions to our webmaster@yourdomain.com

The draw back to adding the noscript, this exposes your address to the spammers’ robots.

Using CSS to hide the address:

The use of the following CSS hides the address but you cannot use the auto e-mail tag or copy/paste. The visitor must enter the address manually.

The CSS code for hiding your e-mail address:

.reverse {unicode-bidi:bidi-override; direction:rtl;}

To use this you would simply write your e-mail address backwards and then enclose it in a span tag.

<p>Direct your comments and questions to our <span class="reverse">moc.niamodruoy@retsambew</span></p>

This hides the address from the robots and will display as follows,

Direct your comments and questions to our webmaster@yourdomain.com

This CSS styling, although successful has drawbacks as well:
You cannot use the auto e-mail tag, as this would expose your address.
The visitor would have to enter the address manually, as copy and paste would have the address backwards.

Combining JavaScript with the CSS.

I used the regular JavaScript and the CSS styling in the <noscript> tag. I also added a line to the <noscript> with instructions for the visitor:

The HTML for scrambled address:

The HTML for simple script;

The final outcome for these two styles:

(With JS) Direct your comments and questions to our Webmaster.

(Without JS) Direct your comments and questions to our webmaster@yourdomain.com

Please manually enter our e-mail address.

While realizing that these techniques were still not completely friendly to people that use text readers and a little inconvenient with the inability to copy and paste. I started testing different codes and have come up with a working solution that disguises the address from robots, displays the address, can be read by a text reader, displays with CSS disabled and allows the visitor to copy and paste.

HTML for this;

Direct your comments and questions to webmaster<code>@</code>yourdomain.com
<br />Just copy and paste the e-mail address.

The display:

Direct your comments and questions to webmaster@yourdomain.com
Just copy and paste the e-mail address.

Testing the success of hiding e-mail address from robots using these techniques

For testing purposes I placed one e-mail address for each of the 4 techniques on the contact page and on a page containing only the 4 e-mail addresses on several websites. I then linked to this page from the home pages and the contact pages.

I then ran this page at www.willmaster.com/possibilities/demo/RetrieveEmails.cgi

The results - "No email addresses were found. If any unfound email addresses exist they are hidden in a manner not addressed by this script."

The CSS style does validate and the HTML as shown validates with W3C at XHTML 1.1

Considering all the advantages to making your e-mail address hidden and secure. Factoring in accessibility and convenience I would suggest the use of the simple JavaScript and the use of the<code>@</code>technique.

<p><script type="text/javascript" src="e-mail.js"></script>
<noscript><p>Direct your comments and questions to our webmaster<code>@</code>yourdomain.com<br />Just copy and paste our e-mail address.</p></noscript>
</p>

As of the writing of this article I have received no Spam through the test e-mail addresses using these techniques.

I will be posting periodic "Spam Received" updates over the next few months.

Update #1 July 5, 2006 - 90 days, no spam received.

Update #2 October 5, 2006 - 6 months, no spam received.

Update #3 January 7, 2007 - 9 months, no spam received.

Update #4 April 5, 2007 - 1 year, no spam received.

Back to Safety Articles List