Avoiding spam using mouseOver

All saavy website designers come across the problem sooner or later: how to make my email address easily accessible to the world, but not to the spam bots who creep through the internet looking for unsuspecting @ signs. Googling for an answer to the problem returns widespread cynicism. Many people have invested quite a lot of their time into making email addresses ‘bot-resistant, hoping that they won’t alienate their users  while at the same time keeping spam-free.

The problem is that you (as the website designer) are actually racing against other, intelligent people who invest more time and thought into harvesting email addresses than you’re prepared to put into protecting yours. Or more effort than your organisation is willing to put into it, in some cases (exhibit A: Newcastle University staff pages). Nearly every single blog post or website on this topic ends with a disclaimer similar to, “I don’t guarantee this will work, but it will fool most of the stupid bots”.

To add to the air of cynicism I came up with a solution that has been partially done before. My solution differs only in the display of the email address, because very often my preferred email client isn’t accessible through the mailto command. I prefer to copy and paste a textual link.

Several locations online taught me that spam bots are stupid, but getting smarter. Initially they were just spiders, like search engine spiders, who followed links looking for @ signs. Now they can look for @ signs, run JavaScript, decrypt simple encoding (like ASCII encoding), look for patterns that might replace the @ (like [at] or AT), pull text out of pictures, and so on.  I reasoned, perhaps incorrectly, that the only other thing you could check for would be human intervention. Hence, I decided to use onMouseOver.

A quick search didn’t come up with any programmatic way to activate onMouseOver, though I suppose a bot that followed every single JavaScript call could work it out somehow. I also use the innerHTML tag, which is apparently a no-no. The function works

function swap()
a = "&";
o = "6";
l = "4";
lo = "#";
b = "domain"
c = "com";
d = "my";
p = "self"
n = "my";
e = ".";
m = "me";
x = gimmeSomeBraces();
y = gimmeSomeOtherBraces();
z = more();
w = m+e+n+p +a+lo+o+l +d+e+b+e+c;
document.getElementById("email").innerHTML=x+ w + y+ w +z;
function gimmeSomeBraces()
return "<a href='mailto:";
function gimmeSomeOtherBraces()
return "'>";
function more()
return "</a>";

In the HTML, I assign an ID to a font tag and use onMouseOver to replace the text with JavaScript.

557C2B;" onMouseOver="swap()">Contact me

Since my work email address is already pretty spammy (and much of it is caught by the university servers before it gets to my inbox), I created a new email address at Yahoo! in order to test how effective this trick is. To view the script above in action, go try it out.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s