Joe Maller:JavaScript: Protect your email address

Your web site might be contributing in how much junk mail you receive, especially if you include an email address on your pages.

Spam-lists are generated by Spam-Crawlers and Spam-Bots. These computers only purpose is to constantly comb the web in search of email addresses to add to their lists. Thankfully they are in such a rush to keep up with the massive amount of web content that they ignore everything but the plain text of each site. Executing JavaScripts would be a waste of processor cycles, but that efficiency will help to protect our email.

A few years ago I had the idea to break and then reassemble my email address with JavaScript to help prevent spam. I built something, it worked and I forgot about it. Then last year, my friend Dale Sorenson told me of a similar solution he had written, he uses a picture of his email address and then JavaScript to build the link. Check his contact page to see his anti-spam solution.

This tutorial shows how to build a small, portable JavaScript to hide an email address to help reduce junk mail. I don't have any proof that it works, but the amount of junk mail I get has gone down since I started using this script on my site.

The Goods

For the impatient or those who don't care how this works, jump ahead to the final script.

The text address this script produces will appear to be plain text. From a design point of view, this will completely blend in with whatever other text you have on the page. Readers will never know it was generated by a script. Readers are free to change the font or size to their preference, and the address could be read aloud by a machine for the visually impaired.

Inserting Text with JavaScript

JavaScript's document.write() command is incredibly powerful. This function tells a user's browser to insert text or HTML into the page as it displays. That text can be used do just about anything without any visible distinction from the actual HTML or text saved on the server.

For example, document.write(), can build my email address into regular HTML text like this: Even though you can see the email address, it was rendered by your browser when the page was displayed and is therefore safe from Spam-Crawlers. I use this trick everywhere you see an email address on this page, in fact every time you see an email address on my site a little script put it there.

The code to write an email address into a web page looks like this:

<SCRIPT TYPE="text/javascript">
  document.write('joe@' + 'joemaller.com')
</SCRIPT>

The parentheses contain the two halves of my email address. These strings are assembled by the document.write() function and output into the page.

The TYPE="text/javascript" in the script tag is necessary to bring the source code up to standards. The script will work without it, but I like tory and be as standards-compliant as I can. The W3C is the international organization responsible for web standards, here is the definition of a legal Script tag.

Linking the address

The document.write() function can insert a whole link too. When combined with a variable, the whole script can be small, clean and easily moved.

First, we'll define a reusable variable emailE to store the email address in the same string format used earlier.

emailE=('yourname@' + 'emailserver.com')

As mentioned on my JavaScript Rollover page, variables are case sensitive, and CODEemailE is different from Emaile.

Next, we'll use document.write() to insert the link, combining strings with the variable we just stored to build a compact and protected email link.

document.write(
  '<A HREF="mailto:' + emailE + '">' 
  + emailE + '</a>'
)

Be careful with those single and double quote marks.

No JavaScript Means No Email

Since this script completely relies upon JavaScript, users without JavaScript or those who've disabled it will not see anything. Parts of Dale's image solution (mentioned above) can be made to work here using a <NOSCRIPT> tag. The following code will display an image when JavaScript is not avaialble. By using an image of your email address, or a message about needing JavaScript for email, your visitors will always see something.

To show an image:

<NOSCRIPT>
  <img src='email.gif' height="20" width="40">
</NOSCRIPT>

or a message:

<NOSCRIPT>
  <em>
    Email address protected by JavaScript.<BR>
    Please enable JavaScript to contact me.
  </em>
</NOSCRIPT>

* The <em> tag is a structral equivalent to the <i> tag that communicates meaning as well as style.

I do not currently include this code on any of my pages. More than 98% of my visitors have JavaScript turned on and of the remaining 2%, most all of them have browsers capable of JavaScript and have it disabled by choice.

Finishing up

Using the emailE variable to build and store the email address also allows us to shorten the final script and make it highly portable. If we needed to change the address, only one line needs to change.

<SCRIPT TYPE="text/javascript">
  emailE=('yourname@' + 'emailserver.com')	
  document.write(
    '<A href="mailto:' + emailE + '">' 
    + emailE + '</a>'
  )
</SCRIPT>

I wrote a small script to generate personalized source code. Type an email address to generate a personalized JavaScript email protection script:

One more thing for the paranoid

If you are still worried that the Spam-Crawlers might strip out the ' + ' and reassemble the email link, there is always something more you can do. I don't believe this is necessary, but I'm including it by request.

Variables can have information added to their existing contents, and that new content can even include the existing variable.

Replace the emailE= line in the above script with the two following lines:

emailE='yourname'
emailE=(emailE + '@' +' emailserver.com')

The first line is the email prefix, the second line tells JavaScript to add an at-mark and the email suffix.

If you wanted to reverse this, since you are REALLY paranoid, you can:

emailE='emailserver.com'
emailE=('yourname' + '@' + emailE)

Note that the second line was reversed to accommodate the change. The automated source code uses the super-paranoid option and reverses the email parts in the code.

Links to other Anti-Spam sites

• CAUCE, The Coalition Against Unsolicited Commercial Email
• JunkBusters
• Death To Spam
• Junk Mail, Spam and Telemarketer page by EcoFuture
• I Hate Spam.org
• Stop Spam FAQ

These are sites with similar JavaScript solutions:

Conclusions

It's not that much more typing than a normal link, and I'd gladly trade a few extra keystrokes now to avoid a ton of junk email later. I used to keep the text of this link in a little file on my desktop so I can quickly and easily access it whenever I need to. Since writing the script to build the code, I'm actually using my own page for the code.

If this was helpful or interesting to you, please link to this site so other people can share this information too. Send me a note and let me know what you thought of this page.

Joe Maller

January 2001 (revised May 2001)