web analytics

Preventing Email Harvesting

August 3rd, 2006

An accessible method with MochiKit

When you include a href=”mailto:name@example.com” link on your page you are publishing a sure fire way of attracting spam. The usual way around this is to mangle the email address, the typical example being href=”mailto:name [at] example [dot] com”. Unfortunately this relies on your user being savvy enough to edit the email address after their email client takes the trouble to load up, a burden that is pretty impolite to lay at our users door.

I’m introducing a method to circumvent this here that isn’t original, wettone already has a version. It relies on a JavaScript transformation of the page, so that the source code doesn’t contain the email address, but the user can still see it. Where this method differs from wettones however, is that it is designed so that it does not affect (too much) the user’s ability to email you if they have JavaScript turned off (and also it doesn’t use document.write, which is illegal in xhtml). Please remember that this method is just a tat in the anti spam arms race, and that it’s only a matter of popularity before the spammers game this method.

The idea proceeds as follows (and requires that you are using MochiKit be installed):

  1. Remove all your mailto anchors and replace them with a span (or any other element) which has a class of email (the class can be configured if you like)
  2. Insert your email address into the span with all ‘@’ signs replaced with ‘ [at] ‘, and all ‘.’s replaced with ‘ [dot] ‘
  3. Now if the user doesn’t have JavaScript enabled, they will at least be able to read your email address… you can style the email class so that it appears e.g. bold
  4. Insert the following JavaScript function somewhere in your JavaScript files:
    emailAntiSpam(atString, dotString, containerClassName){
    if(!atString) atString = " [at] ";
    if(!dotString) dotString = " [dot] ";
    if(!containerClassName) containerClassName = "email";
    MochiKit.Base.map(
    function(emailContainer){
    var emailAddress = MochiKit.DOM.scrapeText(emailContainer);
    emailAddress = emailAddress.replace(atString, "@");
    emailAddress = emailAddress.replace(dotString, ".");
    MochiKit.DOM.replaceChildNodes(
    emailContainer, MochiKit.DOM.A({'href': 'mailto:'+emailAddress},
    emailAddress));
    },
    MochiKit.DOM.getElementsByTagAndClassName(null, containerClassName)
    );
    }
  5. Call the emailAntiSpam function in your page load function (in the simplest form this would be body.onload=emailAntiSpam, but there are much better methods I won’t get into here). All text within elements which have class email get a mailto anchor inserted.

Optional: you can change the class from the default of ‘email’, as well as the strings of text to replace with ‘@’ and ‘.’, by calling the function with the atString, dotString and containerClassName parameters specified. You can see this method at work on the qatano website. View the source and compare it with what you see on the page. I have used ‘ at ‘ and ‘ dot ‘ as the strings to be replaced with their symbolic equivalent.

Other Accessibility Considerations

I deliberately have left out the ability to specify your own text for the email link e.g. email us rather than noone@example.com. This is done to ensure that users can still copy and paste the email address from their web browser into, for example, a web based email system, such as Yahoo, as the operating system isn’t usually set up to handle mailto links in this way. Also it means that someone can read out your email address over the phone by looking at your website.

Another thing I have deliberately left out (or in this case deliberately not bothered finding out how to do!) is the ability to specify the subject line that should appear in the email. The reason for this omission is that it can completely fail in old browsers. Admittedly, really old browsers.