Fight Spam With JavaScript

Michael Deering April 15th, 2008
4 Comments

I’m willing to bet that email harvesting spam crawlers don’t have any capabilities to deal with JavaScript.

As an alternative to the many readable only to a human expressions such as mdeering – at – mdeering – dot – com why not try the following.

If you are visting this site with JavaScript disabled you will see content matching the following image in the “Quick Contact” area in the footer of all this sites pages.

Contact Information With JavaScript Disabled

If you are visiting this site with JavaScript enabled you will see content matching the following image in the “Quick Contact” area in the footer of all this sites pages.

Contact Information With JavaScript Enabled

My application view template renders the following div with the id of ‘quick_contact’ on every page of this site. 

<div class="footer_column">
  <h3>Quick Contact</h3>
  <div id="quick_contact">
    To avoid spam this information is only available to browsers with javascript enabled.
  </div>
</div>

When the page loads the JavaScript function ‘addQuickContactInfo’ is called to populate my contact information.


function addQuickContactInfo() {
// Do the minimum to hide my email with this replace
 var email        = 'spam@example.com'.replace(/(spam|example)/g, 'mdeering');
// Use the same technique as above to hide my phone number
 var phone_number = '555.444.3333'.replace(/555/, '780').replace(/444/, '906').replace(/3333/, '6632');
 this.addClassName('vcard');
// Clear out the static content from the div
 this.update('');
// Next 4 lines just populate the div with the information
 this.appendChild( $div( {'class': 'fn org'}, 'Michael Deering' ) );
 this.appendChild( $div( {'class': 'email'}, $a( {href: 'mailto:' + email}, email ) ) );
 this.appendChild( $div( {'class': 'url'}, $a( {href: 'http://mdeering.com'}, 'http://mdeering.com' ) ) );
 this.appendChild( $div( {'class': 'tel'}, $span( {'class': 'type'}, 'Cell' ), ': ', $span( {'class': 'value'}, phone_number ) ) );
}

Event.addBehavior({
  '#quick_contact':               addQuickContactInfo,
});

I’m using the LowPro and Prototype JavaScript libraries here obviously.

What do you think, did I just send my spam filter into overdrive, or is this a viable alternative to cryptic contact information?

Tags