How to Stop Spam Harvesting With Email Obfuscation

Share this article

The day I discovered the “mailto:” link was glorious. I could publish my address on a web page and anyone could email me with a single click. This was in the more innocent days of the web – before the spam harvesters took over. Use a “mailto:” today and your first viagra message will appear 30 seconds later. So how can you publish an email address without attracting unwanted attention from spammers?
The most obvious solution is to use a machine-unreadable email in your HTML, e.g. “bob (at) bobsdomain dot com”. Whilst this makes it difficult for spammers, it also makes it difficult for your users. Email harvest time Another option is to generate the email address using JavaScript, perhaps with a little string concatenation or encoding e.g.

<p>contact 
<script type="text/javascript">
document.write('<a href="mai'+"lto"+"bob"+'@'+'bobsdomain.com">bob@'+"bobsdomain.com</a>");
</script>
</p>
This will stop most spammers, but anyone with JavaScript disabled will not see your address. (I would not recommend using document.write either.) A better solution is to use a combination of techniques to thwart spammers without causing user difficulties. The first step is to use a human-readable but harvester-proof email address in our HTML. We will also make this a link to a contact page, e.g.

<p>Contact <a href="contact.html" class="email">bob (at) bobsdomain dot com</a></p>
Note that we have included a class of “email” so our link can be identified. The next step is to write a JavaScript function which searches your page for obfuscated emails and transforms them into real “mailto:” links. We will create a ’email.js’ file and include it in our HTML:

<script type="text/javascript" src="email.js"></script>
The required code is short, so we do not need a JavaScript library: Content of email.js:

function EmailUnobsfuscate() {
	
	// find all links in HTML
	var link = document.getElementsByTagName && document.getElementsByTagName("a");
	var email, e;
	
	// examine all links
	for (e = 0; link && e < link.length; e++) {
	
		// does the link have use a class named "email"
		if ((" "+link[e].className+" ").indexOf(" email ") >= 0) {
		
			// get the obfuscated email address
			email = link[e].firstChild.nodeValue.toLowerCase() || "";
			
			// transform into real email address
			email = email.replace(/dot/ig, ".");
			email = email.replace(/(at)/ig, "@");
			email = email.replace(/s/g, "");
			
			// is email valid?
			if (/^[^@]+@[a-z0-9]+([_.-]{0,1}[a-z0-9]+)*([.]{1}[a-z0-9]+)+$/.test(email)) {
			
				// change into a real mailto link
				link[e].href = "mailto:" + email;
				link[e].firstChild.nodeValue = email;
		
			}
		}
	}
}
An explanation of the code:
  1. Line 4 fetches every <a> link in our HTML page and line 8 loops through them.
  2. Line 11 checks the link for a class of “email”.
  3. Line 14 grabs the obfuscated email from the text content of the node.
  4. Lines 17 to 19 transform it to a real email address using regular expressions: “dot” is changed to a “.”, “(at)” is changed to “@”, and all spaces are removed.
  5. Line 22 checks the resulting email address is valid.
  6. Lines 25 and 26 then modify the DOM node and make it into a real “mailto:” link.
Finally, we need to ensure the function runs on page load by adding a line to the bottom of email.js:

window.onload = EmailUnobsfuscate;
The result:
  • Our original HTML page contains no “mailto:” links and cannot be easily harvested by spammers.
  • The majority of users (those with JavaScript enabled) will see a standard email address and “mailto:” link.
  • Anyone not running JavaScript will see the readable “bob (at) bobsdomain dot com” address.
This intention of this article is to show the concept rather than real code. Although the example works, I suggest you:
  • Use your own obfuscated email format, e.g. “bob {@} bobsdomain -dot- com”. Spammers can read this article and transform encoded emails just as easily as you!
  • Use a different link identifier class – “email” is a little obvious!
  • Use a JavaScript library, such as jQuery, to make the function shorter. You should also ensure it copes with whitespace or other DOM nodes around the email address text (not handled in the code above).
  • Replace the window.onload with a more robust event handler.
Best of luck.

Frequently Asked Questions about Email Obfuscation

What is the main purpose of email obfuscation?

Email obfuscation is primarily used to protect email addresses from being harvested by spammers. It involves disguising or encoding the email address in a way that makes it difficult for automated programs, known as bots, to recognize or collect it. However, it still remains readable and usable for human visitors. This technique is crucial for website owners who want to display their email addresses publicly but want to avoid receiving unsolicited emails.

How does email obfuscation work?

Email obfuscation works by encoding or disguising the email address in a way that is difficult for bots to decipher. This can be done in several ways, such as using character entities, JavaScript, or CSS tricks. For example, an email address like “info@example.com” can be obfuscated as “info(at)example(dot)com”. Despite the obfuscation, the email address remains functional and can be used normally by human visitors.

Is email obfuscation foolproof?

While email obfuscation can significantly reduce the amount of spam you receive, it is not completely foolproof. Sophisticated bots may still be able to decipher obfuscated email addresses. However, it does add an extra layer of protection and makes it more difficult for spammers to harvest your email address.

Does email obfuscation affect the user experience?

If done correctly, email obfuscation should not negatively impact the user experience. The obfuscated email address should still be readable and usable for human visitors. However, it’s important to ensure that the obfuscation method used does not interfere with the functionality of the email address.

Can email obfuscation be used with any email address?

Yes, email obfuscation can be used with any email address. It is a technique that is independent of the email provider or the domain of the email address. It can be used with personal, business, or institutional email addresses.

Is email obfuscation a one-time process?

Email obfuscation is not necessarily a one-time process. As spammers and their bots become more sophisticated, it may be necessary to update or change your obfuscation methods to ensure continued protection.

Can email obfuscation be used in conjunction with other spam prevention methods?

Yes, email obfuscation can and should be used in conjunction with other spam prevention methods for maximum protection. This can include techniques such as CAPTCHA, spam filters, and using contact forms instead of displaying email addresses publicly.

Does email obfuscation affect email deliverability?

No, email obfuscation does not affect email deliverability. The obfuscation only affects how the email address is displayed, not how it functions. Emails sent to an obfuscated email address will be delivered as normal.

Is email obfuscation necessary for all websites?

While not all websites may need email obfuscation, it is highly recommended for websites that display email addresses publicly. This includes business websites, blogs, forums, and any other website where email addresses need to be accessible to visitors.

How can I obfuscate my email address?

There are several methods to obfuscate your email address, including using character entities, JavaScript, or CSS tricks. There are also online tools and plugins available that can obfuscate your email address for you. The method you choose will depend on your specific needs and technical capabilities.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week