Industrial-Strength Spamless Email Links

♦ Posted by Jeff Starr in HTML, JavaScript, Security

Updated July 17, 2018 • 2 comments

In our previous article on creating spamless email links via JavaScript, the presented method, although relatively simple to implement, is not the most effective solution available. Spambots, email harvesters, and other online scumbags relentlessly advance their scanning technology, perpetually rendering obsolete yesterday’s methods.

tl;dr

Just want the code? Jump to the demo »

Overview

In the case of spamless email links created client-side via JavaScript, many spambots now are able to decipher certain email addresses hidden within the JavaScript code itself. Spambots scan JavaScript for keywords such as “email” or “mail”, or even character strings containing “.com” or the “@” symbol. Spambots collect and decipher such data and return the favor with a flood of email spam.

Fortunately, the flexibility of JavaScript enables us to encode our email links as simply or as convoluted as needed. Indeed, our first post on spam-free email links focused on simplicity at the expense of long-term effectiveness, with multiple email addresses requiring multiple instances of the JavaScript function.

In this article we present a technique which obfuscates all email data within the JavaScript itself, making it virtually impossible for current technology to extract accurately any email addresses contained therein. This is a more durable, industrial-strength method for protecting your inbox from the spammers. Although slightly more complicated, this method accommodates multiple email addresses within a single, robust JavaScript function. So, without further ado..

Step 1: The HTML

The first step is easy: add the following code to the <body> of your document and change both instances of the letter “f” to the first letter of the email address which you intend to use. For example, if your email address is john@domain.tld, change both letter f’s to the letter “j”.

<a id="xmail" onmouseover="xmail('f');" onfocus="xmail('f');" href="http://domain.tld/non-javascript/contact.html">
	Contact via Email
</a>

The previous code creates the email link with an id of xmail, which is the hook our function will use to recognize the link as the target element. Here, we are using two different triggering mechanisms, onmouseover and onfocus. This serves as an insurance policy if a client fails to support either function. xmail() is the name of our function, while the letter “f” is a variable representing the first letter of the email address to be used.

If JavaScript is not available on the user’s browser, the link will simply direct the user to the URL indicated in the href="..." attribute of the anchor. If you have an alternate contact page, with an inline contact form or something, remember to edit the href value to match the correct address. Don’t worry if you do not have an alternate contact page, we will deal with that later in the article.

With the email link in place, we will now link to the external JavaScript file. Place the following code into the <head> of your document and edit the path accordingly:

<script src="http://domain.tld/js/javascript.js" type="text/javascript"></script>

Well, that should be fairly self-explanatory. Now let’s move on to the JavaScript..

Step 2: The JavaScript

Create a JavaScript document, xmail.js, and copy & paste the following code:

function xmail(name) {
	var obj = document.getElementById('xmail');
	if (obj) {
		switch(name) {
			case 'f': name += 'irst';   break;
			case 's': name += 'econd';  break;
			case 't': name += 'third';  break;
			case 'f': name += 'fourth'; break;
		}
		var domain = new Array('com','.','pre','able','ish','per').reverse().toString();
		domain = domain.replace(/\,/g,'').replace(/(pre)/g,'$1ss');
		obj.href = 'mailto:' + name + '@' + domain + '?subject=Hello';
	}
	return true;
}

In this code, the first line presents the function as xmail, which operates on a variable called name. The second line creates a variable called obj, which targets the previously created email link via the specified id="xmail" attribute.

The third line checks whether or not the document contains the target link. If it does, then the function continues with a switch command, which will scan through the list of variable cases and select the one that is specified via the target link. Here, four cases are specified, with each one indicating a different email address. Each case statement declares the prefix of an email address. In our example, the initial email address is first@perishablepress.com, and so the prefix is “first”, which is split into two parts within the statement. For now, we will be using only the first case, so ignore the others until a bit later.

