Home → Suggestions →

Email Obfuscation Solution

Joshua Suggs

10 Sep, 2010 06:35 PM via web

Admin Functions

• Edit
• Remove

I saw another discussion related to email obfuscation so I though I would share my solution. I have several non-technical editors that wouldn't be confortable with a more elaborated solution such as ROT13 or Dan Benjamin's Enkoder. Additionally, I wanted a "set it and forget it" solution that could be completely managed from within Harmony.

This is a "Harmony-ified" version of Roel Van Gils's Graceful E-Mail Obfuscation.

The following solution involves replacing mailto URLs with a local path that is replaced via javascript or redirected to the user's email address. With javascript enabled, your email links will work as any normal mailto link.

If javascript is disabled, your /email/ links will be redirected to a mailto url. This works as intended in all browsers I tested, but some went about it differently. Safari and Chrome work seamlessly, instantly prompting your mail client just as a mailto link . FireFox works but presents you with a "You are being redirected" page first. IE immediately redirects, but then shows a blank page.

YMMV and any comments/improvements are welcome.

Instead of a traditional 'mailto' URL such as:

"Email Me":mailto:***@gmail.com

Use a local path such as:

"Email Me":/email/joshsuggs/gmail/com

Then configure a site redirect with the following options:

Incoming URL Path: email\/([A-Za-z0-9._%-\\+]+)\/([A-Za-z0-9._%-]+)\/([A-Za-z]{2,4})
Redirect To: mailto:\1@\2.\3
Use Regex: Yes

Then add the following JS to your template. (I'm using jQuery, so YMMV).

$('a[href^=/email/]').click(function() {
    var re = /\/email\/([A-Za-z0-9._%-\\+]+)\/([A-Za-z0-9._%-]+)\/([A-Za-z]{2,4})/;
    var href = "mailto:" + $(this).attr('href').replace(re, "$1"+"@"+"$2"+"."+"$3");
    $(this).attr('href', href);
  });

The regex matches any email I could come up with. Even something crazy like ***@gmail.com.

Tested browsers:

Mac OS 10.6: Chrome 7.0.503, Safari 5.0.1, FF 3.6.9, Opera 10.60 b8402
Vista Business: IE8, IE7, Chrome 6.0.472, FF 3.5.4, Safari 4.0.4

1. 2 Posted by Brendan Falkowski on 12 Sep, 2010 09:57 PM

   

   That's a smart idea. Not a definite dealbreaker but right-clicking the obfuscated link to copy the email would return the coded address for pasting elsewhere. This is how I handle mailto links personally to avoid Mail.app opening (paste into Gmail instead).

   // Update: Nevermind, didn't see the JS was reversing the obfuscation. That's a nice trick, great work!

   Admin Functions

   • Edit
   • Split
   • Remove

2. 3 Posted by Joshua Suggs on 13 Sep, 2010 03:42 AM

   

   You were correct the first time. Binding to the click event does copy the 'encoded' url but binding to mousedown seems to fix it.

   $('a[href^=/email/]').mousedown(function() {
       var re = /\/email\/([A-Za-z0-9._%-\\+]+)\/([A-Za-z0-9._%-]+)\/([A-Za-z]{2,4})/;
      var href = "mailto:" + $(this).attr('href').replace(re, "$1"+"@"+"$2"+"."+"$3");
       $(this).attr('href', href);
   });

   Now if you right click the link you will copy the real mailto url. Thanks for pointing this out!

   Admin Functions

   • Edit
   • Split
   • Remove

3. Steve Smith closed this discussion on 16 Nov, 2010 03:22 PM.

Comments are currently closed for this discussion. You can start a new one.