Wednesday, November 5, 2008

E-mail Obfuscation with jQuery

I recently was given the task to obfuscate e-mail addresses. I looked at a few options, and decided I wanted a method that followed some certain criteria:
   1. easy to implement
   2. effective
   3. linked
   4. selectable text

I found a blog where this guy put nine different obfuscation methods on one web page, and let it sit for a year and a half. This graph shows the effectiveness of each method. Using all of this data, I decided Javascript was the way I wanted to go. For extra simplicity, I went with jQuery

<a class="obfuscate">example<span class="replaceAt">-AT-</span>gmail.com</a>

<script type="text/javascript" charset="utf-8">
  $(".replaceAt").replaceWith("@");
  $(".obfuscate").attr("href", "mailto:"+$('.obfuscate').text());
</script>

The first line replaces the whole .replaceAt span (including tags) with an @, then the second line takes the constructed e-mail and sticks it into the href of the <a>. Those without Javascript installed will see example-AT-gmail.com.