Making obfuscated email address on contact page clickable
I decided in favour of allowing visitors to use their own email client instead of a webform for the benefit of their own record keeping, and rather than using an image of the address or javascript encryption (incase they have them disabled in their browser) I went with a textlogo shrunken to normal-size text with inline CSS using output of the automatic generator from Email Mini-logo
I want to keep it clickable but without the address on the page itself I have only found two non-javascript methods that do this.
1. Transparent munging using HTML entities or URI escape codes on seperate pages referred to via CSS (works in IE and Firefox only)
contact.html (minimal example):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Contact us</title>
<link rel="stylesheet" type="text/css" href="hidden.css" >
</head><body><pre style="font-size: 1.34px; line-height: 1px; letter-spacing: 0px; -moz-binding: url(hidden.xml#entities)">
<a href="#" class="escaped" style="text-decoration: none;">(Text-logo of email)</a>
</pre></body></html> hidden.css file for IE-based browsers (trident engine):
A.escaped:active {
background: url("mailto:(escaped address [@ = %40 etc.])?subject=(insert subject)&body=(insert body)");
}
hidden.xml file for Mozilla-based browsers (gecko engine):
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:h="http://www.w3.org/1999/xhtml">
<binding id="entities">
<content>
<h:a href="(format of mailto:[email protected]?subject=(insert subject)&body=(insert body) converted to HTML decimal and hexadecimal entities [@ = @ or @ etc.])" style="text-decoration: none;">
<children/>
</h:a>
</content>
</binding>
</bindings>
2. Using the service at tinyurl.com to redirect to the mailto protocol. (entering mailto:[email protected] as the URL then using the resulting http://tinyurl.com/TheCode address as the link)
change one line in contact.html to:
<a href="http://tinyurl.com/TheCode" style="text-decoration: none;">(Text-logo of email)</a>'
Method #1 is limited to the two major browsers, but will always work on them and for other browsers I can put an audio file of the address being spoken into the link instead of #
Method #2 should work in all browsers (no subject or body), but only as long as tinyurl supports it, and relies on trusting them with the address.
Which of those two would you choose to make the address clickable?
Abhishek Reddy posted this at 11:53 — 16th October 2006.
He has: 3,348 posts
Joined: Jul 2001
Wow, those are pretty neat tricks. Thanks for sharing.
I would not consider using the first method at all for the general case. It simply supports too few browsers.
I would consider a modified version of the second method. Rather than using tinyurl to rewrite the URL, perhaps mod_rewrite or an Apache redirect in the site's own domain would work:
.htaccess:Redirect /mail mailto:[email protected]
<a href="http://example.com/mail" style="text-decoration: none;">(Text-logo of email)</a>
It would not surprise me, however, if harvesters can extract the address from that.
A problem I have with most email address obfuscators is that they disable some operations that I frequently use. For example, right-clicking a mailto link and selecting "Copy email address" to save it to clipboard, instead of clicking it, loading my email client, and extracting it from there. Partly the point of a URI is to have machine-readability so that tasks like these can be done.
I would more readily invest effort in honing my spam filters than obfuscating my mail links.
myrolemodel posted this at 01:07 — 19th October 2006.
They have: 2 posts
Joined: Oct 2006
I think that should still work in Firefox with the XBL method in #1. If you're "extracting it" from the email client to use in gmail or another webmail service there is an extension also for Firefox that opens mailto: links in webmail - https://addons.mozilla.org/firefox/206/
It's a shame this point has been exploited by automated email harvestors, leaving us with the job of filtering the spam after the fact.
I simply prefer the "prevention is better than a cure" approach, which is why I went for the most transparent method of obfuscation I could find. The CSS trick at least is visible in all browsers. I can always put a form on the same page.. which probably needs captchas these days to prevent direct spam - another example of bad accessibility being the only alternative to spam filtering
Abhishek Reddy posted this at 03:30 — 19th October 2006.
He has: 3,348 posts
Joined: Jul 2001
I mainly use Konqueror (KHTML engine) these days. Neither the CSS nor XBL schemes work with it. That's the drawback with relying on non-standard features.
It's also highly unlikely to work on any Links variant, Dillo, or wget, all of which I sometimes use. I'm concerned about this because an email address is a fundamentally important piece of information for humans -- not something that degrades gracefully. If, for instance, I'm operating on a remote computer, or a broken/incomplete operating system, these are the tools I'd use to fetch their address. (Been there on several occasions.)
I guess one can justify case-by-case priorities by volume of spam, target audience, and so on. I agree that there is usually a troublesome tradeoff. Yet, while training your spam filters would take more time and effort, it's often better for you (say, as a company) to do that, than for your visitors (say, customers) to encounter difficulties. But yes, sometimes that's just not viable.
It's a good thing you pointed out that Firefox extension too. To some extent, client technology should improve like this to accommodate abuse-preventing measures. I think this will happen in the future, so I tend to reluctantly accept some un-accessible techniques as a stopgap solution.
By the same token, bots may improve to circumvent them... sigh.
Welcome to TWF, by the way. An interesting first thread.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.