Fooling those e-mail harvesting spam bots

Introduction

My client in my latest project presented an odd request: he wanted his e-mail addresses written in clear text in his web site's contact information page. I tried to explain to him that he would be better off using an e-mail form and a captcha control to avoid all the spam, but even when he understood the ramifications of exposing his e-mail addresses, he insisted that his potential clients weren't likely to fill in any e-mail forms. They might have become comfortable with e-mail over the years he said, but adding a simple e-mail form was apparently pushing the limit.

Background

As the customer is (supposedly) always right, I started shopping around for answers and came across this CodeProject article on encoding of e-mail addresses. The idea there is that the bots aren't likely to recognize the e-mail address pattern hidden in the encoding, and certainly not sophisticated enough to crack the code.

I was going to try that out when it struck me that the solution could be a lot simpler: How about just using an image button that looks like an e-mail address?

I know, it is so simple that it is almost not worth an article. Or, maybe that is exactly why it is?

Using the Code

I shall not elaborate too much on the code, as I am sure most of you already understand what it is I am driving at. However, for those who need a little more help, here is what you can do:

1. Create a user control with a single image button.
2. Take a screenshot of the e-mail address that you want to display, and reference it from the image button. To be on the safe side, call the image and the button control something unrelated to e-mails.
3. In the OnClick event in the code-behind, make a reponse.redirect("mailto:someone@somewhere.com").
4. If you want to be really fancy, you could add a onmouseover/onmouseout image swap to make it look exactly like an e-mail link.

Points of Interest

One obvious drawback is, of course, that the next time you change the styles in your site, all your e-mail links will be out of touch.

Hence, a custom control that would expose a simple CSS class and e-mail name property could indeed draw the control image(s) on the fly.

Ideally, such a control would base the text drawing on the <a> tag specifications on the page, or in its associated CSS files if no other CSS class is specified, and draw the button images accordingly.

I admit (after Googling it) that this is not an entirely original idea (see here and here, for example). Still, I would think a control like this would be useful for most developers to have in their toolboxes. I for one could certainly imagine simply writing:

<cc1:EmailImage id="EmailImage1" runat="server" 
       cssclass="emailname" emailName="test@test.com"></cc1:EmailImage> 

the next time the clients want their e-mail addresses exposed.