Keep Email Addresses Safe From Spammers (with jQuery)

So many of us don’t realise just how evil the world really is. We remain in blissful ignorance, thinking that simply because we wouldn’t want to hurt anyone, the same applies to everyone else.

The reality though, is that there are lots of people out here on the interwebs who have both the intelligence and the resources to do much more harm than we can imagine. One such type of crook is the spammer. Ever wondered how you ended up receiving some very random—and often embarrassing—emails from people or companies that you wouldn’t have given a second glance, let alone subscribe to?

I’ll tell you why: you displayed your email address as plain text somewhere online.

In a similar manner to how search engines like Google “crawl” and index your content, spammers have written special “robots” that crawl your content looking for the one character that is in all email addresses: the @ symbol. From there, the algorithm is very simple: read all the characters to the left until you find a space, then read all characters to the right until you find a space, then combine the two strings with the @ symbol between them.

Patikana!

Hopefully this makes you appreciate the necessity of protecting your email addresses. No? Still think you’re safe? Perhaps by swinging just a couple of statistics I may be able to drive the last nail into the coffin of your naivety.

Did you know that this year, more than 60% of all email traffic has been spam?! Here’s proof. And did you know that in the US alone, spam management costs businesses more than KES 6 trillion every year? —proof

The measures we can take are so simple, yet the repercussions are so disproportionately massive.

So how can you keep your email addresses safe from the evil geniuses of the internet?

1. For Web Developers

As a web developer, you have a responsibility to ensure that your clients are safe. You don’t just secure their websites from hackers, but also regularly comb through the site identifying every potential risk, and that includes email addresses. In fact, I wouldn’t think it too far fetched that someone would write a script that limits the username values in a brute force attack to the email addresses found on that particular domain.

The easiest way to do this, in my experience, is to use jQuery. The idea of the script is to combine the email address from building blocks, much like lego. Since web crawlers don’t run JavaScript, it means your clients’ email addresses will not only be safe, but will still remain readable by users.

Here’s how you would write an email link:

<a class="email" data-address="info" data-domain="skylinedesign" data-ext=".co.ke">info [at] skylinedesign.co.ke</a>

Then run this jQuery script when the document is loaded, essentially “activating” the email link.

function activateEmail ( selector ) { // define
	$( selector ).html( function() { // set text of selected element after...
		var adr = $( this ).data( 'address' ),
			dom = $( this ).data( 'domain' ),
			ext = $( this ).data( 'ext' );
		return adr + '@' + dom + ext; // ... constructing email address
	}).attr( 'href', function() { // make it clickable
		return 'mailto:' + $( this ).html();
	}).attr( 'target', '_blank' ); // open in a new tab
}

$( '.email' ).activateEmail(); // run it

// kazi kwisha

I’d recommend you include this script in all your websites’ main .js files.

2. For Non-techies

The easiest way to stay safe if you need to display an email address on your website is to either:

  1. use the human-readable version (e.g. info [ at ] skylinedesign.co.ke) which excludes the @ symbol, or
  2. install a plugin that obfuscates email addresses for crawlers (e.g. Obfuscate Email or Simple Mail Address Encoder).

If anyone would like, I can convert the script above into a WordPress plugin that one can install with one click. Just let me know in the comments.

So stay safe. "There is evil in this world."

“There is evil in this world.”

So stay safe.

  • Paras

    Yes please to WP plugin!

    P.S. Love the new Skyline mobile UI! Very clean, user-friendly and sophisticated.

    • Thanks Paras!

      I’ll work on the plugin over the weekend (read free time) then post it next week.

  • Yes for me to, to that WP plug in. Didn’t know that was why people used the human readable email description (blonde, I know).

  • Tony

    Thank you for this blog. I’ll make sure to include this in my coding.

  • That’s so useful for me and my developers friends but the same code is run in HTML5 development?

signed. martians.™