Articles :: JavaScript :: Protecting Email Addresses with Masking Techniques
written by Toby Miller on November 30, 2006 November 30, 2006
It's absolutely true that putting your email address on a web page is the fastest way to get it added to a SPAM list. A while back some groups figured out that it's much easier to let their SPAM bots (little automatic web spidering applications) roam around the internet gobbling up all visible email addresses than it was to actually solicit for email addresses from willing participants. I guess it's easier to sell a list of two million email addresses than four hundred email address ... even if those email addresses are not truly targeted recipients (like they no doubt promise you they are).
Masking
The easy solution that you've probably seen many users implementing is masking. Of course, this isn't a sure fire way to beat the bots either because they can be updated to get past the mask but I haven't seen a lot of bots doing it yet. So, at least for now, this is still a valid way of hiding your email address. It's really simple, just obscure your email address in such a way that makes it readable by a human, but unreadable as an email address by a SPAM bot.
example:
joe.schmoe at crabshack dot com
Now a user knows that they can type this email address into their email client as joe.schmoe@crabshack.com because this is what it says if read aloud. The only real downside to this method of masking is that now your users HAVE to manually type in your email address to send you a message and, let's face it, people are lazy. So now that we're masked we need to unmask our email address for our users without unmasking for the SPAM bots.
Unmasking
I like to use JavaScript for this because nothing is actually broken it doesn't really matter if JavaScript is disabled. Your users can still sound out the email address and type it in manually. But why make them when you can just run some javascript smart enough to make things right again. The user won't even notice that masking ever occurred ... and neither will the SPAM bots. =)
This will all occur on page load by searching through your code for elements containing strings in the following formats:
different masking formats:
joeschmoe at domain dot extension
joe_schmoe_at_domain_dot_extension
joe.schmoe at domain dot extension
joe.schmoe_at_sub.domain_dot_extensions
etc.
The Code
I originally had this doing a blanket search of all elements on the page and it just turned out to be too slow for my taste. This was especially true of larger text documents and those with complex table layouts. So I'm now requiring you to first add a class of "masked" to the container before including your masked email address(es). I know this isn't as convenient as the total freedom of writing your masked email wherever you want would have been, but I'm a stickler for performance.
In order to use this script all you need to do is choose the HTML container that you'll be writing your masked email into and give it the class name "masked". Type your masked email address into that container and load the javascript file into the HEAD of your HTML document. That's it, now joe.schmoe at domain dot will become joe.schmoe at domain dot com (note: that was a live demo).
source code:
1:/**
2: * An email masking support library for help with anti-spam efforts
3: *
4: * @author Toby Miller <tmiller@tobymiller.com>
5: * @copyright Copyright (C) 2006, Toby Miller
6: * @license http://www.gnu.org/copyleft/lesser.html GNU Lesser General Public License
7: */
8:
9:/**
10: * define containers that we would expect to find masked email strings in
11: */
12:var emailContainers = new Array('DIV', 'SPAN', 'P', 'TD');
13:
14:/*
15: * DO NOT EDIT BELOW THIS LINE
16: */
17:
18:/**
19: * Locate all "protected" email address entries on the page and translate them
20: * back into normal email address links.
21: *
22: * i.e. look at the following examples to see how some emails might be treated:
23: * <span class="masked">tmiller at tobymiller dot com</span>
24: * <span class="masked">tmiller_at_tobymiller_dot_com</span>
25: * <span class="masked">tmiller @ tobymiller . com</span>
26: * <span class="masked">please contact me at tmiller at tobymiller dot com</span>
27: *
28: * @important! this function must be called by the onload event
29: *
30: * @param void
31: * @return void
32: */
33:function emailMaskSetup()
34:{
35: // set internal vars
36: var masks = new Array
37: (
38: (new RegExp('([^a-z0-9]*)([a-z0-9_.]+) +at +([a-z0-9_.]+) +dot +([a-z0-9]+)([^a-z0-9]*)', 'i')),
39: (new RegExp('([^a-z0-9]*)([a-z0-9_.]+)_+at_+([a-z0-9_.]+)_+dot_+([a-z0-9]+)([^a-z0-9]*)', 'i')),
40: (new RegExp('([^a-z0-9]*)([a-z0-9_.]+) +@ +([a-z0-9_.]+) +. +([a-z0-9]+)([^a-z0-9]*)', 'i'))
41: );
42: var re = null;
43: var test = null;
44: var obj = null;
45: var clazz = null;
46:
47: for (var i = 0; i < emailContainers.length; i++)
48: {
49: for (var j = 0; j < document.getElementsByTagName(emailContainers[i]).length; j++)
50: {
51: // get obj reference
52: obj = document.getElementsByTagName(emailContainers[i])[j];
53:
54: if (obj != null)
55: {
56: clazz = obj.className;
57: re = new RegExp('masked');
58: test = clazz.match(re);
59:
60: if (test)
61: {
62: // this element might have a masked email address, unmask it
63: // with one of the recognized format masks
64: for (var k = 0; k < masks.length; k++)
65: {
66: test = obj.innerHTML.match(masks[k]);
67:
68: if (test)
69: {
70: obj.innerHTML = obj.innerHTML.replace(masks[k], '$1<a href="mailto:$2@$3.$4">$2@$3.$4</a>$5');
71: }
72: }
73: }
74: }
75: }
76: }
77:}
78:
79:/**
80: * @requires common.js:addEvent
81: */
82:addEvent(window, 'load', emailMaskSetup);
83:
Download Source Code
I hope this information was useful. As always let me know if you have any questions, find mistakes in my code or just want to chat about the topic.
permalink
|
Natural Living (5)
Heating & Cooling (1)
Herbal Remedies (1)
Personal (0)
Family (1)
Humor (11)
Miscellaneous (1)
Politics (5)
Technology (2)
System Administration (4)
Linux (1)
Solaris (0)
Web Development (2)
CSS (3)
Design (1)
Flash (1)
JavaScript (11)
PHP (1)
CakePHP (1)
Web Browsers (2)
Firefox (1)
Internet Exploder (0)
Netscape (1)
|
