Archive for JavaScript

Email protection using CSS

Email Link Protection - a graceful and user-friendly technique This post originally appeared on my personal blog in March of 2005. It is till useful a half decade later, so finally posting it here. This code is also available on Snipplr as well.

Any spambot worth its salt spawned by evil genius could "guess" email addresses by skimming for all 'alias@'s and automatically concatenate them with the site's url base and any other domains found on the page, so in the javascript I separate the '@' from the alias.

Enough about the wheres and whys, here's some cut n' paste fun for your use. This code will use javascript to display a normal, clickable mailto: link on your page and if javascript is turned off you still get a screen-readable, selectable email address displayed using a CSS trick.

<style type="text/css">
.backwards {
unicode-bidi:bidi-override; direction: rtl;font-weight:bold;
}
</style>
<script type="text/javascript">
<!--
linkAddy=('alias' + '@' + 'yourdomain.com')
document.write('<a href="mailto:' + linkAddy + '">' + linkAddy + '</a>')
//-->
</script>

<noscript>
<p>Please email me at
<strong><span class="backwards">moc.niamodruoy@saila</span>
</strong>.<br /></p>
</noscript>

Here's a version for you really paranoid folks that don't want live links at all (or maybe you just want a tiny user obstacle to ensure necessity of correspondence), but you do want your email address to appear correctly if possible but with better protection, plus insurance if javascript is turned off:

<style type="text/css">
.backwards {
unicode-bidi:bidi-override; direction: rtl;font-weight:bold;
}
</style>
Please email me at
<span class="backwards"><script type="text/javascript">
<!--
backAddy=('moc.niamodruoy' + '@' + 'saila')
document.write(backAddy)
//-->
</script></span>
<noscript><strong>alias at
yourdomain dot com</strong></noscript>

Here's a working example:

Please email me at

Here's a few other ways to protect email addresses from spam bots. If you have a preferred method not listed here, please let me know in the comments.

  • Graceful Email Obfuscation article from A List Apart takes it up a notch, with an htaccess rewrite and redirect. Could be worth setting up for a large site where you need to add email links quickly and easy.
  • Hivelogic Enkoder Form - use their form to generate some javascript. Works great but relies on javascript to work.
  • Addressmunger.com - uses ASCII, JavaScript, and scrambling of letters in your email address.
  • K'nechtology Email Encryption - encodes email addresses in to hexadecimal values. This isn't very secure as it would be extremely easy for a bot to decode hex.

Comments