Rule number one when it comes to preventing spam: Don’t put a your email address in a mailto: link.

To fight the evil Legion of Spammers, web designers and programmers have come up with some creative solutions. Let’s take a quick look at the more common workarounds and the drawbacks (minor as they may be).

name [at-no-spam] website.com

Problem: a link would be more convenient than typing in the address and some
will mistype.

Contact forms

Problem: you run the risk of having a spammer use your account to send their
mass emails (unless you use a really secure formmail script) and it’s overkill for situations
where you want visitors to just send a simple message.

Javascript encryption

Problem: your email is still sitting out in the open even if you use sophisticated
encryption to mask it. And who wants to run off to a third party website and run a dozen email addresses through an encryption algorithm one at a time? Not me.

Hiding behind a simple form

(For an example, see Simon Willison’s site and the button that reads ‘Reveal my Address’ near the top of the page.)

Problem: None that I can think of… but let’s see if we can improve on the
concept.

A Possible Solution: AJAX

The solution I propose will have a few advantages over some of the workarounds that we webdesigners currently use:

  • Easy to implement
  • Easy to change
  • A little razzle-dazzle in the presentation
  • No need to use a third party tool to encrypt an email address
  • No email addresses sitting out in the open

By the last point I suggest that email encryption devices rely on obfuscation to hide the email address and assume that spammers aren’t smart enough or determined enough to reverse engineer the code and then go about collecting any emails they find on the web that are encrypted using the same method. In practice, I think that email encryption is relatively safe but the fact remains that the email is sitting in the html source code.

The Concept

  1. Use jQuery to grab html content from a file on the server
  2. The file containing the email addresses is mostly html (mailto links) with a simple protection mechanism thrown in for good measure

The Demos

I’m going to start with an example that shows the email addresses when the visitor clicks a button or link and move towards an example where the email addresses appear on the page almost instantaneously.

On button click - instant

On link click - fade in

On page load - fade in

On page load - instant

(*Note: by instant, I mean to say “no fancy effects… show the email addresses as fast as possible.)

The Code

This is released under a non-commercial creative commons license. Contact me if you want to use the code in a commercial product. I’m currently using it in a new CMS for web designers that I’m launching soon.

Get the code here (link to be added later)

Why Is This Safer Than A Regular Mailto Link?

The real problem with mailto links is that spammers can use automated software that searches the web to find them in the source code of your html. They most likely find you the same way Google does: by following links.

They’re lazy just like the rest of us. Therefore it’s unlikely that they’re surfing the web with a legal pad next to their keyboard, scribbling down lists of email addresses to spam.

View the source code of any of the demos and you will see that the email addresses are not in the html.

Is this a rock solid way to absolutely guarantee that you will never get spam and only receive pleasant emails from friendly web visitors… no.

But removing the email address from the source code, changing the secret phrase in the jQuery code, and changing the filename of the target file will probably give you a fair compromise between convenience for your visitors and security for your email address.

One Final Note

Take a close look at the code for the first three examples and you’ll see that I use the AJAX callback function to trigger the slideDown() and show() effects.

In other words, I don’t want jQuery starting the slideDown() effect until the information (html) has been received from the AJAX call. Posting the secret phrase to our simple server side script and then receiving the information back takes time.

Right way:

$(document).ready(function(){
$.post('mailtoInfo.php',{
  pass: "secret"
},function(txt){
  $('div.email').html(txt);
  $('div.email').slideDown("slow");
});
});

Wrong way:

$(document).ready(function(){
$.post('mailtoInfo.php',{
  pass: "secret"
},function(txt){
  $('div.email').html(txt);
});
 $('div.email').slideDown("slow");
});

[tags]jQuery, mailto, spam, AJAX[/tags]