Jason Hendriks

nicholaswilson

Hiding email addresses from spammers has a long history. There are some obvious golden goals, like making the process seamless to your visitors, and be practicable to implement. The one that often gets left out is accessibility, but in some areas this is actually a legal requirement.[1]
<h4>The method</h4>
To my knowledge, this plugin implements the best method so far devised. Credit goes to Roel Van Gils for this technique, which he calls Graceful Email Obfuscation.[2] The basic idea is actually very simple: use PHP and JS to hide the address effectively, and make sure the fallback can be used easily by blind or visually impaired users by using a text-based CAPTCHA.
The PHP code takes passed-in emails and generates simply-encoded string using alphabetic characters. It is therefore very hard to imagine what sort of spammer’s parser could possibly detect it. The only way is to load the whole DOM and jQuery to run the decryption routine. As far as we know, no bots go to those lengths, but it adds essentially no overhead if the theme or any other plugins already load jQuery; otherwise a fraction of a second might be added to page load.
<h4>Comparisons with other plugins</h4>
Amazingly, no other WordPress plugins seem to use this method, either offering very little spam protection, or not coping with JavaScript turned off (3-10% of users). <a href="http://www.privatedaddy.com/" rel="nofollow ugc">Private Daddy</a> comes closest, but falls at the last hurdle by offering an image CAPTCHA with no non-visual alternative. Clunky though my first code bash is, it seems to the best available at the moment if accessibility is really important to you (of course, if I did not think that, I would not have written this). There is a similar Drupal plugin.[3]
<h4>Comparisons with other methods</h4>
The most viable alternative methods are:
<ol>
<li>Using images (cf. <a href="http://www.facebook.com/" title="Facebook" rel="nofollow ugc">Visagefolio</a>). This requires typing and is a pain for everyone.</li>
<li>Poor “test [at] example [dot] com” style text replacements provide no protection and annoy users.</li>
<li>Clever things like outputting “moc.elpmaxe@tset” and using CSS unicode rules to reverse it. Unfortunately these cause trouble for the blind and in some browsers make it confusing to copy and paste the link.</li>
<li>Using XML comments or CSS <code>display: none;</code> to remove elements inside the link text. There is still no clickable link, which makes it hard for the blind to use.</li>
</ol>
<h4>JavaScript fallback</h4>
If there is no JavaScript, the user is taken to a page on the site using an empty content box where they are asked a simple text question to check whether they are a human. Basic sums are asked at the moment, though a wider range of questions could be added using the <a href="http://testCAPTCHA.com" rel="nofollow ugc">testCAPTCHA.com</a> service.
<h4>References</h4>
<ol>
<li>See particularly ‘508’ legislation in America.</li>
<li>Original description on <a href="http://www.alistapart.com/articles/gracefulemailobfuscation" title="A List Apart: Graceful Email Obfuscation" rel="nofollow ugc">A List Apart</a>.</li>
<li><a href="http://drupal.org/project/geo_filter" rel="nofollow ugc">Drupal plugin</a></li>
</ol>
Further reading:
<ol>
<li><a href="http://technology.kencarlson.org/general/graceful-e-mail-obfuscation/" rel="nofollow ugc">GEO review</a> by Ken Carlson</li>
<li>Spam obfuscation comparison recommending use of this method for 508 compliance: <a href="http://doteduguru.com/id415-e-mail-obfuscation.html" rel="nofollow ugc">.eduGuru article</a> by Michael Fienen</li>
</ol>
Some notes and future details on <a href="http://www.nicholaswilson.me.uk/2010/04/notes-on-good-email-obfuscation/" rel="nofollow ugc">my site</a>

Graceful Email Obfuscation

Hiding email addresses from spammers has a long history. There are some obvious golden goals, like making the process seamless to your visitors, and b …

