The purpose of this article is to show a new method of obfuscating an email address on a Web page. This method feeds a nonsensical email address to spambots, then uses CSS to remove the nonsensical characters so the email address is correct for human users. How will we accomplish this feat? We will include extra noisy characters in the email address text, which will confuse the spambots, and then use CSS to set those characters to display:none, so in effect they have been removed for human users. In the arms race to beat the spambots, using CSS might get us one step ahead of spambots in obfuscating email addresses. UPDATED 2006/08/29: Some code examples were not displaying correctly.

First, a disclaimer. The best method is to not add email addresses to Web pages as text. Use an image if you must display the email address. Also, using a form to submit emails is better than using mailto links, because by using a form you do not need to include the email address in HTML source code. I have never seen any proof that any type of obfuscation method works or does not work. Many people write articles about obfuscating email addresses with JavaScript, but I have never seen any proof that any obfuscation technique actually works to prevent email harvesting. No one has produced any test results or show to have done any testing at all. Normally, I test all my code. I do not know, however, where to download a spambot for testing. Therefore, I cannot claim that it will actually confuse a spambot and make the email address unreadable. Like most people who write articles about obfuscating email addresses from spambots, I too am assuming that spambots simply read HTML source code as text and then use regular expressions to search for mailto links and email addresses. I am assuming that spambots do not parse JavaScript and CSS. Many people claim that spambots do not interpret JavaScript. I have never seen any mention of CSS. But if I were to write a spambot, I would probably use Perl to download and search the HTML code of Web pages, and I would not include any special parsing for JavaScript or CSS. I do not know if spambots currently use CSS parsers but I have to assume that they don't, because they currently don't need to.

Overview

This method is to insert random characters and line breaks into the email address string, so as to obfuscate the email address. Then use CSS to hide the extra characters and line break. I insert this random string This email address is being protected from spam bots, you need Javascript enabled to view it at random places in my email address to confuse the spam bot. I make sure to include some characters designed to really throw off a spambot using regular expressions. I use an @ symbol, so there are false @ symbols. I also include the backslash \ character that could confuse a regular expression match. And, lastly, I include a false .com.

The Obfuscated Email Address Spambots See

To a spambot, my email address appears like this example below.

This email address is being protected from spam bots, you need Javascript enabled to view it @
This email address is being protected from spam bots, you need Javascript enabled to view it

And it gets even worse for the spambot (which means better for us). When viewing the HTML code in this example, the spambot sees this confusing string of HTML:

The Real Email Address Your Web Site Visitors See

But using CSS we hide the random characters and the line break, so to anyone (a person) who sees the email address on the Web page, it looks like this:

The CSS Used to Obfuscate the Email Address

Here is the CSS: