Email hiding — how to stop spammers finding your email address

The problem

One of the most common ways for spammers to get hold of your email address is to harvest it from your web site. They use email-harvesting software to surf the web and look for addresses. These are then collected and sold on to other spammers.

It's a Catch-22. If you don't put your email address on your web site, it will be harder for people to email you. But if you do, it will be easy for spammers to harvest your address.

There is a partial solution. You can obfuscate your address by replacing @ and . with [at] and [dot] or similar. The result looks something like this:

<a href="mailto:me[at]example[dot]com">me[at]example[dot]com</a>

Unfortunately this means that while clicking on the link will open a new email message, it requires the user to edit the address to remove the [at] and [dot] so the email will work. Not everyone is au fait with this process, so they may just give up — or worse, not notice the problem and then wonder why you never replied to their email.

So is there a better solution?

My solution

I have a JavaScript file called makelink.js which is loaded when you browse my site. It looks like this:

function makelink( name, domain, desc, pre, post ) {
    if ( pre != null && pre != "" )
        document.write( pre );
    document.write( '<a href="mailto:' );
    document.write( name + '&#64;' );
    document.write( domain + '">' );
    if ( desc != null && desc != "" )
        document.write( desc )
        document.write( name + '&#64;' + domain );
    document.write( '</a>' );
    if ( post != null && post != "" )
        document.write( post );

The parameters are as follows:

The username part of the email, which comes before the @ symbol.
The part of the email which comes after the @ symbol.
The description for the link. This is the clickable part. If this is not specified, then the email address will be shown.
Optional text to appear before the clickable link.
Optional text to appear after the clickable link.

All you need to do is call the makelink function from within your web page, and the link will appear. The last three parameters are optional so you can omit them if you simply want your email address to appear. To cater for users who don't have JavaScript, I tend to write the ‘pre’ and ‘post’ parameters in such a way that users without JavaScript don't see sentences with missing words. You could combine this with a <noscript> tag as well.

Some examples

This code:

<script type="text/javascript">
makelink( "stephen", "wettone.com" )

produces this output:

And this code:

<script type="text/javascript">
makelink( "stephen", "wettone.com", "email me", "<p>Please ", ".</p>" )

produces this:

I hope you found this article useful. There are more articles like this in the code section of my site.