RA-captcha - An idea for ajax based captcha for rails applications.

While working on a new feature for paahijen-Scratchpad, we needed a captcha mechanism to keep the spam-bots out of the door! Since some of our users may not be quite comfortable with typing convoluted roman alphabets, we needed a different system. Honestly, I was too lazy to try out all the Rimage giri to get something useful and somehow wanted a mechanism, which is lightweight, easy to implement (lesser code, no new learning.. ;-) ). Somewhere, I had read about "arithmetic" captcha, and we decided to use it. We just hit upon an interesting idea... to use Ajax for captcha.. Hence the name RA-captcha (rails ajax captcha)..

The idea is fairly simple.. What it basically does is uses link_to_remote to update the contents of a "div" in the form dynamically with a text for a simple arithmetic equation. The equations is so simple that a 5th grade average student can do them without troubles.. eg. the equation will be something like "8 + 2 = " and then an input text box is provided to enter the value.. Though this technique uses "link_to_remote", it is not too hard to use other ajax methods for the rails as the need be!

Here is a simple code that explains the idea... The code is not perfect and I am not a rails expert, Also it doesn't do any validations than minimum.

Create an application "ajax-test" using rails ajax-test

We are going to add a controller called "main" controller and corresponding views. For this example we don't need any ActiveRecord models.

script/generate  controller main

We are going to create the view for this controller and action "index". No layouts..
So create a directory called main inside app/controllers and edit the file
app/views/main/index.rhtml with following contents.

<%= javascript_include_tag "prototype", "effects" %>


<h4>
   <%= link_to_remote ( "Click to open form!" , {                         :before => "Element.show('test-form');",
                       :url => { :action => "getequ" },
                       :update => "equdiv" }) %>

</h4>

<div id="test-form">
 <%= start_form_tag({:action => "submit_test"}, {:id => "t_form"}) %>

    <%= text_area_tag "userinput", nil, :size => "20x10" %>

    <p><b>Humans? Please do some simple Math! 
       <div id="equdiv"> </div><input type="text" name="capval" size="2" />
    </b>
    </p>
    <%= submit_tag "Go!" %>
 <%= end_form_tag %>
</div>

<script>
 Element.hide("test-form");
</script>

The controller code looks like this.....

class MainController < ApplicationController

  def index
  end

  def getequ
    numbers = (0..9).to_a

    @equ = ''
    num1 = numbers[rand(numbers.length - 1)]
    num2 = numbers[rand(numbers.length - 1)]

    session[:capsum] = num1 + num2

    @equ << num1.to_s + " + " + num2.to_s + " =  "
    render(:inline => @equ, :layout => false)
  end

  def submit_test
    if request.post?
      if params[:capval].to_i == session[:capsum]
        @userdata = params[:userinput]
        flash[:notice] = "your input is accepted!!"
      else
        flash[:notice] = "Sorry you got the math wrong! can't accept your input!"
      end
    end
    # reset the sum so one cannot simply press 'back' buttton and re-use it!!
    session[:capsum] = -100

  end

end

There is an additional view defined for submit_post. Which looks like this...

<% if flash[:notice] %>
 <%= "<><b> #{flash[:notice]} </b> </p>" %>
<% end %>
<% if @userdata %>
 <%= "You just entered -- #{@userdata}"  %>
 <p>  <%= link_to "again", :action => "index" %> 


<% else %>
 No input data click <%= link_to "try again", :action => "index" %> to start.
<% end %>

How this works is fairly simple. Basically, whenever the first link is clicked an action in the controller called getequ is called, which generates the equation string for us and stores the value for the equation in the session[:capsum] variable. When the form is subimtted, the value of the text field is checked agains the value stored in the session[:capsum] variable. If the values match, the input is allowed, if they don't match the input is not allowed and the view for submit_test is rendered accordingly..

Since, the value the user has to input is only available upon loading the page and updating div, this value simply will never be known to spam-bot to be used without actually loading the page..

---------

The idea looked so simple to me and pilot to be overlooked for so loong. May be there is a catch which I am not getting yet!! Hopefully someone will point out....


PS: Editing html on blogger is a big pain!! eg. it gets rendered. One way out is to change the "<" of each html tag with "&lt;" and then blogger doesn't try to render it.....