tl;dr

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 (X)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”.

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:

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 effectively 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 other three until a wee 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:

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>:

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:

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!

Projects

About the site

Perishable Press is the work of Jeff Starr, professional developer, designer, author, and publisher with over 10 years of experience.
Check out some of Jeff's books and projects, follow on Twitter, or learn more »

Fun fact: Perishable Press has been online since 2005, and features over 800 articles and more than 11,000 comments. More stats »