Email Protection with JQuery

I’ve been using Prototype.js and script.aculo.us quite a bit on any sites I’ve done lately. I remember way back when Javascript and DHTML-goodies were a dark art, and getting that drop-down menu working just right was a huge relief. Well, these two tools have been a time-saver.

As it turns out, I couldn’t get one particular drop-down menu fade-in/out to work with Prototype/Script.aculo.us … so I decided to take a look at one of the other Javascript frameworks out there: jQuery. In no time, I had things working the way I wanted.

I got to thinking again (as I have before) about disguising email addresses on web pages, so that users can read and follow mailto: links easily, but evil robots can’t scrape your site and eventually spam you.

Using jQuery, this would appear to be pretty easy.

First, structure your links like so:

[cc lang="html4strict"]

[/cc]

Then, in the head of document, add the following javascript code:

[cc lang="html4strict"]



[/cc]

Basically, after the the page loads but before it renders, this function looks for all anchor tags of class=”email”. For each of them, it parses the rel attribute, replacing the slash with an at-sign. Then it changes the href to the correct mail link, and inserts the address inside the tag.

In my opinion, you’d need a fair bit of robot mojo to decode this.

One drawback is that it doesn’t degrade nicely for people without javascript … although I’m working on a possible solution (hint, read this old article for the inspiration).

Any thoughts?

4 Responses to Email Protection with JQuery

  1. Great code snippet on the first look. But in the end the bot must only replace the “/” in “me/example.com” and has your email adress…

  2. Simon, that’s true. But I think the fact that the address is not in the href attribute is a good obfuscation method.

    I don’t claim to know how bots work, but I’m thinking that they only try and parse the href attribute to find addresses. Someone would have to figure out what the JQuery code is actually doing, add rules to the bot to look for those scenarios, and then decode the links. It’s not hard, certainly, but are they (bot owners) really going to go through the trouble for a handful of sites? Plus, you could add your own obfuscation layers on top of this to make it even trickier.

  3. I id exactly like this to obfuscate a clients e-mail addresses but I reversed the string instead of replacing the at-sign with a slash.

    So far no spambot has harvest them.

  4. Good idea, St. John.

    Since writing this, I now put the email address into the href attribute as “/email/foo/example.com” and do pretty much the same parsing. I actually have a script to handle the link (for clients with JS disabled) which redirects to a Turing test.

    I like the idea of reversing the string or some kind strtr() function. Anything that JQuery/JS and PHP can both do would be a suitable encoding, I’d think.