Cloaking Email Addresses on Your Web Pages

This document contains directions for cloaking, or obscuring e-mail addresses you publish on the World Wide Web. The obscured addresses remain usable by humans, but become invisible to the address harvesting robots used by spammers. This is a battle of technology. If enough people use this trick, the spammers will go to the trouble of defeating it. Until then, enjoy.

If you like this idea, but don't want to do the work yourself, there's a link to a generator tool at the bottom of this page. Skim this page first to understand what the tool does.

The Dilemma

You want to make your e-mail address available on your Web pages so that people who read your pages can get in touch with you. However, you also know that the U.S. Federal Trade Commission performed a study in the fall of 2002 that showed 86% of new e-mail addresses posted to Web pages began receiving spam within six weeks of being posted. The FTC recommends "masking" your e-mail address. Their example: change me@myisp.com to me@spamaway.myisp.com. This causes the spam e-mail to go astray, but it's not very friendly to your human correspondents. Better to make the address invisible to spammers' harvesting robots (also known as spambots) while being almost as useful to humans as a standard mailto: link.

(You can read a little about the FTC's experiment at http://www.ftc.gov/bcp/conline/pubs/alerts/spamalrt.htm.   The Center for Democracy and Technology conducted a similar study. Their thorough and thoughtful report is at http://www.cdt.org/speech/spam/030319spamreport.shtml.)

Using a Web Form

To keep spammers away, some people have begun using Web forms in their Contact Us areas instead of posting email addresses. Readers have to fill in the form to get in touch with the site's operators. There are a couple of problems with that. One is an unfortunate tendency to make form elements required. People don't like being forced to tell you things they aren't interested in including. Even worse is the idea of the Web form itself. People want to use their own email tools to contact others. Among other things, it lets them handle copies of sent mail in a uniform and familiar way. We at Blue Link Webs recommend against Web forms as a general-purpose contact method.

Making Your E-Mail Address Invisible

It would be better to put your email address on the Web, but make it invisible. Well, not exactly invisible, because that would defeat the purpose of putting the address on your Web page. What we need is a way to make your address invisible to robot address harvesters while remaining very visible to humans, like this: Image of an email address. Looks just like an e-mail address, huh? But it's not, it's a graphic image. It is eminently readable by most people. (We'll talk about users of adaptive technology in a minute.) It is also utterly opaque to any but the most sophisticated computer programs. A program that can decode such an image is simply too much trouble for spammers; there are easier pickings elsewhere. The harvester programs I've seen so far aren't sophisticated enough to crack this method by executing the JavaScript, either.

You can make a graphical image of text like the one above using just about any graphics editing program that'll let you type text into an image. Blue Link Webs also provides a tool that will create the image for you. There's a link below.

To make an image using your graphics program, start a new image with a transparent background. (If your graphics program won't give you a transparent background, use white or the background color of your page.) Make your image 15 pixels high and 500 or so pixels wide. Choose 15 point type in a face that matches your Web pages and turn anti-aliasing off. Turn underlining on and set the color to blue. I used #0000CC as the color in the example; it's a little darker than the regular blue of a link.) Now type your e-mail address.

You will probably need to adjust the position of the typed text on the "canvas," and most graphics programs let you do that with the pointer tool. Move the text until the underline touches the bottom of the canvas and the left edge of the typing almost touches the left edge of the canvas. Now use the "cropping tool" to cut off any excess canvas on the right. The typing should nearly touch the right edge when you're done. Your graphic will be 15 pixels high; make a note of how wide it is after cropping. Save your image as a .gif or .png file and upload it to your server. (I named my file bob-brown-bluelinkwebs-com.png, which I hope will be easy to remember.)

Using Your Graphical Address in HTML

You can embed your graphical e-mail address in HTML documents using the <img...> tag. There are two special considerations. First, the bottom of your image will be aligned with the baseline of the type on the page. You really want it a little lower than that so the baseline of the type in the graphic (and not the underlining) lines up with the baseline of the text on the page. We will use an HTML <span> to lower the graphic by two pixels.

Second, your graphical e-mail address is opaque to spammers' harvesting programs, but it's also opaque to people using text-to-speech adaptive technology. We'll fix that with the alt= attribute of the <img...> tag in a way that doesn't help spammers.

Here is the HTML I use to put my graphical e-mail address on Web pages:

<span style="position: relative; top: 2px; left: 0px;">
<img src="bob-brown-bluelinkwebs-com.png" 
alt="Bob dot Brown at Blue Link Webs dot com"
title="Bob dot Brown at Blue Link Webs dot com"  
border="0" height="15" width="210" />
</span>

I've broken the lines to make it easy to see what's going on; normally this would all flow together. The position: property of the style attribute on the <span> tag drops the image down two pixels and makes a zero left-to-right adjustment. The alt= attribute on the <img...> is written so that a text-to-speech device will speak it in the same way I would speak my e-mail address if I were giving it to someone verbally. As with the image, it would be too hard for a spammer to write something that decodes this. (Don't put extraneous punctuation within the alt= tag; it will likely be read by a text-to-speech device.)

Change the width= attribute (it's in bold above) to the width of your own graphic. If you don't know, leave width= out entirely.

Making Your Graphical Address Clickable

So far, so good, but Web users are accustomed to being able to click on e-mail addresses to originate mail. Clicking on the address above does nothing. You could wrap a mailto: link around the image and clicking would function as expected, but your address would be exposed to spammers again, ruining all our hard work.

Instead, we will use a trick suggested to us by Andrew Langmead. (Thanks, Andrew!) A little snippet of JavaScript is used to turn an empty link (or an ordinary Web page link) into a mailto: link at the instant it is clicked. Downloading the HTML will reveal nothing to a robot. Only clicking the link works. (The function name is deliberately a bit obscure, too.)

Put the following bit of code in the <head> of your HTML document. Just before the </head> tag is a good place:

<script type="text/javascript">
<!--
//<![CDATA[
// Copyright 2006 by Bob Brown and BlueLinkWebs.com. 
// Licensed under the Creative Commons Attribution License.
// Some rights reserved.
function gemaddr(node, domain, local) {
  var a = String.fromCharCode(64);
  var mt = String.fromCharCode(109,97,105,108,116,111,58);
  node.href = mt + local + a + domain;
  return true;
}
//]]>
//-->
</script>

The lines that look like modem noise prevent the script from being seen by browsers that don't support JavaScript and by XML parsers. We're going to call this script with your e-mail address, but broken into two parts, local and domain, and without the at-sign. The script puts "mailto:" in front of your address and an at-sign in the middle, then changes the href= on the link we're going to create into a mailto:-type link, but not until the instant it's clicked. The String.fromCharCode calls? They're a constant at-sign and the mailto: string needed to from an email address link.

Here is the HTML from the earlier example, with the link and JavaScript call added. The new code is bold. Be careful not to overlook the </a> at the end.

<a href="need_js.html" 
   onclick="gemaddr(this, 'bluelinkwebs.com', 'Bob.Brown')">
<span style="position: relative; top: 2px; left: 0px;">
<img src="bbrown_spsu.gif" 
alt="Bob dot Brown at Blue Link Webs dot com"
title="Bob dot Brown at Blue Link Webs dot com"  
border="0" height="15" width="114" />
</span></a>

To prevent insertion of bogus spaces, this should all flow together on one long line. If you have to break it up, put the line breaks between the attributes of the <img...> tag.

The href= part of the anchor tag is a link to a page which explains that JavaScript is required to make the link work. The onclick= attribute calls the JavaScript function "gemaddr" and passes a reference to this link ('this'), the part of the e-mail address that comes before the at-sign, and separately the part that comes after the at-sign. The function name was chosen not to contain the string "email." The function will put it all together and change the nature of the link. Voilá!

Clicking on the link will do one of two things. If JavaScript is enabled, it becomes a mailto: link; otherwise, it loads the page need_js.html. You can look at an example here: need_js.html and use it as a basis to write your own.

If you are also doing server-side programming, you can give people who do not run JavaScript a much friendlier response than just a message to enable JavaScript. Instead of making the href part of the link point to need_js.html, point it to a server-side form for sending email, something like, <a href="mailform.php?local=Bob.Brown&domain=bluelinkwebs.com">. (If it's all one domain, leave the domain part out of the link to further frustrate spammers.) This is not as good as a clickable link because it doesn't use the reader's email program, but it's better than nothing. You could even include the information from need_js.html to give readers a choice of using the form or enabling JavaScript.

If you have comments on this Web development note, I'd like to hear from you. You can write to me at: Bob dot Brown at Blue Link Webs dot com. (See... it works!)

Now that you understand the technique, you may want to try it on your own Web pages. We've written some software to make that easier. It creates the graphic file and generates appropriate JavaScript and HTML for you to cut-and-paste into your Web documents. You can find it here: http://BlueLinkWebs.com/devnotes/cloak_email/.

This Web technique is presented by BlueLinkWebs.com. If you think it's pretty neat, consider hiring us to help you. In any case, this technique is yours to use under the Creative Commons Attribution 3.0 United States License. Enjoy!


The code presented on this page is licensed under the Creative Commons Attribution 3.0 United States License. You are free to copy the work for commercial and non-commercial use, including use for profit. Each copy of the work must carry this notice: "Copyright 2006 by Bob Brown and BlueLinkWebs.com. Licensed under the Creative Commons Attribution 3.0 United States License. Some rights reserved." This notice may be placed as a comment in code, and need not appear on the displayed Web page.

Creative Commons license logo