DesignGeek 06: Tips for Hiding E-Mail Addresses on Web Pages

******************************
*** DesignGeek ***
******************************
Tips and techniques for the digital designer

In this issue:
--Hiding Your E-Mail Address on Web Pages,
or, the CURSE OF THE LIVING SPAMBOTS

Issue 6, 9/2/03
Written by Anne-Marie "HerGeekness" Concepcion

© 2003 Seneca Design & Training, Inc.

--------------------------------
Keeping Under the Spambots Radar:
How to Hide Your E-Mail Address on Your Web Pages

If you're a professional web designer and/or have your own site, you already know the dangers of including e-mail addresses in web pages. If you're not, you may already know anyway: e-mail addresses on web pages are like sitting ducks for e-mail spammers.

(Want to see if you're a sitting duck? Go to http://www.google.com and type your e-mail address in the Search field. I had 3 pages worth of hits on my address, some dating from 1996! But I knew that... thus the motivation for this article...)

The spammers, or the companies that sell spammers their lists, have search engine-like "spiders" (automated indexing programs) called "spambots" that crawl the Web looking for an e-mail pattern (name@name.com) in web page body copy or within links in the underlying HTML code. When they find a match, they add it to their database of valid e-mail addresses. And thus we get spam offering to sell us 3 Million E-Mail Addresses on a CD for $19.99.

So an unprotected e-mail address that looks like this in a browser:
Contact me at amarie@senecadesign.com
...or like this in the page's source code (assuming it's linked):
Contact me <a href="mailto:amarie@senecadesign.com">via e-mail</a>.
...is easily picked up by the spambots.

So what are you supposed to do if you (or your client) want to include a "Contact Us" e-mail link on a web site, but you don't want the address to get captured by a spammer?

---
Disguising the Text
---

One tactic is to disguise the e-mail address by disrupting the pattern the spambots are searching for in the body text. For example:
Contact me at amarie [at] senecadesign [dot] com.
... you often see this method in Newsgroup postings, which spambots also trawl.

The problem is that it looks weird, and it'll confuse newbie users. They might even try to literally type that into their e-mail program's To: field, brackets and all. Do not underestimate the sweet innocence of newbies! (My Dad -- online for 3 years -- just called me from his car to tell me he's going to the mall to buy a CD burner, what model should he get. I gave him a couple names and said to make sure and tell the salesperson the make/model of his computer. He says, all confused, "It attaches to the computer?" True story.)

Another alternative for web page e-mail addresses is to make a .gif or .jpeg out of the address, which spambots can't read (they're not so advanced that they have eyeballs ... or MAYBE ONE'S LOOKING AT YOU RIGHT NOW ... heh heh). All the spambots would see would be the name of the image file in your source code, like "myaddress.gif" and they'd pass it right by.

That's what a lot of Domain Name Registrars -- Verisign for one -- are doing, to prevent spambots from crawling their databases of registered domain names. To access a domain name's registration record at Verisign you have to type in a serial number that's contained in a .gif image, and their software generates a new .gif every time you want to check a record. Pretty neat.

However, if you make either the disguised or .giffed e-mail addresses into a "mailto:" link (so when users click it, their e-mail programs automatically open with the e-mail address in the To: field), the spambots will not be fooled! Don't forget, they index the underlying HTML code as well, and "mailto:amarie@senecadesign.com" is the only way to make that kind of link. Same thing goes for HTML forms, since one of those form fields has to contain the recipient (the e-mail address) of the formdata when the Submit button is clicked. In other words, you've got an e-mail address in your source code, even if it's in a "hidden" form field.

---
Disguising the HTML Source
---

If you really need a mailto: link, you need to disguise the address in the HTML code as well. Here are two solutions:

1. Danjo Creations' (an ISP in Canada) Tool
<http://herniche.com/tools/hidden_email_address.htm>

Scroll down on this page and you'll see a field where you can enter your e-mail address in a form. Press the Tab key and the Results field will automatically populate with JavaScript code you can cut and paste into your source code.

Here's how it converted my address:

<SCRIPT type="text/javascript" language="javascript">

</SCRIPT>


When this code is viewed in a browser, you see my e-mail address spelled out as usual: amarie@senecadesign.com. It's also linked (it appears blue with an underline), and indeed it works; when clicked, the default e-mail program opens up and puts my e-mail address in the To: field. But since the pattern "name@name" never occurs in the code, spambots can't see it.

2. University of Bristol's tool
<http://www.bris.ac.uk/is/services/computers/nwservices/mail/hidden-mailto.html>

Like Danjo Creations, this page offers a form where you type in your e-mail address and it generates the code for you to cut and paste into your source code. Unlike Danjo's, it converts every character of the e-mail address into its Hexadecimal equivalent.

Here's how the UB's tool converted my address:
<a href = "mailto:%61%6D%61%72%69%65%40%73%65%6E%65%63%61%64%65%73%69%67%6E%2E
%63%6F%6D">amarie@sene
cadesign.com</a>

I noticed that this hexadecimal version of the trick has the added advantage of correctly previewing in my web authoring program. The pure JavaScript method (#1) didn't preview, but it worked when viewed in the browser.

Good luck on stomping out your sitting ducks! I'll be working on mine for the next few weeks...

--AM

*^*^*^*^*^*^*^*^*^*^*^*^*^*^*
GET WITH THE PROGRAM

When she's not wading through spam, Anne-Marie is often on-site helping design and production teams get control, once and for all, over the software that once controlled them.

You can fully master OS X, Photoshop, InDesign, QuarkXPress, GoLive and the rest of the designer's toolbox in far less time than you think! Just call in HerGeekness for an enjoyable session or two of targeted, designer-to-designer training in the program of your choice -- starting at the level you're at, going to the level you want to attain.

Anne-Marie provides authorized training at your workplace for groups of one to ten or more, in Chicago and throughout the country. All clients receive three years of 24/7 follow-up support by phone or e-mail, too!

Detailed information including pricing, student pix and fan mail are here:
http://www.senecadesign.com/training/
... or call her directly at 312-946-1100 to talk about your training needs and how amazing it is that both the Cubs and the Sox are contending to win their division!
*^*^*^*^*^*^*^*^*^*^*^*^*^*^*

|| top ||

--------------------------------
DesignGeek is a free bimonthly publication written by Anne-Marie "HerGeekness" Concepcion, authorized Adobe and Quark training provider and cross-media designer. She owns Seneca Design & Training, Inc. in Chicago, Illinois.

To subscribe to DesignGeek or read archived issues, go to its home on Seneca's site: http://www.senecadesign.com/designgeek/subscribe.html.

To unsubscribe, follow the link at the bottom of this page.

Contact Seneca by phone at 312-946-1100 or email at info@senecadesign.com

Copyright 2003 by Seneca Design & Training, Inc.
Please forward without cutting. Please contact Seneca for reprint permissions. We don't guarantee accuracy of articles. Company or product names mentioned in DesignGeek may be registered trademarks, we use the names in an editorial fashion with no intention of infringement.
--------------------------------