Email Address on your Website

Dec 2, 2016

Having a clickable link with your email address on your website is a very practical thing and should not be omitted. But there are robots searching the internet for this email addresses and they will also find your address. The most spam filters are very good but there are always some spam mails that come through and this is very annoying.

Solution?

I really don’t think it is a solution anymore but on many websites are email addresses in the form mail[AT]example.com. Maybe some really dumb robots don’t find these but if I would write a bot I would include email addresses like this in my search algorithm.

Better Solution

The better solution exploits the fact that these bots usually don’t execute javascript code. So using ajax to get the address from the server and populating the email link with it should stop many bots from finding the email address.

This is a very simple example that does not work on very old versions of the Internet Explorer and without any error handling. But it does the job.

1
2
3
4
5
6
7
8
9
10
var oReq = new XMLHttpRequest();
oReq.addEventListener('load', function() {
    if(this.status == 200) {
        var e = document.getElementById('email');
        e.href = 'mailto:' + this.responseText;
        e.innerText = this.responseText;
    }
});
oReq.open('get', 'email.txt');
oReq.send();

The HTML:

1
<a href="#" id="email"></a>

But again, if I would write an email address search robot I would try to find ajax requests and also look at the destinations of these.

Solution

To prevent this it would be possible to integrate some logic on the server that checks if the request for the email address really comes from the website. The second improvement would be to obfuscate the address email.php.

This could look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// create two random numbers between 0 and 100000
var a = Math.round(Math.random() * 100000);
var b = Math.round(Math.random() * 100000);
// create a XMLHttpRequest
var oReq = new XMLHttpRequest();
oReq.addEventListener('load', function() {
    if(this.status == 200) {
        var e = document.getElementById('email');
        e.href = 'mailto:' + this.responseText;
        e.innerText = this.responseText;
    }
});
// open the request to email.php
oReq.open('post', '-a-b-c-p-,-h-p-g-h-,-e-m-a-i-l-.-,-h-i-j-k-l-,-m-n-p-h-p'.split('-').join('').split(',')[2] + 'abc'.replace('abc','php'));
// this request header is needed to post data
oReq.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// send this numbers and the sum of the two to the server
oReq.send('a='+a+'&b='+b+'&c='+(a+b));

1
2
3
4
5
6
7
8
9
10
<?php
$a = $_POST["a"];
$b = $_POST["b"];
$c = $_POST["c"];
// The server checks if $c = $a + $b and outputs the email address only if that is the case
if($a + $b == $c && $c != 0) {
    echo 'mail@jonasjuffinger.com';
}
?>

No JS Workaround

If the user visiting the website has javascript deactivated he doesn’t see an email address, but for example in Austria it is mandatory to have an email address on the website. This can be done by inserting an image with the email address and hiding it when the email address is loaded with javascript.

By putting the image in the link it is automatically removed when it is overwritten by e.innerText = this.responseText;

1
<a href="#" id="email"><img src="images/email.png"></a>