CSS Copy and paste problem

Question

Hi

I've developed a system in my application where emails are picked up with a regex, and then reversed in the source (to thwart bots). I then add the span class 'obfuscate email'. I then use CSS to reverse the the text back to be displayed and Javascript make sure that mailto: links still work.

I was pretty happy with my solution until I realised that copying and pasting the email puts it in the clipboard backwards. I was wondering if there was any way I could remedy this? I've been testing in Firefox 3 for OS X.

The page in question is available here: http://www.leaklocations.com.au/contact-us/

To see the problem, simply copy and paste the email on that site.

Answer 1

You can use the same Javascript to reverse the text as well as the mailto links. If the user doesn't have Javascript, then you can either settle for this problem or use an image.

Answer 2

Seriously, is it worth all this effort to obfuscate email addresses? Once the email makes it into a spammer's hands, it's all over. Better to have a good spam filter instead.

And if you use JavaScript to reverse the email addresses back again you are adding extra work for the browser on page load. If JavaScript is turned off or a user is on a mobile device that doesn't support JavaScript, they are screwed too.

Answer 3

Why not use something like MailHide from the reCaptcha folks to hide email addresses instead?

Answer 4

I personally think it's going a bit over the top, but if you really want to obfuscate the address, why not obfuscate it in a human readable way? Instead of reversing the address, make the server output "info at leaklocations dot com dot au" and get javascript to fix it up?

If you wanted to stick to using the RTL CSS method, you could try playing around with the unicode character to reverse text: \u202E I'm not sure if that will help, but it's worth looking at

To see how this works, run this javascript:

alert("one \u202E two \u202E three")

and it'll output "one owt three"