Skip to content

Instantly share code, notes, and snippets.

@joshdick
Created May 8, 2011 05:50
Show Gist options
  • Save joshdick/961154 to your computer and use it in GitHub Desktop.
Save joshdick/961154 to your computer and use it in GitHub Desktop.
Elegant E-Mail Address Obfuscation
<!DOCTYPE html>
<!-- Created by Josh Dick <http://joshdick.net> -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<title>Elegant E-Mail Address Obfuscation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</head>
<body>
The following link works like a regular mailto: link when JavaScript is enabled, but uses <a href="http://www.google.com/recaptcha/mailhide" target="_blank">reCAPTCHA Mailhide</a> as a fallback:
<!--
1) Obfuscate the e-mail address that appears on the page by adding garbage-filled, invisible <span>s inside the e-mail address.
This is an effective method of hiding an e-mail address from spam bots/harvesters; see here:
http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared
2) Use a reCAPTCHA Mailhide URL as a fallback destination if JavaScript is disabled; the user will eventually see a mailto: link after passing a CAPTCHA.
-->
<a
target="_blank"
id="contact"
href="http://www.google.com/recaptcha/mailhide/d?k=01RgRLgvxEUrUhAUtFCSPNRA==&amp;c=0nIRqiLvmUU-5ifT56SvMSY2hB9qsGA9T0u6dIWkHPI=">
add<span style="display:none">obfuscation</span>ress@exam<span style="display:none">obfuscation</span>ple.com
</a>
<script type="text/javascript">
$(document).ready(function(){
//First, remove the invisible <span>s from the link - now the plain-text e-mail address is in the DOM
$("#contact span").remove();
//Next, set the link's href attribute to be 'mailto:' plus the link text (the plain-text e-mail address from the previous step.)
//BAM--instant simple mailto: link, except spam bots can't harvest it.
$("#contact").attr("href", "mailto:" + $.trim($("#contact").text()));
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment