Need help on fine tuning full proof email obfuscation

JavaScript
1

Using Css this flips the mirror image. In testing this is fullproof http://albertogasparin.it/scraps/2011/02/rtl-better-email-obfuscation-css-anchor/. However, the css/html only you cant use mailto also. So it’s unclickable. This guy http://albertogasparin.it/scraps/2011/02/rtl-better-email-obfuscation-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.

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

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.
<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.

if (!String.trim) {
String.prototype.trim = function() {
return this.replace(/^\\s*(.*?)\\s*$/,"$1");} 
}

Alternatively you could just use the replace instead of trim:

<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>
3

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

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

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

6

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:

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

[noparse]me123@me.com[/noparse]

would be written as

me123@me.com

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

7

I was looking at this enkoder Ralph. It looks pretty good at first. But thinking about it. So…

The source code is…

&lt;script type="text/javascript"&gt;
var x="function f(x){var i,o=\\"\\",l=x.length;for(i=0;i&lt;l;i+=2) {if(i+1&lt;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&gt;i0=i;--{)+ox=c.ahAr(t)i};erutnro s.buts(r,0lo;)f}\\\\" +
"\\"(2),8\\\\\\"\\\\\\\\82/&lt;:'-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&lt;f({i+)i+l;i&lt;0;i=r(foh;gten.l=x,l\\\\\\"\\\\\\\\\\\\\\"\\\\\\\\o=i,r va){,y(x fo" +
"ntincfu)\\\\\\"\\")"                                                             ;
while(x=eval(x));
&lt;/script&gt;

And its generated source code is…

&lt;a href="mailto:me@gmail.com?subject=Hi" title=""&gt;Email Me&lt;/a&gt;

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…


&lt;span id="hide"&gt;&lt;/span&gt;
&lt;script type="text/javascript" src="hide.js"&gt;&lt;/script&gt;

In hide.js…

document.getElementById('hide').innerHTML = '&lt;a href="mailto:hideme@mydomain.com"&gt;hideme@mydomain.com&lt;/a&gt;';

Generated source code…

&lt;span id="hide"&gt;&lt;a href="mailto:hideme@mydomain.com"&gt;hideme@mydomain.com&lt;/a&gt;&lt;/span&gt;

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

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

9

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. :rolleyes:

10

Pretty sure Google can read read generated code. So smart bots probably can.

11

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

12

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.

<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

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.

<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

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…

<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

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

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/code/graceful-degradation-mailto-email-address-obfuscation-tutorial.php