Spam is website publishers #1 concern, we wanna share our and our visitors’ emails to those who should have access to them, but don’t want spam harvesters stealing them and sending garbage to us. A lot of techniques had been developed to hide our emails from these delinquents, while having them shown to real people.
And together with spam harvesting, on 15 June 2009, Matt Cutts, a well known software engineer of Google, announced that Google Bot will no longer ignore nofollowed links for PageRank, and now we lose PR/link juice for every link we add to our pages, even if we use rel=”nofollow” on them. So, now we must hide links from Search Engines too!
I’ve been searching for an ultimate obfuscation solution for both emails and URLs, that would be user-friendly for me the content publisher, and for my visitors. I’ve seen a lot of solutions, some that inspired me, but none that would fit my needs. It was time to start coding 🙂
<a href="http://Hikari.ws/email-url-obfuscator/" rel="nofollow ugc">Hikari Email & URL Obfuscator</a> plugin obfuscates emails and URL links, to hide them from spam harvesters and Search Endigne crawlers. It uses ROT13 or cc8b to encode each link while PHP is building the page, then uses JavaScript to decode it and show it to the user. If JavaScript is not available, it uses CSS to hide them.
It doesn’t use shortcodes, it works directly over HTML links, parsing and obfuscating them. By default it filters all texts in posts, comments, comments authors and text widgets, but you can manually use it anywhere you want.
Basically, Hikari Email & URL Obfuscator plugin searches for links that contain URLs and emails on their <code>href</code> atrribute. For each found link, it is replaced by an obfuscated string, and a JavaScript function is called, having in its parameters the required data for JavaScript to decode and recreate the original link.
The obfuscated string is then merged back by CSS to a readable URL/email text, so that human visitors can read it while spam harvesters and searchbots will not be able to detect it as a valid email/URL.
And, for JavaScript-enabled visitors, this string is replaced by a link with the exact same behavior and attributes of your original link, so that they can interact with it as if there was no obfuscation in place! 
(Really, there is no way to diferenciate an obfuscated link generated by JavaScript from the original link, unless the HTML document’ source is verified or a development tool as FireBug is used!)
It uses 4 obfuscation techniques, 2 JavaScript solutions and 2 CSS alternatives for JavaScript-disabled browsers.
For CSS, it may revert the link string while PHP is building the page and then CSS reverts it back. Or it may add garbage text between the link, and CSS prevents this extra text from being rendered, so any user-agent that doesn’t use CSS can’t find the link but browsers show it clearly.
Now, when JavaScript is available, it is delivered with the original link, encoded using ROT13 or cc8b by PHP. The link is then decoded back by JavaScript and added to the page, so that real users don’t even notice the original link was replaced.
And, disregarding the used technique, we content publishers must do nothing different while building our content, just activate the plugin and it does everything else for us 🙂
I dedicate Hikari Email & URL Obfuscator to Ju, my beloved frient ^-^
<h4>Features</h4>
<ul>
<li>Works instantly, no need to edit your posts to have your links obfuscated: Hikari Email & URL Obfuscator plugin automatically detects them and starts obfuscating as soon as it is activated.</li>
<li>Unobstructive JavaScript: links are obfuscated and shown for visitors with and without JavaScript, forget those “you must enabled javascript to see this email” messages!</li>
<li>They are real links!: any attribute you can use in an <code><a></code> tag you also can use in obfuscated links (JavaScript version only).</li>
<li>Customization: CSS doesn’t let we have real links, but we can at least choose if our obfuscated text will have email only, text only, or both!</li>
<li>XHTML 1.1 valid: obfuscated links and JavaScript code are valid even in XHTML 1.1 standard. It makes the plugin valid inclusive in HTML 4.0, XHTML 1.0 Strict, XHTML 1.0 Transitional and HTML5!</li>
</ul>
<h4>Advantages over other obfuscation solutions</h4>
<ul>
<li>Your visitors will see your emails and URLs even if they keep JavaScript disabled.</li>
<li>Automatic: you don’t need to take special actions to start obfuscating, as using shortcodes in place of links or an external tool to get your obfuscation code. Just normally use your links in your posts and let the plugin do the rest!</li>
<li>Sitewide: instantly works in your existing posts, pages, comments and text widgets, just after you activate it.</li>
<li>Diversity: for each link, it randomly chooses between 2 CSS and 2 JavaScript obfuscation methods, making it harder for spammers to crack it.</li>
<li>Extensible: you can call it manually, and add it to other plugins and themes filters.</li>
<li>Customizable: use custom parameters to force or avoid specific links from being obfuscated, and to define how non-JavaScript obfuscation will behave.</li>
</ul>

Hikari Email & URL Obfuscator

Email and normal links are obfuscated, hiding them from spambots. It automatically encodes each link, then uses JavaScript to decode and show them.

Graceful Email Obfuscation vs Hikari Email & URL Obfuscator