Month: July 2006

If you haven’t already, I suggest you read the last article I wrote about separating your Javascript from your content. It will give you important background information needed to fully understand what I will be covering today.

Today, I’m going to show you how to embed your email address into any page of your site without fear that some bot will come along and steal it. This method is different from other ones because not only is it “backwards compatible” with older techniques, but it degrades gracefully and is straight forward to non-developers. This feature will work with all modern browsers, is human readable (no garbled text mixed in), and works when you click on it. Most importantly, it doesn’t require you to mark up your beautiful HTML.

Background

Some rogue email spammers use “bots” to automatically go through the internet and find email addresses. Once they find one, they add it to their spam list and you’re email becomes their newest indentured servant — forever. At first, people tried to trick the primitive bots by putting in spaces in their email address, such as in the following example:

some @ email . com

But bots learned to look for the @ symbol and then ignore spaces, so this quickly became obsolete.

So while some clever people think they are safe using address that look like:

some [at] email [dot] com

Or

some[nospam]@emailDOTcom

Or

someREMOVEME at email [period] com

The problem is that bots can be trained to look for these text patterns and get around them. After many programmers spent many hours mucking around with ASCII hashes and other futile measures, it became clear what the real problem was:

Bots can see and read anything a human can see and read!

The other problem is that adding in random words, brackets, and other symbols into your email address makes it very hard to read. This is very much unacceptable for people who are trying to run a business and can’t afford to have less savvy people send emails to salesREMOVE@[DONTSPAM]mybusiness.com.

I’m not going to tell you my idea is future proof. However, it’s been possible for many years now and I’ve never seen it. When and if this catches on, spammers may eventually start learning to get around it. But it won’t be easy. That’s because my method can vary wildly between implementations and can be used along side with any or all of the methods I showed above! More importantly, my method relies on the difference between bots and humans:

Humans click on stuff.

New Idea

The first and most important issue is that when a person clicks on your email link, it should let them email you. This is one of those things that has long since been lost as a readily available feature because so many people are afraid of getting spammed. Sure, maybe you can click on an email link, but you end up with something like the example below (click on it)

email me!

I’m sure you find that as annoying as I do. But what if we used Javascript to dynamically change what the href tag did? Well, the thinking-in-the-box idea would be to have this happen on the page load. That presents problems because some bots can run Javascript. The second idea is to change it if and only if someone clicks on the link. Now this makes sense. However, we reach the second problem: how do you store the email address somewhere on the page without the bot being able to see and read it?

How It Works

Primitive implementations used really ugly Javascript that would look something like this:

var myEmail = ‘so’ + ‘me’ + ‘@’ + ’email’;
myEmail += ‘.com’;

And then later on:

<a href=”#” onclick=”return ‘mailto:’ + myEmail”>email me</a>!

You can already see that this is violating the rule of mixing content with code. What happens if your email address changes? Do you really think your designer understands that ugly jumble of a mess? At the very end of the last article, I mentioned the possibility of parsing attributes and putting things together. Using the knowledge you gleamed from there, study the following and listen closely as you hear a lightbulb turn on. The objective is to have an email link to “some@email.com”:

<a href=”#email.com” class=”email-link” id=”some”>email me</a>!

This could have also looked like any of the following:

<a href=”@email.com” class=”email-link” id=”some”>email me</a>!
<a href=”#” class=”email-link” id=”email.com”>some</a>!
<a href=”#” class=”email-link” id=”some”>email.com</a>!
<a href=”#some@” class=”email-link” id=”email.com”>email me</a>!
<a href=”some” class=”email-link” id=”email/com”>email me</a>!

As you can see, there are many, many possibilities. And it is standards compliant and relatively straight forward (especially compared to those other solutions). Best of all, this will work in any browser that supports Javascript. Let’s focus on the first example and go over why I chose that format.

This way, if Javascript is broken, the worst thing that happens is the click does absolutely nothing. Remember, if you aren’t willing to have your email address break when Javascript is turned off then you have *no choice* but to use those HTML based tricks (that bots have already beaten). For 99.99% of the population, this is a pretty worthy sacrifice. However, for those of you who really can’t deal with that, I present you this compromise:

<a href=”#email.com” class=”email-link” id=”some”>some[REMOVE]@NOSPAMemail.com</a>!

This renders into this:

some[REMOVE]@NOSPAMemail.com!

Now if Javascript is disabled, nothing happens but your visitors can still figure out your email address! Although you’d have to pray bots can’t. Anyway, I hope you are starting to see the power of my solution.

Seeing the Address

If we can dynamically re-write the HREF portion of the URL, what’s to stop us from rewriting the innerHTML portion (the stuff between the a tags). Nothing! And this is easily possible. And this should happen during a mouseover so that people can easily read your address if they want.

The Code

Before I give you the demo, please observe the code fragment that summarizes the gist of how this works:

1. Look for all tags with the class “email-link”
2. For each one create a new onMouseOver that changes the text (innerHTML) into the email address
3. For each one create a new onClick that changes the link (href) into an email link

Now I know many of you are looking at my examples and yearning for the actual source code. Please keep in mind that the source code varies greatly depending on how you choose to obfuscate your email address. I’m also confident many of you read this and are now realizing you could dynamically search and replace the “[REMOVE]” and “NOSPAM” text. That said, here is the basic source code, using Prototype‘s getElementsByClassName function:

document.getElementsByClassName(className).each(function(element) {
var emailAddress = this.id + ‘@’ + this.href.split(‘#’).last();
element.onmouseover = function() {
this.innerHTML = emailAddress;
this.href = ‘mailto:’ + emailAddress;
};
})

Now I know some of you will complain about the each() function. As I stressed yesterday, the Prototype library provides shortcuts that make Javascript programming easier. The each method goes through an array, and for each one, passes it into a function as an argument. That function can be defined on the fly, which is what I am doing. Since the array being passed in is all the tags on the page that have “email-link” as its class, the function is then processing each link. The rest, I’m hoping makes a decent amount of sense. The part with emailAddress might be a little confusing, so I will break it down into its simplified equivalent:

var otherPart = this.href; // #mail.com
otherPart = otherPart.split(‘#’); // split it up by the # symbol
otherPart = otherPart.last(); // get the last match found
var emailAddress = this.id; // some
emailAddress = emailAddress + ‘@’; // some@
emailAddress = emailAddress + otherPart; // some@ + mail.com

Demo

If you are burning to see a demo, click here.

Parting Gift

I find that it is becoming difficult to explain my demos without giving you the real source. As such, I have written a Javascript class called CleanCSS. You may download it here.