Need help on fine tuning full proof email obfuscation

**PicnicTutorials** · Nov 21, 2012 15:34

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;

**felgall** · Nov 21, 2012 15:44

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>

**PicnicTutorials** · Nov 21, 2012 15:53

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>

**PicnicTutorials** · Nov 21, 2012 16:22

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?

**PicnicTutorials** · Nov 21, 2012 17:43

Ya I just checked on my desktop. I can't get either code example to work correctly. Thanks for looking!

**ralph.m** · Nov 21, 2012 18:00

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

me123@me.com

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

**PicnicTutorials** · Nov 21, 2012 19:51

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.

**PicnicTutorials** · Nov 21, 2012 21:00

Look at this obfuscator http://www.jottings.com/obfuscator/. I don't think the bots will ever read that

**ralph.m** · Nov 21, 2012 21:33

Originally Posted by EricWatson

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.

**PicnicTutorials** · Nov 22, 2012 03:48

Originally Posted by ralph.m

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.

**PicnicTutorials** · Nov 22, 2012 03:50

Felgall - or other - can you please run that OP code and get that bad boy working? I know it's possible!

**PicnicTutorials** · Nov 22, 2012 06:48

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>

**PicnicTutorials** · Nov 22, 2012 09:23

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>

**PicnicTutorials** · Nov 22, 2012 09:35

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>

**PicnicTutorials** · Nov 22, 2012 10:14

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.

**PicnicTutorials** · Nov 24, 2012 08:50

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

User Tag List

Thread: Need help on fine tuning full proof email obfuscation

Thread Tools

Display

Need help on fine tuning full proof email obfuscation

Bookmarks

Bookmarks

Posting Permissions