Web Design with SiteSpinner
Hide Your Email Addresses
This page details a practical way you can hide your email addresses from spammers.
It covers the following main topics:
Why would I want to hide my addresses?
One of the ways spammers can get your e-mail address is by harvesting email addresses from web pages. Once they get your address, you will receive all sorts of junk email offering get-rich-quick schemes, penis enlargement and the like.
To avoid this, you can hide your e-mail addresses so that the spambots don't find them when they spider your pages.
This is especially important if you manage a mailing list for a club or similar organisation. You don't want to be responsible for all the members listed on your site to be subject to spam attacks!
Structure of an email address
The general form of a plain email address viewed in html is like this:
This is unique format, and if you are scanning html and find something like this, you can pick it immediately as an email address. Unfortunately so can spambots! Let's look at the parts:
On any one site, the parts that will change are the user name (someone) and possibly the domain name (somewhere.com). The rest will be the same for all addressees.
- Part1 mailto: this part is fixed and will be the same for everybody
- Part2 someone the email name of the recipient or addressee
- Part3 @ = "at" and again the same for everybody
- Part4 somewhere.com the email domain of the recipient (where they live on the net)
- Part5 ?subject= this is optional, but highly desirable, as it makes life easier for your visitors (and you too!). They can change it as they wish. Without it, you are relying on your visitors to fill out the subject line -- and not all will. Again this part will be the same for everybody
- Part6 Website Feedback also optional and only necessary if you want a subject line. Change the text to whatever makes sense for your site. I assume you will use the same subject line for all mail generated by your site.
Why this method?
There are many methods for hiding email addresses -- some much better than others. I chose this one because:
- It does not bulk up the published html code
- It offers a reasonable degree of disguise
- It is easy to hide your own addresses
- You can display encoded addresses without having parts of them disappear
- It can handle multiple addresses
- I have to explain how to do it
Detailed steps to hide your email addresses
Here is a summary of the steps to hide your email addresses using this method:
Valid characters in email address or subject line
The following characters are not allowed in the entry fields below: " \ , (double quotes, backslash and comma). Reasons:
For these reasons, if you enter any of these characters either for email address or subject line, the code will strip them out without any warnings.
- they are generally not valid in an email address
There are only a limited range of punctuation marks allowed in a regular email address. If you use something unusual, the code will warn you, but will otherwise accept your entry and Nothing Bad should happen. Of course, if the address really is invalid, you won't be able to send any mail to it.
Email addresses are not case-sensitive. You could have all upper case or all lower case, and it wouldn't make any difference. But if someone specifies their address as a mixture of upper and lower case characters, I suggest follow that style too.
Step 1 -- enter subject
Enter the name of the subject to appear on the e-mail subject line. This will be the same for all recipients. If you want the subject line to be blank, uncheck the box.
Step 2 -- enter addresses
If you already have a list of e-mail addresses, skip this step and move on to paste your addresses directly into the list below. To enter new addresses here:
- Enter the name of a recipient -- their email name e.g. someone
- Enter the recipient's full domain name e.g. somewhere.com
- Click the 'Add to List' button
- Repeat these steps for each recipient
- Don't use the '@' sign -- the code will add it
The Tab key should take you quickly from name to domain to 'Add to List' button. Or just press 'Enter' when you have entered the data you want. The data will appear in the larger list below, under anything already there.
There is some basic error checking on the email addresses -- the code just checks the general form. Even though it finds an error, it will try to continue. There are a small percentage of addresses that it may falsely report as being in error. But if you are certain that the address is correct, you can safely ignore the warning.
Paste directly into the list
If you have a list of names and address already prepared, copy and paste them into the larger list box just above. They should be in this form:
The last example shows an index number, '17'. These numbers are quite acceptable. The code completely ignores such numbers -- this allows you to reuse a previous indexed list without having to remove the old index numbers. More on an indexed address list below.
If you have made a lot of effort typing addresses above, now is a good time to save it all to a safe place. Never trust a computer, or my code
Then later, if you ever need to update your addresses, you can copy and paste from the file back into the list box above.
- Click "Select All" then press CTRL + C to copy to your clipboard
- To paste into a text file from your clipboard, create or open the file, then press CTRL+V to paste into the file
Step 3 -- review and edit
The list shows all the email addresses you have entered so far. Copy to or edit this list freely. Any new entries you make in the entry boxes in Step 2 above will add to the bottom of this list. The code here does no sorting; nor does it check for duplicates. If you want entries in a particular order, do it yourself. You can use blank lines if it helps with the organization.
If you later add addresses to the list, I suggest you do so at the bottom. This avoids the possibility of screwing up any mail links you have made previously using the index number (the number of the address in the list). More on this below.
Review all names and addresses and edit as required. Pay special attention to any error messages. It is important to get the addresses exactly right -- but you knew that already
Step 4 -- create special code
Clicking the button does the following:
If it reports errors, check and correct them if necessary. Then click the button again.
- (Again) checks for basic errors in the addresses
- Creates the code (including encoded addresses) for you to copy and paste
- Verifies that the coded addresses will decode correctly
- Creates an indexed list of addresses
When the code is created in this box:
To paste into a code object from your clipboard:
- Click "Select All"
- Press CTRL + C to copy to your clipboard.
- create or click the code object
- Press CTRL+Shift+V
This code is meant to confuse people, so if you are confused, that is a good sign! The idea is that a casual observer looking at this code should get no clue that email addresses are involved -- instead they should get the idea it is something to do with page testing.
The code checks that each encoded address decodes to give the correct original address. If it does not, that address is useless, and you should not use it on your pages. If your address is valid, you should not see an error message like this -- but you never know. If you do get this for a valid address, please tell me how you did it.
Indexed address list
If you have a lot of email addresses, you may need or want to make some links using the index number. If so, copy this list to a safe place instead of the earlier one. To do this:
- Click "Select All" then press CTRL + C to copy to your clipboard
- To paste into a text file from your clipboard, create or open the file, then press CTRL+V
You can paste this indexed list back into the list in Step 2 above at some future date. The data entry code will ignore the index numbers. This list could replace your original list if you wish.
If you are not happy with anything you see in the list, make the corrections and regenerate the code. Similarly if you have additions to make, paste in your amended list and repeat.
Step 5 -- paste special code
Copy and paste the code from the code window in Step 4 onto your page as a code object This is a useful step just for initial testing.
The only difference in the code for an include file is to remove the <script> tags, the first and last lines from the code.
</script> //remove last line
The pages on this site have a single email domain encoded with the help of this page. My email code is in the include file common.js -- along with other code used in these pages. So if you are stuck, take a look at that file.
Regular email links
For comparison with what follows, here is a regular (fictional!) email link made like this:
Link type: mailto://
Link URL: firstname.lastname@example.org?subject=Just Testing
Notice how the browser status bar shows the email details when you hover over the link. This is a desirable characteristic which I have tried to duplicate with the special code, but not with complete success.
The above link is regular but dangerous -- spammers may pick it up. The whole purpose of encoding is to avoid using such links.
Step 6 -- make special links to encoded addressses
There are two main ways of making links to encoded addresses -- simple and slightly more complicated.
The simple way works anywhere, even from inside text objects. It makes no pretence about displaying the email address when you visitor hovers over it. Simple link.
The second way is more complicated, and because of a current restriction in SiteSpinner, (V2.50f) works only from objects. You can't use this method from inside a text object, as you can with the simple method. This method tries to act like a normal email address -- hover over the link and the full mailto (may!) show in the browser status bar. You will also see the link in the Title text which displays when you hover.
Simple link without index number
The simple link works anywhere -- make it in the same way as you would a page link.
link type -blank-
Replace the name 'Someone' with a valid recipient's name. If you entered the name in the list, the code will look up the domain name and will select the first one it finds that matches the name Someone. Names are not case-sensitive, so someone would work just the same.
I have set up test email address which is connected to an auto-responder, so you can send an email and get a reply back within a minute. (Or maybe 15 minutes -- it can be very variable) Try it here. I will never see your test message, so it won't bother me a bit.
Notice that I set a title for the link as well -- this all shows in the following image:
Simple link with index number
If there are duplicate names in your list, and you want the name of the second or subsequent person of that name, you need to also specify an index. Like this:
where index is the number of that person on the address list which you should have saved above. So your link URL might become
where the name test is to use the domain listed against number 23 on your indexed list.
The code looks up the domain for the index number you specify.. If you specify a name that is not on your original list, you must also specify an index number. The exception is that if there is only one domain on your list, you don't need to -- the index number is automatically assumed to be number 1, regardless of name. If you do specify an index number, the code will just ignore it. Like this one: Try it here.
More complicated link
Ok, it is only slightly more complicated. Change the URL part of the link to be:
Note the addition of the word this as the first parameter of the the call to the function Hi. This tells the code which link it has to modify -- this is probably more than you wanted to know.
Also the function this time is called Hi not Hi_There as in the simple form.
This is my actual link URL.
My email name is 'test'. Just as you can with simple links, you can specify an index number to make absolutely sure about the email domain:
The numbers represent the indexes from the indexed list generated earlier.
Finer points for big email lists
If you have duplicate domain names, you need enter each domain name only once into the list. For the name part, just enter one name -- that can be a representative recipient.
You can key any additional email names to the index number in your link and automatically get the correct domain name. This means that for all names from that domain, other than the one on your list, you must enter index numbers.
If you want to make all your links by index number, you don't even need valid email names in your original list. In this case, the only user name that is used is the one you enter in the link -- the name in the list does not matter.
If you'd rather not do that, you can instead specify each name and domain in full.
On the other hand, if the user name is unique, you can forget about the index number and the decode will figure it out by searching the list for the user name. This is the method I prefer. I would use the index number only in cases where there are duplicate names and you need to clarify which email domain the code is to use.
How it all works -- for the techies
For those interested in such things, here an overview of the internal workings of the code.
The encode and decode operations are based on an "Exclusive OR" (XOR) function. XOR a character with a key and you change it to something unrecognizable. XOR the encoded character again with the same key and you recover the original character. An email address is just a sequence of characters, so applying the XOR to each character will do a good job of hiding it.
As mentioned before, I have tried to disguise the code that you will place on your pages to decode the email addresses. I have not taken the same precautions with the code used for encoding the email addresses -- it is all contained in a file innocently called forms.js
For multiple domains, the encode process sets up two sets of data:
For single domains, there is no D1 and D2 data -- the data is all encoded in the function TestPages().
- D1 with the encoded names
- D2 with the encode domains
Fixed parts of the email address, like the subject line, are encoded in the function TestPages(). This function should really be called DecodeAddress() and is the heart of the decode. It calls another function, TestPage() which contains the XOR function mentioned above. TestPages() decodes the various parts of the email address (as described above), joins them all up together.
If you have problems generating code that runs properly, try another browser. In testing, I found IE6 to be sometimes unreliable, while Netscape/Firefox were sometimes unreliable in different areas. Valid code for a single email domain should be quite similar to what I have used with this page -- see file common.js
My aim here has been to make it easy for you to encode your own (multiple) addresses.
As at 5 Oct 2005, nobody has tried to follow these instructions. If you do, and succeed or strike problems, please let me know how it turns out. If you find something here confusing, please let me know about that too. My email address is at the bottom -- encoded of course