Graceful Degradation Mailto Email Address Obfuscation - Hide Your Email From Spambots Tutorial
I killed it again! When I say graceful degradation, I mean with JS ON, when the user clicks the link it opens in their default email program. With JS OFF the link is no longer clickable BUT the text is still there and able to be copied by ALL browsers. I went to find the best ways to hide (AKA obfuscate) a mailto: email address. I also did not want the user to have to lift a finger (other than the one click) deciphering my email or having to mess with stupid captchas. I also did NOT want it to fail with JS Off. I ALSO needed to be able to correctly copy and paste the email address with js on or off. I ALSO wanted to use a recognizable email (eg me@domain.com) in the anchor text and not just some generic "Email Me" words.
Therefore I needed to hide it in the href="mailto:" and also the anchor text. There are 3 ways to hide the plain text with CSS. (1) address:after{content:"me\40domain.com";} (2) <span style="unicode-bidi:bidi-override;direction:rtl;">mon.niamod@em</span> (3) display:none as we are doing below. Using the content property you can't copy the text in a few browsers, and using the reverse text method the text gets pasted (presumably in the users email program) backwards. Neither are ok with me, so display none it is. All three methods below are completely full proof as tested here.
JS/CSS Method 1:
This is my preferred method. In my opinion, it's the cleanest and easiest. This hides the email address from spambots with CSS and JS. If you going to use JS to hide an email then apparently ROT13 Encryption is the best it gets. I'm fairly certain this is ROT13 Encryption - or some form of it. It has many code similarities as other ROT13 examples I've seen. Just look at, it's even more completely unrecognizable than any other ones you'll likely find. I chose to use this one here and in my own personal project because it looks completely un-crackable and because it has the least amount of code than any other method I tested. I tested about 40 lol. Alternatively, if you'd like to use your more standard ROT13 code then you can use this one instead, following roughly the same steps as the ones provide below.
Step 1: Use this Email Obfuscator Generator » enter your full mailto email address, anchor, and text (eg <a href="mailto:me@domain.com">me@domain.com</a>) » select obfuscating method Javascript » grab the generated code » remove the noscript tags » and replace document.write with document.getElementById('method1').innerHTML=(m);.
Step 2 - The CSS: Use this CSS...
#method1 b {
display:none;
}
Step 3 - The HTML: This is the HTML the spambot will see. Place this where you want your email to appear...
<span id="method1">m<b>@</b>e@d<b>no</b>oma<b>.com</b>in.com</span>
Step 4 - The JS: Notice it's only one line - bo-yeah baby! Place YOUR generated js encoded code at the bottom of your webpage just above the body tag. This is the JS the spambot will see. It will look similar to this...
var s="=b!isfg>#nbjmup;nfAepnbjo/dpn#?nfAepnbjo/dpn=0b? ";m="";for(i=0; i<s.length; i++)m+=String.fromCharCode(s.charCodeAt(i)-1);document.getElementById('method1').innerHTML=(m);
Done! This is what the generated source code looks like...
<span id="method1"><a href="mailto:me@domain.com">me@domain.com</a>
This is what the user will see with JS ON or OFF...
me@domain.com
PHP/CSS Method 2:
The original less graceful degradation tut can be found here. This hides the email address from spambots with CSS and PHP. Because PHP is server side, there is no obfuscated mailto: email address in your source code on your base page or email.php page. If you use an "Email Me" phrase in the anchor text instead then there is no evidence of a email at all. However, I'd be pretty impressed if a spambot could figure out this display none obfuscated address.
Step 1 - The CSS: Use this CSS...
#method2 b {
display:none;
}
Step 2 - The HTML: This is the HTML the spambot will see. Place this where you want your email to appear...
<a href="email.php" id="method2">m<b>@</b>e@d<b>no</b>oma<b>.com</b>in.com</a>
Step 3 - The PHP: Create a file called email.php and place this code in it...
<? header("Location: mailto:me@domain.com"); ?>
Loading Email...
Done! This is what the generated source code looks like...
<a href="email.php" id="method2">m<b>@</b>e@d<b>no</b>oma<b>.com</b>in.com</a>
This is what the user will see always...
me@domain.com
PHP/JS/CSS Method 3:
The original non graceful degradation tut can be found here. This hides the email from spambots with CSS, PHP, and JS.
Step 1 - The CSS: Note this is a class and not an ID. Use this CSS...
.method3 b {
display:none;
}
Step 2 - The PHP: The spambot will not see this because it's PHP. Place this where you want your email to appear...
<?php echo hide_email('me@domain.com'); ?>
Step 3 - The PHP/JS: The spambot will see the JS portion of this code. In the span near the end of the code edit in YOUR email address with the display none <b>'s and text, and add YOUR prefered class name on the span. Place this at the bottom of your webpage just above the body tag....
<?php function hide_email($email) { $character_set = '+-.0123456789@ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz'; $key = str_shuffle($character_set); $cipher_text = ''; $id = 'e'.rand(1,999999999); for ($i=0;$i<strlen($email);$i+=1) $cipher_text.= $key[strpos($character_set,$email[$i])]; $script = 'var a="'.$key.'";var b=a.split("").sort().join("");var c="'.$cipher_text.'";var d="";'; $script.= 'for(var e=0;e<c.length;e++)d+=b.charAt(a.indexOf(c.charAt(e)));'; $script.= 'document.getElementById("'.$id.'").innerHTML="<a href=\\"mailto:"+d+"\\">"+d+"</a>"'; $script = "eval(\"".str_replace(array("\\",'"'),array("\\\\",'\"'), $script)."\")"; $script = '<script type="text/javascript">/*<![CDATA[*/'.$script.'/*]]>*/</script>'; return '<span id="'.$id.'" class ="method3">m<b>@</b>e@d<b>no</b>oma<b>.com</b>in.com</span>'.$script;} ?>
Done! This is what the generated source code looks like...
<span id="e903603774" class="method3"><a href="mailto:me@domain.com">me@domain.com</a></span>
This is what the user will see with JS ON or OFF...
me@domain.com
