Disguising Email Addresses On A Web Page

By Andrew Westcott

Home Page Amateur Radio Concert Master Coxparo Gin Traps Grimspound Rust Electrolysis National Explosives Solar Hot Water Wistmans Wood Doddi Mines Rants Dog Walker Zombies! JS Email Telephone Intercom Whetstone Mining

 The Problem 

Firstly, I'm assuming that you have some knowledge of html code and CSS, and write the code for your web pages yourself rather than letting some software do it badly for you. If not, why not?

When building web pages, there's a chance you may wish to include an e-mail address somewhere as a point of contact. Unfortunately there are bots roaming the Internet designed to harvest useful data such as e-mail addresses and phone numbers, along with any other tasty snippets which may come in useful or be sold to unscrupulous marketing companies. It won't be very long before any useful data has been harvested, from which point your inbox will begin to fill with unwanted messages, possibly rendering it unusable after a time.

 A Solution 

One very effective remedy to the harvesting problem is to break up the components of your e-mail address into unrecognisable portions, and use JavaScript to re-assemble those bits in the correct order, to make it viewable and clickable in the final rendered version of your web page, but invisible to harvester bots.

This approach is pretty old, and an internet search will probably pull up hundreds of slightly different ways of doing this. Some methods are too simple and may be solved by modern bots, and others are perhaps unnecessarily complicated. Here I'll describe the method I use which gives excellent protection whilst being reasonably simple.

 Declaring Some Variables 

Let's get one thing straight: I don't like JavaScript; It's not so much a problem with the code, more to do with the way it gets abused in the writing of web pages. One site I examined consisted of 2 images, 3 paragraphs of text and a navigation bar. The JavaScript alone on that page amounted to an unbelievable 240Kb of code, apparently doing very little. It had obviously been auto-generated by some software, but it was a heck of a mess, and it took many seconds to fully load the page.

Anyway, moving on.
I'm not a JavaScript programmer, but I know enough about it to be able to put together a snippet of code to do what I want, and here's how I did it:

We need to take our e-mail address and break it up into pieces which individually cannot be harvested as a meaningful e-mail link. By way of example, here is the fake e-mail address joeblogs@nomail.com broken down into 4 bits:
 
    joe
    blogs
    @
    nomail.com
 

The first concept to understand is that a letter, X for example, can be assigned a numeric value, say 5. In code, the X would be considered the 'variable', and the value assigned to it would be the 'value' hence in this case X = 5.

In JavaScript, a variable can be assigned either a numeric value, or a 'string' of characters, such as words. The name of the variable can be 'X' or pretty much anything else, as long as it begins with a letter.

To start building our code, we need to declare some variables containing those bits of e-mail address. The 'var' in the code indicates a variable is being declared, and the m1, m2, m3 & m4 are the names I've chosen to give to those 4 variables. The text string (the value) is in double quotes, and each line of code must end in a semicolon, it's the law! The names given to the variables can be anything you like, as long as they begin with a letter, and isn't one of the few reserved JavaScript words. So once done, your browser will know that m2 (for example) equals the text string blogs.

It's worth a mention that I'm suggesting 'var' here, rather than the more modern 'let' and 'const' to ensure that any pre-2015 browsers will recognise the code. Maybe in a few years it can be dispensed with, but not just yet.

Any bit of JavaScript must be enclosed in opening <script type="text/javascript"> and closing </script> tags, as you'll see in each of the following examples. Incidentally, if your doctype declaration is for HTM5, you can use simply <script> for the opening tag.

In the example above, you can see the 4 variables, and the text string assigned to each one. Depending who you talk to, putting all the variables on one line may be more efficient, as all variables are processed at once. The image below is of the 4 variables being declared on one line if that's what you wish to do:

Note that the var statement is only written at the start of the line, each declaration is separated by a coma, and the end of the line is indicated by the semicolon as always required. Other than the slight syntax change, the declaration of variables is the same.

The more astute amongst you may have noticed that the variables aren't being declared in order, but are jumbled around a bit. This is optional, but I've done it to ensure that the e-mail address doesn't exist in a linear manner, where stripping out code could reveal the true address. There's no way a bot could get that information in this case.

Now we have the declaration of variables sorted out, we can place that bit of code safely out of the way within the html  <head> </head>  tags. When the browser loads the page, those variables will be declared, held in memory and can then be called unlimited times within the web page code.

 Reassembling The Email Address 

Here's where the code appears to get a little more complicated, but I'll explain everything. The image below shows the JavaScript code for reassembling the variables declared earlier plus some text strings, which together produce the final e-mail link. This code is placed at the location you wish the clickable e-mail link to appear, and as often as you wish.

The code has been enclosed within  <p> </p>  tags to enable styling using a class definer of your choice, and consists of a mixture of our previously declared variables, plus some other parts we didn't need to assign variables to, for example the entire  <a href="mailto:  string was left as-is. A spam bot won't get anything from that, apart from the digital equivalent of a headache.

Variables are just added in the code as they are, but each text string must be defined by being put in single or double quotes, and while either is acceptable, care must be taken to stick to just one or the other. As a double quote appears in the first and second text strings, single quotes have been used in this case to avoid breaking the code.

As a point of interest, the closing  </a>  tag may be picked up by the W3C html validator as an error. If you wish to get around this minor issue, the bits of problematic code can be broken down too, as in the snippet below.

So in a nutshell, the code writes the  <a href="mailto:  part and adds the text contained in the variables we declared earlier along with a couple of other text strings. If you examine it carefully, you'll see how it all logically comes together when the page is rendered: a nice, clickable e-mail address:
<a href="mailto:joeblogs@nomail.com">joeblogs@nomail.com</a>

Lastly we have the  <noscript>  tag. It is good practice to provide an alternative to JavaScript in the event that the end user has disabled JavaScript in his browser, as this way he will at least see something. I make the assumption that these days, if JavaScript is disabled, it's been done on purpose by a web-savvy person so nothing more than a quick alert is necessary.

Back to top

 

---

I can be contacted at this address:

Copyright © Andrew Westcott 2003 - 2024
I'm happy for anyone to use this material for private, non-commercial or educational purposes, but credit to the author must be given. For any other use please contact me for permission.