Spam-Proof Email Links
Remember the good old days before the spambots, when a person could just use a mailto: link to post their email address and absolutely no ill effects would result?
The addresses weren’t even obfuscated. People would just click on the and, lo, a new mail message box would pop up, and you’d just type what you wanted to say and clicked ‘send’. Those were some good days.
We can bring back a little bit of that simpler time using MooTools and some advanced selector magic.
Introduction
Check out this article’s demo page. That’s my primary email address. Mouse over it. Click it. Tab on to it and then hit ‘enter’.
Ok, ok, I’m cheating. Turn off JavaScript and try again. The link actually says, ‘msteigerwalt-at-dotcomaftergmail’. It’s pretty annoyingly obfuscated. Honestly, if I were looking at that and in a hurry, I’d just give up. I don’t feel like solving a riddle.
Good news, though, is that spambots don’t like to solve riddles, either, and the only users to see the obfuscated link are those without JavaScript enabled. Three types of users fall into this group. Spambots, tech savvy people deliberately blocking scripts, and people using really old browsers.
The first group, spambots, will be foiled 100% by these links. The second group, tech savvy people, will probably be smart enough to recognize an obfuscated link. Unfortunately, the third group will be out of luck, but they’re a relatively small minority that we’re going to forget about right now.
Just keep in mind that this is an instructional project, not a practical project. You’ll have to weigh the pros and cons of this approach before implementing it into applications with real-world significance.
Setting Up Our Code
The first thing we need to do is somehow access all the mailto: links in our page. So what we’re going to do is create an onDomReady event with MooTools, like so.
window.addEvent('domready', function() {
//We'll put our code in here.
});
The domready event makes sure that all the Elements are actually loaded before our code runs. This is especially useful when we want to manipulate the elements on the page.
You could also put your JavaScript at the end of your page and omit domready entirely. Both options are valid and a matter of style.
Accessing Mail Links
There are several ways we could access all the mail links on the page. We could add a class to every link we want unobfuscated1, we could iterate through every link element, then do a search on the href to see if it matches the “mailto:” pattern, or we could use some advance selector magic.
I’m going to opt for the third method.
$$('a[href^=mailto:]');
That line of code will find every element with a tag name of “a” and an href attribute starting with “mailto:”. The ^= syntax is just a fancy way of saying “starts with”. If you know anything about regular expressions, you’ll recognize ^ as the character to signify the start of a line.
Constructing Our Regex
Alright, so we have all the links we need. All we need to do is unobfuscate2 them.
First, we’ll need to construct a regex to parse our obfuscated address. The one for the pattern shown above would look like this:
/(\w*)-at-dot(\w*)after(\w*)$/
Eeee, scary! Quick walkthrough for those of you not familiar with regular expressions.
- The / / on each end are just the beginning of the end of the expression.
- The $ at the end of the expression signifies that we’re looking for things at the end of a line.
- The ( ) signify bits of the string we want to extract.
- The \ inside the parenthesis mean that the next character is a symbolic representation.
- w is a symbolic representation of any word character (any letter or number or an underscore).
- The * after the w means ‘any number of the preceding character’.
We’re going to toss this regex into our JavaScript using the String method “match”. Notice that we’re not using quotes around the regex. In JavaScript, regular expressions are objects in their own right. We could put quotes around it if we wanted to, though. JavaScript is cool like that.
"msteigerwalt-at-dotcomaftergmail".match(/(\w*)-at-dot(\w*)after(\w*)$/);
If you were to run the above code in Firebug’s console,3 you’d get the following output:
["msteigerwalt-at-dotcomaftergmail", "msteigerwalt", "com", "gmail"]
Which is a JavaScript array. Remember that it’s a 0-based index, which means to access ‘msteigerwalt’ in the array, we’d call matches[1], not matches[2], even though it is the second element in the array.
Putting it All Together
If we place the following code inside our domready event, the links on the page will be unobfuscated when the page is loaded.
window.addEvent('domready', function() {
$$('a[href^=mailto:]').each(function(el) {
var link = el.get('href');
var matches = link.match(/(\w*)-at-dot(\w*)after(\w*)$/);
//Flip the data around and change the href of the element.
el.set('href', 'mailto:'+matches[1]+'@'+matches[3]+'.'+matches[2]);
});
});
And there you have it! Spam-proof links!