E-mail hiding

An e-mail addres on your website

An inherent feature of the web is hyperlinks. They are just everywhere, even outside the internet. A link to an e-mail address is just one of many things you can do with a hyperlink. Another inherent feature of the web is that everyone can access it. Even people with malicious goals.

So what's the problem? My e-mail address isn't a secret...
An e-mail address is certainly not a secret, but you only want to give it to people you know they don't go and send you unwanted e-mail, or in other words, spam. The known fact is that malicious people use techniques known as e-mail harvesting. This is software that downloads each and every page on a website and seeks out e-mail addresses. The refinedness of these applications varies from flavour to flavour. So we need to try and overcome their refinedness, but how?

Our goal

What if you want to make a link to an e-mail address on a website? Easily done, but with all the spam in todays e-mail boxes, we'd really love it if e-mail harvesters were unable to read that e-mail address. And yet, we don't want to trouble our visitors.

Harvesters are very refined these days, they can, among other things:

Seek out hyperlinks with "mailto" links in them.
Pattern-search for strings with an @ and a domain name in them.
They ignore anything in stylesheets you try to do to hide anything.
They ignore javascript whereever it's convenient for them.
Harvesters may be able to parse obfuscated e-mail addresses, where the @ and ".com" parts have been replaced.
Some even execute onclick event handlers using the javascript engine from Internet Explorer.
Some even do a automated copy-paste with Internet Explorer.
Some may even go as far as OCR'ing any e-mail addresses in pictures.

So what do we do about this?

Common methods

Many people try to "hide" their e-mail address, using as much different methods as there are people using them. The most commonly used ones are:

Generate a picture out of an email address. A harvester is unable to read this for sure, but the visitors have to manually type the address in their e-mail client when sending a mail to that address. Why? Because making the picture clickable would cancel out its goal alltogether.
Obfuscate an e-mail address. An e-mail address would get a weird getup, like this: john_doe_AT_example_DOT_com. Most people understand its meaning, and it allows slightly more for copy-pasting into an e-mail client. But it's still inconvenient to the visitor.
Decode in onclick. This is actually close to what I want to demonstrate. The idea is that an e-mail address is made clickable, but it must still look like the address hereabove. In the onclick event handler, the javascript decodes some weird string to an e-mail address, and "executes" it. It's convenient to the user, but you still can't actually show an e-mail address in text, because a harvestor would pick it up. On top of that, harvesters may actually execute an onclick event handler, so that it would still get the e-mail address.

A viable solution

An e-mail address usually appears in two places when a hyperlink is made to it:

In the href-attribute of the link.
Oftenly also in the text node (that is, between the <a> and the </a>).

The concept

We encode the e-mail address on the server, and feed that into the href-attribute. As e-mail harvesters probably don't work with a mouse, we can decode the e-mail address whenever the visitor moves the mouse over the link.
We make sure the text node becomes unrecognizable as an e-mail address by adding extra junk, but we can fix it in CSS.

The href-attribute
Encoding the link can easily be done with a simple technique known as ROT13. Instead of this:
<a href="mailto:johndoe@example.com">
We encode it with ROT13, so that it looks like this:
<a href="znvygb:wbuaqbr@rknzcyr.pbz">

For serverside scripting languages, a ROT13 function is easily made or may even already exist (such as in PHP). The code below can be used in both javascript, and in another language, as serverside code. You can also statically put encoded e-mail addresses in your pages, using this handy ROT13 coder. Don't forget the "mailto" part!

The ideal would be that the href attribute is only decoded when the visitor moves his mouse cursor over the hyperlink. This cancels out harvesters, because they would get the encoded URL, while a real visitor gets the correct, decoded URL. The hyperlink looks as follows by now:
<a href="znvygb:wbuaqbr@rknzcyr.pbz" onmouseover="unrot13(this);">...</a>

The script belonging to this functionality is as follows:
function rot13(input) { var coding = "ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMabcdefghijklmnopqrstuvwxyzabcdefghijklm"; for (var text = '', i = 0; i < input.length; i++) { var ch = input.charAt(i), pos = coding.indexOf(ch); if (pos > -1) ch = coding.charAt(pos + 13); text += ch; } return text; } function unrot13(link) { if (link.href.indexOf("mailto:") != 0) link.href = rot13(link.href); }

The text node
The text node cannot be changed in the onmouseover event handler, because it needs to be decoded without any mouse actions. You could do it in the onload event handler, but that means the addresses aren't decoded until the page has been loaded in its entirety. On top of that, e-mail harvesters may also execute the onload event. What we can do, is to split the two parts of an e-mail address and surround them by tags. Because tags do nothing on their own, it renders no different from without the tags:
johndoe@example.com
This is great, but I mentioned before that e-mail harvesters may do some copy-pasting of their own, and for that, this trick would be pretty useless. Nevertheless, for lazy harvesters that only do a pattern search, this is pretty waterproof. Anyhow, we want to tackle a worst-case scenario. So, to overcome harvesters that do copy-pasting, but ignore CSS because they think the CSS may hide something, we provide them with the opposite effect:
johndoe@SPAMexample.com
The "SPAM" part will not be rendered, but some e-mail harvesters may pick it up when they ignore CSS. But we can go even further. There's a CSS-feature that allows to force the bidi-mode. When using a left-to-right language, such as English, you can make the e-mail address right-to-left and reverse it yourself. The browser will render it right-to-left, which looks reversed in a left-to-right language. So, this is what it'll look like:
moc.ynapmoc SPAM @eodnhoj

Summing it up
All this work should result in a hyperlink that looks much like this:
<a href="znvygb:wbuaqbr@rknzcyr.pbz" onmouseover="unrot13(this);"> moc.ynapmoc SPAM @eodnhoj </a>
Of course, this only works with the javascript hereabove.

Disadvantages

The obvious disadvantages of this technique must be that the visitor's browser must be a normal, modern one. When javascript is disabled, the links are useless. Without CSS, the visitor will find junk in the address and it displays reversed. Also, copy-pasting is no longer possible, because when pasting, the visitor will paste the address backwards.

Another problem is with mobile devices. They are just not going to be able to handle all this. Browsers for visually impaired people will also not be able to make sense of these hyperlinks, just like browsers in text-mode (such as Lynx).

But keep in mind that this is a small price to pay for providing e-mail harvesters with zero results.

This article

This article was inspired on the original article at the website of my good friend Randy Simons (Dutch).

You may copy the contents of this article in your own words on your own website. You can deeplink to this article from any website freely.