Tag: form

Posted on 01/08/2011 at 06:55AM

For part 1 of RSA-form plugin

New partials

I have added 2 new partials to Rsa-form. A registration form partial and a password entry keypad partial.

Screenshot of the Registration Partial

To include the registration form partial on your registration webpage. Include the following line in your html:

<%= render :partial => 'rsa_form/register' %>

And for those that want to design their own custom html around the password entry partials. You can simply include one of both of these lines in your html.

<%= render :partial => 'rsa_form/password1', :locals => { :name => "password]"}  %>
<%= render :partial => 'rsa_form/password2', :locals => { :name => "password_confirmation"}  %>

Here is an example of a completely custom registration page using the password partials.

<% form_tag users_path,:id=>"rsa_register_form" do -%>

      <%= label_tag 'login' %>
      <%= text_field_tag 'user[login]' %>

      <%= label_tag 'email' %>
      <%= text_field_tag 'user[email]' %>

      <%= label_tag 'password' %>
      <%= render :partial => 'rsa_form/password1', :locals => { :name => "user[password]"}  %>

      <%= label_tag 'password_confirmation' %>
      <%= render :partial => 'rsa_form/password2', :locals => { :name => "user[password_confirmation]"} %>

      <%= submit_tag 'Sign up' %>
<% end -%>

       $("form").jCryption( {getKeysURL:"/rsakey",formFieldSelector:':input:not([name=authenticity_token])',beforeEncryption:validate_inputs});       

Validate form before submission

Now you can validate the form's inputs with your browser prior to submission. This can reduce server load since the client will not contact the server until all inputs are validated. In order to do this, call jCryption with the beforeEncryption option:

$("#myencryptedform").jCryption( {getKeysURL:"/rsakey",formFieldSelector:':input:not([name=authenticity_token])',beforeEncryption:validate_inputs});

jCryption will now call validate_inputs() prior to encryption and submission. If an error is found, the submission will be cancelled. validate_inputs() is located in /javascripts/rsa-form.js and can be modified to your hearts content.

I have also added several javascript helper routines which can be used to test password, string, URL, and e-mail address validity. See /javascripts/rsa-form.js for more details.

Submitting your encrypted form's using AJAX

Say that I want to submit a form to the server using a post request to the same controller and action as normal but this time using AJAX. I want the controller to return javascript that will be executed by the client. (Such as displaying an alert or modifying the DOM on the clients browser). To do this:

  • Add the following javascript to your html or to a javascript file such as /javascripts/application.js IMPORTANT: Make sure that you add this code AFTER the call to $(form).jCryption();. If you don't, then this routine will be executed first and submit the normal unencrypted data.
$("#rsa_login_form").submit( function (){
  $.post( $(this).attr("action"), $(this).serialize(), null, 'script');
  return false;

  • Add code to your controller to differentiate between a normal GET/POST action and an AJAX GET/POST action. For example:
respond_to do |format|
  format.html { redirect_back_or_default('/') } # normally execute this redirect
  format.js   { @route = "/" }                  # setup a variable that will be used in the javascript view

  • Create a view that will be returned from the AJAX request.

Assuming that we are using a controller called 'session' and an action named 'create', create this file:


That contains some javascript that will be executed on the client, for example:

alert("You are successfully logged in");  // displays an alert
document.location = "{%=@route%}";        // does a redirect to the specified route

And that's about it!

There are many options available for AJAX calls, such as doing a GET instead of a POST. Returning 'json', 'xml', 'text' instead of returning 'javascript'. Please refer to the jQuery documentation for more information.

Tags: ajax, form, rsa, authentication, rails, validation

Posted on 01/08/2011 at 06:53AM

I just pushed my latest project to GitHub. Rsa-form http://github.com/rsepulveda2/rsa-form

This plugin is useful when submitting sensitive data such as login credentials from the browser to your server when your server doesn't have SSL. Please note that Rsa-form is NOT a replacement for SSL since it doesn't use authentication.

Rsa-form also includes a login widget that can be added to your login page to reduce the chance of a keylogger capturing passwords (see below for details).

To use Rsa-form:

Just create a form, then add the following javascript to your page. (Using either "script" tags or adding it to one of your javascript files such as /javascripts/application.js)

jQuery(document).ready(function() {

When the user submit's the form, the browser will request an RSA public key from the server. jCryption will then encrypt the serialized form data using the RSA public key and return the encrypted data to the server.

To decode the data on the server side, make the following call in your controller:

params.merge!( RsaForm.decrypt_form( params[:jCryption], session[:key_pair])) if params[:jCryption]

This decodes the form data and adds it to your params hash. Your controller will work just as before.

Installation instructions:

Install the rsa-form plugin:

./script/plugin install git://github.com/rsepulveda2/rsa-form.git

install the javascript dependencies:

Download jquery.js and jquery.jcryption.js then put them in your /public/javascripts/ folder.

Add the following lines to your application.html.erb:

<script src="/javascripts/jquery-1.4.4.js" type="text/javascript"></script> 
<script src="/javascripts/jquery.jcryption.js" type="text/javascript"></script>

or the equivalent

<%= javascript_include_tag "jquery-1.4.2", "jquery.jcryption", "application" %>

Install the RSA ruby gem by adding the following line to your /config/environment.rb:

config.gem "rsa"

Stop your server

shell% rake gems:install

Restart your server

Rsa-form login widget

Login Widget

The Rsa-form login widget can be added to your login page as a partial. The users password is entered using a combination of letters from the keyboard and numbers clicked on the numeric keypad. The keypad ordering is changed everytime the page is refreshed. The page can be auto-refreshed if desired. This widget also uses the RSA encryption for added security.

To add the login widget to your login webpage, include the following line:

<%= render :partial => 'rsa_form/login' %>

Add the following to your html header (application.html.erb):

<link href="/stylesheets/rsa-form.css" media="screen" rel="stylesheet" type="text/css" /> 
<script src="/javascripts/rsa-form.js" type="text/javascript"></script>

And thats about it. Your controller will receive the data as:

params[:login] and params[:password]

Remember to add this line to your controller:

params.merge!( RsaForm.decrypt_form( params[:jCryption], session[:key_pair])) if params[:jCryption]

You can customize the look and feel of the login widget by:

  • Changing it's css file: /stylesheets/rsa-form.css

  • Replacing the graphics for the keys in the keypad. The following files can be replaced: /images/(0.png - 9.png, clr.png, del.png)

  • Rewriting the widget's html. Copy the /vendor/plugins/rsa-form/app/views/rsa_form directory to your /app/views directory.

    Make modifications to the /app/views/rsa_form/_login.html.erb file.

    To avoid breaking the javascript, don't modify the "img" elements, and don't change the id attribute of the password text field tag and the form tag.

See part 2 of RSA-form rails plugin

Tags: rsa, form, github, authentication, login