Email Protection with MooTools JavaScript

Discussion

1. keif

   I’d go against the anchor tag altogether, since it pretty much is a dead link if your JS breaks (it happens) or if JS is turned off.

   I figure using a span, and replacing it altogether with the generated anchor, or linking it to an actual page and using a ‘rel’ property to store the information, maybe…
2. david

   @keif: Didn’t think of that — awesome idea.
3. Steinmann

   I’m using rot13() to “encrypt” the email, and then javascript to decrypt it.

   Used a combo of urlencoding and htmlentities before. But I think thats useless…
4. Catar4x

   Nice and easy ! Thanks !
5. Andrei

   Span + background image of the url I think, just in case JS is switched off.

   Can spamailbots read alt tags?
6. david

   @Andrei: Yes.
7. Rich

   for jQuery:

   el = $('.email');
   el.each(function()
   {el.attr('href','mailto:' + el.attr('href').replace('|','@').replace('/',''));});
   

   let me know if there is a simpler way.

   thanks Dave..always awesome posts!
8. Dirk Sidney Jansen

   Why not redirect instead of obfuscate? This is my solution:

   The XHTML

     <a href="nospam.php" class="email" title="Email me.">David Walsh</a>
   

   The PHP (nospam.php)

     header("location:
     mailto:david@davidwalsh.name");
   

   or

   The MooTools Javascript (not quite sure about that …)

     window.addEvent('domready', function()
     {       $each($$('.prevent'),function(el)
     { 
             el.addEvent('click',function(event)
     {               event.preventDefault(); 
                 window.location.href =
     "mailto:david@davidwalsh.name";         }); 
         });   });
   

   What do you think?
9. david

   @Dirk: Very interesting!
10. Andy Couch

    One idea I had is to take your approach, but make the link work without javascript. So instead of linking to “/david|davidwalsh.name”, link to something like “email.html?david|davidwalsh.name” then have the email.html page explain what happened and why the link didn’t work if JavaScript wasn’t available. You could even provide instructions on how to manually recreate the email address with actually writing it out on the page. Not a perfect solution, but better than just returning a 404.

    Also, you could take advantage of URL re-writing to give you a cleaner email URL. Maybe something like “email/david|davidwalsh.name”.

    That’s my 2¢
11. Andy Couch

    Correction: “…recreate the email address withOUT actually writing it out on the page.”
12. david

    @Andy: Another good solution.
13. ^Nicki^

    gret stuff, could it be that this solution doesn’t work in IE ( using Outlook Express 6)?. I’m working with Mac Os, it works fine. But the Virtual Machine of Windows doesn’t accept this. Sorry for my bad english,

    greetings from germany
14. Ahmad Alfy

    wow!
15. Andrei

    @David: Cheers for the reply. Was thinking of a fallback for when JS is shut off.
16. peter

    newbie question :

    I am trying stuff with this script.
    Currently I have my e-mail setup like this

    <a href="/firstname_lastname|domain_ext" class="email" title="Send email">mail</a>
    

    and the javascript :

    $$('.email').each(function(el) {   
            el.set('href','mailto:' + el.get('href').replace('|','@').replace('/','').replace('_','.'));   
        });  
    

    but it shows up like this :
    firstname.lastname@domain_ext

    how can I have the script also change the second underscore ?

    I’m not asking if this is a good or useful way to obscure the address, I’m just learning mootools and would like to know how to handle multiple instances of the underscore.

    Do I need to wrap it inside a nested .each ?
17. Mark Aplet

    Hey David. Thanks for the great articles. I read your blog often. I think this is my first response so I hope it’s of value to you and your readers.

    I wanted to leave a comment for you with my $0.02 As stated above by others, having a link on the page is probably bad form and will produce a 404 error to a non JS enabled browser. I wrote an article about this similar topic a short wile back to http://www.visual28.com/articles/decrease-your-spam-by-address-munging

    In particular I really like the Javascript obscure methods. The last method described in the “Project Honey Pot” really seams to work well. Joe Mailer’s method works really well to, and does not require a lot of obfuscation legwork.

    I urge you and your readers to check it out as an option too. Perhaps you can make a mootools script so that it could be automated and less work to impliment.
18. Andy Couch

    @peter: I don’t use MooTools, but if it works the same as the standard JavaScript replace method, you would use replace(/_/g,'.');
19. peter

    just a quick note for anyone interested, I solved my problem aboove with the following code :
    replace(/[_]/gi,’.’)
20. Andy Couch

    @peter: In your example, the brackets aren’t necessary. In regular expressions, the brackets define a character set, which is used in searching for more than one character or a range of characters. Since you are searching for a single character, they aren’t needed in this case. Also, the i modifier tells the regular expression search to be case-insensitive. But since the underscore character does have a case, that bit is unnecessary as well. So replace(/_/g,’.’) would do the same as replace(/[_]/gi,’.’).
21. peter

    @Andy,
    many thanks for the explanation, learning everyday. regular expressions are still on a distant planet for me… I should have known that the brackets define a set though, just like in php and javascript where they are used for arrays.

    thanks again.
22. flash tekkie

    Just the replacement of ‘|’ is probably not the safest way to do it as you can also confirm from the study by Silvan Mühlemann: Nine ways to obfuscate e-mail addresses compared

    A tool for Mac OS X users that uses the similar techniques to ones Silvan tested, is a widget called obfuscatr also available from Apple Downloads.

    obfuscatr 1.1.0 was featured in MacWorld.
23. shaun

    could also use php to echo different parts of the email address…this isn’t that sophistocated, as some email spammers could scan the line an put it together….you could put a different number of characters in each echo statement to make it a little more difficult to pick apart.

    echo ('s');
    echo ('h');
    echo('a');
    echo('u');
    echo('n');
    echo('r');
    echo('o');
    echo('t');echo('o'); echo('o');
    echo('l');
    echo('e');
    echo('@hot');
    echo('mail');
    echo('.com');
24. david

    @shaun Your above code doesn’t prevent spam in any way. Many echo’s is meaningless — may as well echo out the entire address at once.
25. liam dilley

    If you were going to use similar and change text with in an element

    window.addEvent('domready', function(){
        $$('breadcrumbs').each(function(el) { 
            el.set('html' + el.get('html').replace('.html','.link')); 
        });  
    
    });
    

    How do you target the html in this way as this does not seem to work?
26. tips

    Your site is a refreshing change from the majority of sites I have visited. When I first started visiting web sites I was excited by the potential of the internet as a resource and was very disappointed initially. You have restored my enthusiasm and I thank you for your efforts to share your insights and help the world become a better place.
27. click

    Nice! We very enjoyed your site .
28. tekkie

    Release date of obfuscatr version 1.3.0 confirmed to be 1st August 2009.

    New version will feature CSS-obfuscation.
29. Oren

    @peter: You can add a recursive flag to .replace()

    http://www.w3schools.com/jsref/jsref_replace.asp look at example 3
30. chad

    also maybe add this to the beginning of the js function:

    el.set('html',el.get('href').replace('|','@').replace('/',''));
31. chad

    i guess it pays to read instructions :)
    js code:

    $$('.email').each(function(el) { 
    el.set('html',el.get('href').replace('|','@').replace('/',''));
    el.set('href','mailto:' + el.get('href').replace('|','@').replace('/','')); 
    });
    

    html code:

    /info|domain.com