Spam-bots scan the web and harvest email addresses from web pages, news groups, and other sources. This article shows you a simple technique you can use in web pages to avoid spam-bots. The idea is used in the FotoVision sample I created, but I thought it would be useful to discuss this particular piece outside of the FotoVision sample. The idea is pretty simple; instead of storing the real email address in the HTML, an encoded version of the address is stored and decoded on the client when necessary.
Step 1. Encode the email address
First, the email address needs to be encoded. The encoded string can be pre-calculated or dynamically calculated on the server. The following function uses the
BitConverter class to encode the email address email@example.com to the string
string EncodeEmailAddress(string email)
Function EncodeEmailAddress(ByVal email As String) As String
Return BitConverter.ToString( _
Step 2. Use the encoded email in the HTML
Instead of using the real email address in the HTML link, use the encoded value. For example:
I considered using HTML encoding for the email address, but I think spam-bots would be more likely to process the value and using a custom encoding algorithm is a better solution.
Step 3. Decode the email address on the client
The client-side function
sendEmail is called on the client; this function decodes the email address and displays the email application. The
sendEmail function contains the following:
location.href = "mailto:" + decodeEmail(encodedEmail);
var email = "";
for (i=0; i < encodedEmail.length;)
var letter = "";
letter = encodedEmail.charAt(i) + encodedEmail.charAt(i+1)
email += String.fromCharCode(parseInt(letter,16));
i += 2;
That's it, now firstname.lastname@example.org will not be picked up by spam-bots since the text never appears in the HTML, but the email link still works like expected (the email program is displayed with the correct address when clicked).
Step 4. Optionally, update the status area
You can extend the link by handling the
mouseout events to display the email address in the status area. The updated HTML link looks like the following:
And two functions are added to the client-side script:
window.status = "mailto:" + decodeEmail(encodedEmail);
window.status = "";
Now, the real email address is displayed in the status area when the mouse is moved over the link.
Sample code and encoding web page
There are two files in the sample code. The file email.js contains the client-side script functions that you can include in your HTML pages. The file test.html is a sample HTML page that uses the email.js file.
The encoded email address can be dynamically calculated on the server, but that's not necessary, you can also pre-calculate the encoded email and use that value in the HTML. I created an encoding web page that encodes an email address that you can paste into your HTML code. If your site contains a lot of email links, it would be easy to create a control that takes in an email address and emits HTML that contains the encoded link.