The next three lines serve to completely obfuscate the address suffix. Here, the suffix is perishablepress.com, which is chopped into pieces and presented in reverse order. Further, the string “press” is further dismantled and split into the next line. The third line simply connects the dots and writes the link information to the href attribute of the target element. And, finally, the last line instructs the browser to follow the link to the alternate contact page, if provided.

Step 3: Customization

Explanations are fine, but we still need to configure the function to suit our specific needs. In the first case statement, replace the letter “f” with the first letter of your email address, and then replace the letters “irst” with the remaining letters of your email address.

Okay, here is the tricky part. Examine the suffix of your email address (e.g., domain.tld), and divide it into five pieces, with one piece consisting of the tld. For example, we would divide “domain.tld” into these five pieces: d, o, m, ain, tld. Next, divide the fourth piece, “ain”, into two additional pieces, “a” and “in”. Now, go to the line beginning with var domain = new and emulate the following changes:

var domain = new Array('tld','.','a','m','o','d').reverse().toString();

Then, in the next line (beginning with domain = domain.replace), replace “pre” with “a”, and also replace “$1ss” with “$1in”. For a single email address, we are finished at this point. Double check your work and check for proper functionality. The link should function seamlessly, as if you had hard-coded the email link directly in the document itself. To configure multiple email addresses, continue reading with the next section.

Step 4: Multiple email addresses

Once you have properly configured the script for one email address, adding additional email addresses is very easy. Although the script currently supports multiple email addresses from the same domain only (e.g., suzy@domain.tld, sam@domain.tld, etc.), it would be relatively straightforward to extrapolate the function to support multiple addresses from different domains. For each additional email address that you wish to add, simply create a link within the document <body>:

<a id="xmail" onmouseover="xmail('n');" onfocus="xmail('n');" href="http://domain.tld/non-javascript/contact.html">
	Contact via Email 2
</a>

For each link, replace the letter “n” with the first letter of the email address you wish to use. Then, add a corresponding case statement for each address to the JavaScript function itself:

.
.
.
switch(name) {
	case 'f': name += 'irst';   break;
	case 's': name += 'econd';  break;
	case 't': name += 'third';  break;
	case 'f': name += 'fourth'; break;
}
.
.
.

Replace the letters in each line to those corresponding to your additional email addresses and double-check that everything matches up as it should. If everything has been configured correctly, you should now enjoy a durable set of spam-proof email links. Cheers!

Step 5: Support for non-JavaScript-enabled browsers

As promised, we will now discuss options for those sad souls who surf without JavaScript support. The first and optimal option would be to provide an alternate contact page with an inline contact form or other method of contact. Another option would be to include a set of <noscript> tags, enabling you to provide a text-image of your email address when JavaScript is not available. If you simply could care less about non-JavaScript support, the least you would want to do is replace the URL in the link with a # pound sign, or better yet, an actual link to somewhere else on your site.

Alternate method for multiple email addresses

If you are calling the xmail() function multiple times on the same page, you can make a small change to make it work. Basically we modify the function to use classes instead of ids:

function xmail(name) {
	var obj = document.getElementsByClassName('xmail');
	var i;
	for (i = 0; i < obj.length; i++) {
		if (obj[i]) {
			switch(name) {
				case 'f': name += 'irst';   break;
				case 's': name += 'econd';  break;
				case 't': name += 'third';  break;
				case 'f': name += 'fourth'; break;
			}
			var domain = new Array('com','.','pre','able','ish','per').reverse().toString();
			domain = domain.replace(/\,/g,'').replace(/(pre)/g,'$1ss');
			obj.href = 'mailto:' + name + '@' + domain + '?subject=Hello';
		}
	}
	return true;
}

So now instead of looking for xmail in id attributes, the function looks for xmail in class attributes. So it works when called multiple times on the same page. Thanks to Brian Mayer for the modification!

Live Demo

Here is a working demonstration of the xmail function.

Thanks for reading — God bless!

About the Author

Jeff Starr = Creative thinker. Passionate about free and open Web.