|
|
|||||||||
|
mailto: Obfuscation
Althought the mailto: link provides the easiest way to allow users to send a message to make a suggestions or to give feed back, unfortunately it also provides spammers with an easy way to harvest email address’s from mailto: links.
There are many different methods that can be employed to hide or obfuscate a mailto: link and/or email address, each method has it’s own distinct advantages and disadvantages so it is up to you to decide which method would be the best one to employ to protect your email address.
Images
The simplest way to make an email address available to users in a web page, but not visible in the source code of the document, is to use an image that contains the text for the email address, the spider or spambot will find it very difficult to parse the text contained in the image like this one below.
<img src="./images/emailaddy.gif" width="150px" height="40px"
alt="Image of an email address" /> This method does have disadvantages though, the users browser must have images enabled, or they will not be able to see the image or the email address, this also means that people with disabilities who use a text browser such as Lynx will not be able to see the image or email address at all which is an accessbility issue, and the user cannot click on the image to initiate their email client.
Another disadvantage of using an image is that the user cannot copy the email address directly from the page, and save it to clipboard so that they can paste it into the To: line of an email to send a message, they will have to type it in manually.  Top of page
Flash
Another method of hiding an email address is to use Flash to create either an image or a button and then add a behaviour ie a link to open a web page then you can use mailto: in the link so it spawns an instance of the users email client when they click on the image or button. An issue to consider if you are inserting a Flash file in a web page/document is validation, this is why I have linked to my example and opened a little window to display it so that I can use the <object> and the <param> tags and the <embed> tag together so that my example will work in any browser, as the code example below illustrates.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=5,0,0,0" width="120px" height="40px" id="email" align="middle"> <param name="allowScriptAccesss" value="sameDomain" /> <param name="movie" value="emaddy.swf" /> <param name="loop" value="true" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff;" /> <embed src="emaddy.swf" loop="true" quality="high" bgcolor="#ffffff" width="120px" height="40px" name="email" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
This method will make it very difficult for spiders or spambots to parse the email addres from the Flash file they would need to actually decompile the .swf file to parse the email address and harvest it, which is not worth the effort for a single email address. Top of page
Hidden in plain sight
A very basic method to obfuscate an email address, is to hide it in plain sight in the web page by not employing the mailto: link or the @ sign, and just using regular characters, to display the email address on the page in plain sight like the email address in the example below. Using this method the source code only contains regular characters as the example below illustrates.
Contact: <strong>me_at_mydomain.co.uk</strong>
Most people are smart enough to work out that this is in fact an email address using text message type grammar, but just to be on the safe side and for clarity you can always put some instructions just below the email address or as near to it as possible, informing the user to replace the characters "_at_" with a real @ sign.
Althought the email address can now be parsed and harvested by a spider or spambot, the email address is invalid protecting the email address.
By using regular characters this method will work in any browser, so even people who use a text browser will be able to see the email address, plus they can copy it directly from the page making this method more accessible than using an image, but the user cannot initiate their email client using this method. Top of page
html comments
Another method to obfuscate an email address, is to employ html comments and regular characters to display an email address on a web page/document in plain sight, like the email address in the example below. This method works by placing the @ sign and greater than > and less than > symbols and other characters between the comments which makes it difficult for spiders and spambots to parse and harvest the email address from the source code of the page/document.
Contact: me<!-- >@. -->@<!-- >@. -->mydo<! -- </@. -->main<!-- >@/ -->.co.uk
This method does not provide an effective solution, although it will work in any browser and the user can copy the email address directly from the web page/document, but they will not be able to initiate their email client. Top of page
CSS
It is also possible to obfuscate an email address, by using CSS and regular characters to display an email address in a web page/document and hide it in plain sight like the example email address below. To use this method you need to insert a <span> element containing a few regular characters into the email address after the @ sign, and use the class attribute to apply a style and format the <span> element like the source code example below.
<p>Contact: me@<span class="noShow">NaN</span>mydomain.co.uk</p>
Then you need to create a style definition either in the <head> section of the page/document or in an external stylesheet using the class attribute to match the span to the style definition which sets the display property of the <span> element to none like the example below.
<style type="text/css">
.noShow { display: none; } </style> Using the display property removes the <span> element from the page/documents flow so there is no space where the <span> element is located in the email address, but if we had used the visibility property set to hidden there would be a space where the <span> element is located in the email address.
The advantages of using this CSS method are that it is well supported and will work in most browsers today, also the email address can be copied directly from the web page/document and saved to the clipboard.
Another method using CSS that can be employed uses the unicode–bidi: property and the direction property to change the base direction of the characters in a web page/document, or in this case to display the characters of an email address correctly like the example below. To use this method you will need to insert a <span> element into the source code of the page/document that will act as a container for the email address, and use the class attribute to apply a style to format the contents of the <span> element, then insert the characters for the email address in reverse order (backwards) like the source code example below.
<span class="redirect">ku.oc.niamodym@em :tcatnoC</span>
Then you need to create a style definition either in the <head> section of the web page/document or in a seperate stylesheet using the class attribute to match the span to the style definition that uses the unicode–bidi and the direction properties to change the direction of the characters contained in the <span> element as the example below illustrates.
<style type="text/css">
.redirect { unicode–bidi: bidi–override; direction: rtl; } </style>
The advantages of using the unicodebidi algorithm are that this method is well supported so the email address will be displayed correctly in most browsers even text mode browsers,
and the email address can be copied directly from the web page/document. Another method is to use the :after pseudo–element to insert the email address into the web page/document as it loads in the browser, by inserting a <p> element, and then use the class attribute to apply a style to the <p> element, and put some text and the email address username/alias into the paragraph like the source code example below.
<p class="adMe">Contact: me</p>
Then you need to create a style definition either in the <head> section of the web page/document or in a seperate stylesheet using the class attribute to match the span to the style definition that uses the :after pseudo–element to insert the rest of the email address into the <p> element like the example below.
adMe:after { content: "@mydomain.co.uk"; }
Unfortunately the CSS :after pseudo–element is not well supported this method will work in the Mozilla, Opera and Netscape browsers, but it will not work in the Internet Explorer or text mode browsers which is an accessibility issue, plus the user cannot initiate their email client by clicking on the email address either. Top of page
7–bit ASCII charactersA very popular method to obfuscate an email address is to replace the regular characters with the equivalent 7–bit ASCII character , you can find two tables that contain a listing of all 128 of the 7–bit ASCII characters on this page ASCII characters.
The basic method to obfuscate an email address using ASCII characters is to use the basic plain sight method descibed above, but this time replace the @ sign with its equivalent ASCII character which is @ so that it looks like a regular email address as the example below illustrates Using this method the @ sign is now visible to the user which makes it clear that it is an email address, yet there is no @ sign or a mailto: link in the source code that the spiders or spambots are searching for, which is illustrated in the example below.
Contact: <strong>me@mydomain.co.uk</strong>
At least using the ASCII character for the @ sign it is clear to the user that this is an email address and they can copy the characters directly from the page ready to paste into the To: line of a message.
The next step is obvious, we replace all the regular characters in the email address with ASCII characters which will look identical to the previous example when it is rendered in the users browser as the example below illustrates. When a spider or spambot looks at the source code now, all that it can see are some regular characters and the ASCII characters that are the email address, which make the email address less obvious in the source code.
Contact: <strong>me@mydomai
n.co.uk</strong> By using ASCII characters to replace the regular characters in the email address and the @ sign the whole email address is no longer visible in the source code of the page/document as an email address, providing another level of protection than the plain sight method to obfuscate the email address. Top of page
The mailto: link and ASCII characters
One of the most popular methods to obfuscate an email address is to use the mailto: link and replace the emails regular characters with ASCII characters as discussed in the previous plain sight example above, to create a link like the example below. Althought a mailto: link is now visible in the source code of the page/document, the email address is not visible because it is has been obfuscated using ASCII characters, making it less obvious in the source code.
Contact: <a href="mailto:me@mydoma
in.co.uk">Email Me</a> This method is a bit more accessible to the user than the plain sight methods that we have discussed previously, simply because this method employs the mailto: link which makes it a lot easier for the user to send a message if they have an email client installed on their system, even if they use a text mode browser.
It is also possible to take this method a step further and use ASCII characters to obfuscate the mailto: part of the link so that it is not visible in the source code of the page/document, and the link will still work just like the example link below. Now that the mailto: part of the link has been obfuscated using ASCII characters as well as the @ sign and email address it will be a lot harder for a spider or spambot to find and harvest the email address as the code example below illustrates.
Contact: <a href="mailto:me@
mydomain.co.u k">Email Me</a> By obfuscating the mailto: part of the link it now looks just like a regular link or </a> element in the page/document source code, as the example above illustrates, which provides a greater level of protection against spiders or spambots than the methods discussed previously.
You can also create a more sophisticated mailto: link by adding more elements such as a cc, bcc and subject lines, and obfuscate them using ASCII characters, as the link below illustrates. Even thought the link contains the mailto: and the extra elements it still looks like a regular <a> element in the source code of the page/document making the link less obvious in the page/document source code as the example below illustrates.
Contact: <a href="mailto:me
@mydomain.co .uk?cc=you@yo urdomain.co. uk&bcc=them@t heirdomain.c o.uk&subject= Site%20Admin&bo dy=I%20would%20li ke%20to%20report %20a%20problem">Me</a> You will still need to replace any spaces between words with %20 so that they are URL encoded, and also escape the ampersand (&) with the entity for the ampersand which is & this is because they are part of a URL, you can find more information here about the mailto: link. Top of page
URL – encoded ASCII Characters (hexadecimal)
Another popular method to obfuscate an email address is to use the mailto: link and replace the emails regular characters with URL encoded ASCII characters, to create a link like the example below. Althought a mailto: link is now visible in the source code of the page/document, the email address is not visible because it is has been obfuscated using URL encoded ASCII characters, making it less obvious in the source code as the example below illustrates.
Contact: <a href="mailto:%6d%65%40%6d%79%64%6f%6d%61
%69%6e%2e%63%6f%2e%75%6b">Me</a> If you want to obfuscate the mailto: part of the link to make it less obvious in the source code of the page/document do NOT use URL encoded characters the link will NOT work, you will need to use regular ASCII characters like the example below.
Contact: <a href="mailto:
%6d%65%40%6d%79%64%6f%6d%61%69%6e%2e%63%6f%2e%75%6b">Me</a>
It is also possible to create a more sophisticated mailto: link by adding more elements such as cc, bcc and subject lines and obfuscate them using both ASCII and URL encoded ASCII characters as the example link below illustrates. Now that all the characters in the extra elements have been obfuscated they are less visible in the source code and the link looks like a regular <a> element as the example below illustrates.
Contact: <a href="mailto:%6d%65%40%6d%79%64
%6f%6d%61%69%6e%2e%63%6f%2e%75%6b?cc=%79%6f%75%40%79%6f %75%72%64%6f%6d%61%69%6e%2e%63%6f%2e%75%6b&bcc=%74 %68%65%6d%40%74%68%65%69%72%64%6f%6d%61%69%6e%2e%63%6f%2e%75%6b& subject=%53%69%74%65%20%41%64%6d%69 %6e">Me</a>
If you do employ this method treat the extra elements as "name value" pairs and use ASCII characters to obfuscate the name part of the pair, and use URL encoded characters to obfuscate the value part of the pair. Top of page
JavaScript
The simplest way to use Javascript to insert a plain text email address into a web page/document, is to employ Javascripts document.write() method, to write the email address into the page/document as it loads in the browser like the example below. The basic idea of this method is that it allows you to break the email address into parts making it harder to parse from the source code of the web page/document, to make it harder for spiders and spambots to harvest the email address, which the source code example below illustrates.
<script type="text/javascript">
<!–– document.write("me"+"@"+"mydomain.co.uk"); // ––> </script> The email address can be copied directly from the web page/document as long as the browser is JavaScript enabled, but they cannot click on the email address to initiate their client.
The document.write() method can also be employed to insert a mailto: link into a web page/document so that the user can click it and initiate their email client like the example below. This time the link is broken into parts and the value of each part is stored in a variable named emAdy and by using the add–by–value += operator to assign each link parts value to the variable you only need to declare a single variable rather than declaring a separate variable to hold the value of each link part.
<script type="text/javascript">
<!–– var emAdy = "Contact <a"; emAdy += " href=\"mailto:me"; emAdy += "@mydomain"; emAdy += ".co.uk\">Me</a>"; document.write(emAdy); // ––> </script> Then the script can be inserted into the source code of the page/document wherever you want the link to appear and as long as the users browser is JavaScript enabled they will be able to use the link. Although the link and email address have been broken into parts to make it harder to parse, the email address is still visible in the source code of the page/document, to resolve this isssue the script can easily be split into two scripts and the script containing the variable declaration and value assignment is then put into the <head> section of the document like the example below or even better in a separate .js file.
<html>
<head> <title>Sample Document</title> <script type="text/javascript"> <!–– var emAdy = "Contact <a"; emAdy += " href=\"mailto:me"; emAdy += "@mydomain"; emAdy += ".co.uk\">Me</a>"; // ––> </script> </head> Then the second script that will write the link into the page/document is inserted into the source code in the required location and then only the variable name is visible in the script in the source code of the page/document as the example below illustrates.
<body>
<script type="text/javascript"> <!–– document.write(emAdy); // ––> </script> </body> </html> The link will now be written into the web page/document as it loads in the browser, as long as the browser is JavaScript enabled, and the user can then click on the link to intiate their email client and send a message.
Another method to insert a link into a web page/document as it loads in the browser employs JavaScripts innerHTML property to insert the link into an html element such as a <span> element, like the link below. This script uses a simple function to insert the link, which has been broken into parts and the value of each part assigned to a variable (emAdy) which is inserted into the html element using the getElementById() method to reference the element directly by it’s id attribute (mailBox) and then the innerHTML property is given the value of the variable emAdy as the example below illustrates.
<html>
<head> <title>Sample Document</title> <script type="text/javascript"> <!–– function shoAdy() { var emAdy = "Contact <a"; emAdy += " href=\"mailto:me"; emAdy += "@mydomain"; emAdy += ".co.uk\">Me</a>"; document.getElementById("mailBox").innerHTML= emAdy; } // ––> </script> </head> The only things that are now visible in the source code are the onload event handler in the <body> tag that calls the function shoAdy() as the page/document loads in the browser, and the empty <span> element ready to recieve the link as the example below illustrates.
<body onload="shoAdy()">
<p> <span id="mailBox"> </span> </p> </body> </html>
As long as the users browser is JavaScript enabled they will be able to click on the link to initiate their email client and send a message, otherwise they will not even be able to see or use the link.
A very simple in–line method is to use a regular <a> element to create a link like the one below. The email address can be broken into parts making it harder to parse from the source code of the web page/document as the example below illustrates.
Contact:<a href="javascript: void(window.location=’mailto:me’+’@’+
’mydomain.co.uk’)">Me</a>
This method uses the JavaScript pseudo–URL to supply parameters to the href attribute of the <a> element, and the JavaScript void operator makes sure that no value is returned that the href attribute can use, and the <a> elements onclick event handler triggers the link and spawns an instance of the users email client as long as the browser is JavaScript enabled.
You can also use an <input> element or <button> tags to create a button like the example below. The email address is broken into parts to make it harder to parse form the source code of the web page/document, and when the user clicks on the button the onclick event–handler invokes the the JavaScript expression initiating the users email client as long as their browser is JavaScript enabled.
<button onclick="window.location=’mailto:me’+’@’+’mydomain.co.uk’">
Contact Me</button>
Another method is to use the JavaScript expression in a simple function then use a button to call the function like the one below. The script containing the function can then be placed in the <head> section of the web page/document or even better in a separate .js file, and the email address is broken into parts making it harder to parse.
<script type="text/javascript">
<!–– function nuMessage() { window.location= ’mailto:me’+’@’+’mydomain.co.uk’"; } // –– </script> Or you could assign the value of the mailto: and the email address to a variable.
<script type="text/javascript">
<!–– function nuMessage() { var emAdy = "mail"; emAdy += "to:me"; emAdy += "@mydomain"; emAdy += ".co.uk"; window.location= emAdy; } // –– </script> The only thing that is now visible in the source code of the web page/document is the button tag and the onclick event–handler and the name of the function, which a spider or spambot are not looking for.
<button onclick="nuMessage()">Contact Me</button>
As long as the visitors browser is JavaScript enabled they will be able to click on the button and initiate their email client and send a message.
All of the methods so far deal with protecting a single email address, this script is very flexible and can be employed to protect multiple email addresses, use the link below to see a working example where you can send a message to any one of the three Stooges
It is possible to use if() control statements to achieve the same end, but it is a lot easier and more efficient to use a switch() control statement, then you can easily add new cases to the switch() statement to protect more email addresses as and when the need arises.
<script type="text/javascript">
<!–– function nuMsg(name) { //variables go here switch(name) { case "Larry": window.location= addyOne; break; case "Curly": window.location= addyTwo; break; case "Mo": window.location= addyThree; break; default: } } // –– </script>
When the user clicks on the link the value Larry is which is highlighted in the example link below, is passed to the function nuMsg() and stored in the variable name, which is also highlighted in the code example above.
Contact: <a href="javascript:onclick=nuMsg(’Larry’)">Larry</a>
The only thing that is now visible in the source code of the web page/document is a regular <a> element that contains the onclick event–handler and the name of the function nuMsg() which a spider or spambot are not looking for.
With any of the methods described above it is also possible to obfuscate the mailto: and email address using either ASCII or URL encoded characters or a mixture of both types of characters. Top of page
Noscript tagsIt is always a good idea to make provision for the few visitors with browsers that are NOT JavaScript enabled by placing a message or some advice between <noscript> tags directly below the button or mailto: link in the web page/document like the example below.
<noscript>
<p><b>Your browser has JavaScript turned off</b><br /> <em> Please enable JavaScript to contact Me </em></p> </noscript> You could put a plain text email address between the <noscript> tags and you could obfuscate the email address using ASCII characters which can then be copied directly from the web page/document, or you could provide the user with a link to a page containing instructions how to JavaScript enable their browser so that they can send a message. Top of page
Encryption
It is also possible to encrypt an email address or the whole mailto: link making it virtually impossible for a spider or spambot to harvest the email address from the web page/document.
The methods that can be employed to encrypt an email address or mailto: link can range from a simple substitution cipher, or prime numbers and factoring could be used to cipher (encrypt) the email address to provide a greater level of encryption. Here are three sites that definitely encrypt email address’s and mailto: links.
Using these encryption methods will make it virtually impossible for spiders or spambot to harvest the email address, and as long as the visitors browser is JavaScript enabled and they can click on the link and send a message. Top of page
Forms
Providing a form on a web site so that visitors can send a message is the best way to ensure that your email address does not appear in the source code of any of the documents that make up the web site, where a spider or spambot could harvest it.
<form action="./cgi_bin/formmail.pl" method="post">
Name <input type="text" id="realname" size="30" maxlength="40" /> Email <input type="text" id="email" size="30" maxlength="50" /> Comment <textarea cols="40" rows="10" id="comment"></textarea> <input type="submit" value="Send Email" /> </form>
Setting up a form for visitors to send feed back is not very difficult even if you dont know how to write a CGI script you can download one that you can configure and deploy on your web site.
It is very important that you make sure that the CGI script that you are going to employ is secure and it will only allow form/s on your web site to use the script to send data, to prevent others from linking to your CGI script from their forms.
Initially it will look like you are responsible for sending the spam and this could land you in a lot of trouble with your ISP or the company who host your site and your domain name may even get black–listed, not to mention lots of angry emails from the people who recieved the spam from your domain. You can find more information about html forms and form elements here just use the link marked html forms in the navigation panel on the left at the top of the page, plus there is also a link to the CGI Resources web site in the section about Scripts and script Services where you can find all sorts of CGI scripts. It is also possible to use a <form> tag to send an email, simply by setting the values of three of the tags attributes listed below, so that when a visitor clicks on a button an instance of their email client is spawned so that they can send a message.
<form name="email" method="post" enctype="text/plain"
action="mailto:me@mydomain.co.uk?subject=Site%20Admin"> <input type="submit" value="Email Me" /> </form>
I do not recommend using this method, it is better to use a CGI script as discussed above to send form data via an email rather than using the mailto: URL. Also bear in mind that if you add fields to the form for the visitor to fill in the data will not be automatically inserted into the email when the visitor clicks on the submit button, to achieve this you will need a script to retrieve the value of each field and then insert the data into the body of the email. Top of page
http: redirectsUsing http: redirects is another popular method that can be employed to keep an email address out of the web page/documents source code, the user clicks on a link to a server side script containing a mailto: URL which spawns an instance of the visitors email client, so that they can send a message. The code example below is a basic http: redirect script written in PHP.
<?php
header("Location: mailto:me@mydomain.co.uk?subjectSite%20Admin"); exit(); ?> The only thing that is visible in the source code of the web page/document is a regular <a> element or link which contains only a link to a .php file containing the script on the server so there is nothing in the source code of the page/document for a spider or spambot to harvest as the code example below illustrates.
<a href="./cgi_bin/redirect.php">Email Me</a>
Here is a link to a working example of a PHP It is possible to obfuscate the email address using url encoded ASCII characters in the PHP script, but it is not possible to obfuscate the mailto: part of the header or the extra attributes such as ?subject= as discussed previously with other methods. The other down side to this method is that when the user clicks on the link an empty page is loaded in the browser and the mailto: and the email address etc are visible in the browsers address bar and as empty pages title, plus the user then has to use the back button to get back to the page where they clicked the link to continue browsing, which just disrupts the users experience which is not exactly user friendly. There will most probably be some way to stop the page reloading as there is with the JavaScript methods unfortunately at the moment I just do not know enough about PHP to work out how to do this. As long as the user has an email client on their system when they click on the link an instance of their email client will be spawned, and they can send a message, but if they dont have an email client available, and they use web mail you will need to provide an alternative to accomodate these visitors, and display an obfuscated plain text email address which they can copy and paste. Top of page
Challenge or CAPTCHA
Another popular method that is employed to protect email address’s is the challenge–response type test or CAPTCHA as it is more commonly known, this type of test is often used to determine if the user is actually human. You will have most probably already seen a CAPTCHA image like the example here on the right, especially if you have ever created an email account with either Hotmail or Yahoo, getting the user to enter the characters from the image into a text box, helps to ensure that a person not an automated program is actually creating the new email account, and to stop spammers opening many accounts that they can then use to send spam.
I have now rewritten and upgraded both of the CAPTCHA applications which I have been meaning to do for a while now so that they validate the data the user enters thoroughly and intelligently with informative alerts to assist the user if they happen make a mistake when they enter data. Both of the CAPTCHA’s use a random number between 0 & 999999 rather than a finite question that could be easily discovered, if the user enters the correct number an instance of their email client is spawned and they can send a message. This CAPTCHA can be used to protect a single email address captcha This CAPTCHA can be used to protect multiple email addresses multi captcha
If you would like to use my CAPTCHA application on your own web site you can download a copy of either application using the links above on the right, all I ask in return is that you leave the comment at the top of the script containing information about the script etc intact. Although using a CAPTCHA may take a moment or two longer before the visitor can send a message it will provide a greater level of protection especially when it is combined with any of the other methods discussed here to obfuscate or encrypt the email address, making it very difficult if not impossible for most spiders or spambots to harvest the email address. If you are not familiar with html or JavaScript and you dont know how to create your own CAPTCHA there is a link in the Encryption section of this page to the Syronex site where you can use a tool to encrypt email addresses and they also provide the option to add a user challenge or CAPTCHA to add a greater level of security. 
|
||||||||
|
|||||||||
Remember once your email address has been harvested and your inbox is bursting with spam if you obfuscate your email address this will NOT stop the spam, simply because the spammers already have your email address, plus they will most probably have sold it on to many other spammers, this will only stop your email address from being harvested in the future, what you need to do is get a new email address and then obfuscate your new email address.
