play/type blog

We are creating Germany's juiciest event platform, boomloop.com. Because we love the Internet more than our own mothers. See for yourself. check out boomloop.com


Here’s a little thing I wrote for this blog. You can try it out straight up: click on the contacts link on the sidebar, then on ‘send mail to rany’. This will open in your mail application with my email address, as it should.

Now turn off javascript and reload the main page. You’ll see ‘send mail to rany’ again, but this time the link will take you to http://playtype.net/contactto/new/enal+cynlglcr+arg. This is what the spam bots are going to see. Clicking here takes you to a form that forwards your message without divulging the email in question.

This technique is called ‘Graceful email obfuscation’, and you can read up about this on a list apart in this article.

This behaviour is wrapped into the graceful mailto obfuscator rails plugin. once you’ve installed this, your mail_to helper will produce obfuscated links which behave exacty like on this page. Niceness!

Requirements

Lowpro and Prototype. Lowpro enhances Prototype with some nifty unobtrusive shit. Download from dan’s svn repository. Currently that’s 0.5: http://svn.danwebb.net/external/lowpro/tags/rel_0.5/dist/lowpro.js.

Put that in /public/javascripts then include it in your application layout:

<%= javascript_include_tag "lowpro" %>

Example

Calling mail_to(“me@mail.com”, “mail me”) will generate the following link:

<a class="obfuscated" href="/contactto/new/zr+znvy+pbz">mail me</a>

For users who do not have javascript turned on, /contactto/new collects a message which can be submitted to an action which sends the email, without it ever being divulged.

When javascript is turned on, a behaviour converts the obfuscated anchor into a normal mailto: link with the orignal email address. spam bots will now bounce off your site like frustrated popcorn.

Installation

Install the plugin:

./script/plugin install http://svn.playtype.net/plugins/graceful_mailto_obfuscator/

Then add the following lines to your application.js:

Event.addBehavior({
  "a.obfuscated": EmailDecoder
});

Include the EmailDecoder behaviour in page head:

<%= javascript_include_tag "email_decoder" %>

Graceful Degradation

Now you’ll need something to handle /contactto/new for those people who are not using javascript. the easiest thing is to have a textarea here for the message. when submitted, the server sends the email ob behalf of the user, without ever divulging the email address. here’s how to do this:

  1. create a form that takes a message and passes param[:email] along to the create action after a submit.
  2. inside create, decode the email like this: email = Loopy::EmailObfuscator.decode_email(CGI.escape(params[:email]))
  3. send an email to this address from the server.

Done!