SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Need help on fine tuning full proof email obfuscation

    Using Css this flips the mirror image. In testing this is fullproof http://albertogasparin.it/scraps/201...on-css-anchor/. However, the css/html only you cant use mailto also. So it's unclickable. This guy http://albertogasparin.it/scraps/201...on-css-anchor/ has a almost near perfect solution. Using JS he makes it clickable and flips it. However it's a little buggy. But its proof of concept! On my ipad it works perfect. In firefox on click it loads default email program and fills the the send to box but with this ""%20%20%20%20email@domain.com%20%20%20%20%20. In IE like this "%20email@domain.com" and on click changes it back to reverse "moc.niamod@liame".

    So in a perfect world I'm hoping someone can fix the js. Then I will try and feed the backwards text with JS or other. Because if js fails I dont want it there. Its no longer clickable and if you copy and paste it it pastes the reverse text. Thats no good. So I'll do some noscript thing or something.

    Code JavaScript:
    <a href="#" onclick="this.href='mailto:'+ this.innerHTML.split('').reverse().join('')" style="unicode-bidi:bidi-override; direction: rtl;">
         moc.niamod@liame
    </a>&#x200E;

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It is picking up the spaces on either side of the email address and they end up each encoded as %20

    There are a couple of ways to fix it.

    1. Simply get rid of the spaces so that the email address ins the only thing inside the tad.
    2. trim() the leading and traimilg spaces from the calue before splitting it into individual characters. Modern browsers support the trim() method on strings but depending on which older browsers you want to support you may need to implement your own.

    Code:
    <a href="#" onclick="this.href='mailto:'+ this.innerHTML.trim().split('').reverse().join('')" style="unicode-bidi:bidi-override; direction: rtl;">
         moc.niamod@liame
    </a>
    and to define trim for those browsers where it doesn't exist simply add the following JavaScript.

    Code:
    if (!String.trim) {
    String.prototype.trim = function() {
    return this.replace(/^\s*(.*?)\s*$/,"$1");} 
    }
    Alternatively you could just use the replace instead of trim:

    Code:
    <a href="#" onclick="this.href='mailto:'+ this.innerHTML.replace(/^\s*(.*?)\s*$/,"$1").split('').reverse().join('')" style="unicode-bidi:bidi-override; direction: rtl;">
         moc.niamod@liame
    </a>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I figure the space isssue soon after posting. Like this? In IE it still flips the text on click

    <a href="#" onclick="this.href='mailto:'+ this.innerHTML.trim().split('').reverse().join('')" style="unicode-bidi:bidi-override; direction: rtl;">moc.niamod@liame</a>
    <script type="text/javascript">
    if (!String.trim) {
    String.prototype.trim = function() {
    return this.replace(/^\s*(.*?)\s*$/,"$1");}
    }
    </script>

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Testing on my IPad the following code that you edited in doesn't seem to work.

    <a href="#" onclick="this.href='mailto:'+ this.innerHTML.replace(/^\s*(.*?)\s*$/,"$1").split('').reverse().join('')" style="unicode-bidi:bidi-override; direction: rtl;">
    moc.niamod@liame
    </a>

    Does it work for you?

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ya I just checked on my desktop. I can't get either code example to work correctly. Thanks for looking!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    There doesn't seem to be any perfect way to encode an email address. I prefer a contact form, but where a client wants the email address there too, I just use this handy encoder form:

    http://hivelogic.com/enkoder/

    It only works with JS on, of course. So I tend to encode the whole line that invites the visitor to get in contact via email. That way, if JS is off, the user doesn't see anything at all, and just has to use the contact form instead.

    Another option I like is to retype the email address by replacing each character in numeric character references. For example, and address like

    me123@me.com

    would be written as

    &#x6D;&#x65;&#x31;&#x32;&#x33;&#x40;&#x6D;&#x65;&#x2E;&#x63;&#x6F;&#x6D;

    I'm not sure how that plays with screen readers, though.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I was looking at this enkoder Ralph. It looks pretty good at first. But thinking about it. So...

    The source code is...
    Code JavaScript:
    <script type="text/javascript">
    var x="function f(x){var i,o=\"\",l=x.length;for(i=0;i<l;i+=2) {if(i+1<l)o+=" +
    "x.charAt(i+1);try{o+=x.charAt(i);}catch(e){}}return o;}f(\"ufcnitnof x({)av" +
    " r,i=o\\\"\\\"o,=l.xelgnhtl,o=;lhwli(e.xhcraoCedtAl(1/)3=!29{)rt{y+xx=l;=+;" +
    "lc}tahce({)}}of(r=i-l;1>i0=i;--{)+ox=c.ahAr(t)i};erutnro s.buts(r,0lo;)f}\\" +
    "\"(2),8\\\"\\\\82/<:'-be=]320\\\\02\\\\02\\\\\\\\33\\\\04\\\\02\\\\\\\\I=(T" +
    ",PtS\\\\\\\\06\\\\04\\\\03\\\\\\\\17\\\\00\\\\02\\\\\\\\BB02\\\\0?\\\\*323\\"+
    "\\0t\\\\0;03\\\\\\\\8s-)&,3701\\\\0Q\\\\[U30\\\\0X\\\\Q[KCFjWIAVki77\\\\1\\" +
    "\\\\\\\\\\\\\"y\\\\~`oy(a;Tgb5r02\\\\\\\\0[03\\\\\\\\WK7[03\\\\\\\\03\\\\00" +
    "\\\\01\\\\\\\\37\\\\00\\\\00\\\\\\\\25\\\\02\\\\02\\\\\\\\5M02\\\\\\\\81,6:" +
    "4\\\\7(\\\"}fo;n uret}r);+)y+^(i)t(eAodrCha.c(xdeCoarChomfrg.intr=So+7;12%=" +
    ";y++)y82i<f({i+)i+l;i<0;i=r(foh;gten.l=x,l\\\"\\\\\\\"\\\\o=i,r va){,y(x fo" +
    "ntincfu)\\\"\")"                                                             ;
    while(x=eval(x));
    </script>

    And its generated source code is...
    Code JavaScript:
    <a href="mailto:me@gmail.com?subject=Hi" title="">Email Me</a>

    So if the bot cant read js or generated code your good. If either yes not good.

    Using this way. Just quick and dirty offers cleaner code and does the same thing...

    Source code...

    Code JavaScript:
    <span id="hide"></span>
    <script type="text/javascript" src="hide.js"></script>

    In hide.js...
    Code JavaScript:
    document.getElementById('hide').innerHTML = '<a href="mailto:hideme@mydomain.com">hideme@mydomain.com</a>';

    Generated source code...
    Code JavaScript:
    <span id="hide"><a href="mailto:hideme@mydomain.com">hideme@mydomain.com</a></span>

    As you can see they both spit out the same generated source code. Although my second one here keeps it completely out of the html. This is just one of 10 different ways I've been messing with. Trying to see if I can find a better way. A pure CSS/PHP way is the best. Ive got a couple of those but they dont hide it very well.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Look at this obfuscator http://www.jottings.com/obfuscator/. I don't think the bots will ever read that

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    So if the bot cant read js or generated code your good. If either yes not good.
    I don't think they can, but perhaps I'm wrong? Not sure ... Of course, humans can read the generated code, and plenty of them are spammers, so you are never going to get off scot-free.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I don't think they can, but perhaps I'm wrong? Not sure ... Of course, humans can read the generated code, and plenty of them are spammers, so you are never going to get off scot-free.
    Pretty sure Google can read read generated code. So smart bots probably can.

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Felgall - or other - can you please run that OP code and get that bad boy working? I know it's possible!

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Look at this bad boy! by Eric. Js on or off works perfect. href is hid and the link email text is hid. I like to use the email in the anchor text not "Email me" or other. As the article in OP says the css display none is fullproof. I wanted to use the other css ways. But the content property one firefox and chrome cant copy the text. And the reverse css one the text is copied in reverse.

    Code JavaScript:
    <style type="text/css">
    #hide4 b, #hide4 noscript b {
    	display:none;
      }
    </style> 
    <span id="hide4"><noscript>me@d<b>no</b>omain.com</noscript></span>
    <script type="text/javascript">
    coded="Ey@H7EYdP.M7E";key="M95HCfIoulPGBO8w4xT271e3LQFZXvDamhpySr6izVJkYEbg0cNRdsKjtUWnqA";shift=coded.length;link="";for(i=0;i<coded.length;i++){if(key.indexOf(coded.charAt(i))==-1){ltr=coded.charAt(i);link+=(ltr)}else{ltr=(key.indexOf(coded.charAt(i))-shift+key.length)%key.length;link+=(key.charAt(ltr))}}document.getElementById("hide4").innerHTML=("<a href='mailto:"+link+"'>me@d<b>no</b>omain.com</a>");
    </script>

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I still would like to use the OP fixed - but... Look at this. Pretty much perfect. Possibly the best on the web.

    1) Use this ROT13 JavaScript coder/decoder http://tornio.info/rot13.html and put in your entire email - including the mailto, href, and link text

    2) grab the ROT13 code and insert it into the below code - Done! Best ever. Works with JS on or Off. Hides email href mailto: link and text in the link both js on and off 100%. I did away with the noscript because the getID just inserts it in it's place.

    3)
    Code JavaScript:
    <style type="text/css">
    #email b {
    display:none;
    }
    </style> 
    <span id="email">me@d<b>no</b>omain.com</span>
    <script>
    document.getElementById("email").innerHTML=("<n uers='znb:zr@qb.pcz'>zr@qb.pcz</n>".replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
    </script>

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    using something like this I can do away with the extra "no" and just switch it's order but I can't get the browsers to be able to copy all the text. That's important. The css reverse order and content property you will find elsewhere on the web suffer from the same copy/paste problem.

    Have at it. Let me know if some one finds a way to copy and paste all the text...

    Code:
    <style type="text/css">
    #hide {
    display:inline-block;
    }
    #hide b {
    float:left;
    font-weight:normal;
    }
    </style> 
    <span id="hide">@domain.com<b>me</b></span>
    <script>

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    As a side not. I scrambled the above code after posting because i realized it was my email. It comes out poorly formatted. However if you grab your own from the above mentioned decoder the formating will be perfect.

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    To Update the thread, here is what I came up with. The 3 best ways that I was able to put together to graceful degradation email address obfuscation. http://www.visibilityinherit.com/cod...n-tutorial.php


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •