Comparition of Adopting Unobstructive Javascript and XSS in Rails 2 & 3

Cross-Site-Scripting in Rails 2

<%= @post.body %> –> Unsafe
<%= h @post.body %> –> Safe

Cross-Site-Scripting in Rails 3

<%= @post.body %> –> Safe
<%= raw @post.body %> –> Unsafe

Adopting Unobstructive Javascript
Example 1 :

Rails 2:

<%= link_to_remote ‘Show’, :url => post %>

Will generate a HTML like,
“<a href=”#” onclick=”new Ajax.Request(‘/posts/1′, {asynchronous:true,
evalScripts:true, parameters:’authenticity_token=’ +
encodeURIComponent(‘9sk..44d’)}); return false;”>Show</a>”
Rails 3:

<%= link_to ‘Show’, post, :remote => true %>

Will generate a HTML like,
“<a href=”/posts/1″ data-remote=”true”>Show</a>”

Example 2 :

Rails 2:

<% remote_form_for(@post) do |f| %>

Will generate a HTML like,
“<form action=”/posts” id=”new_post” method=”post”
onsubmit=”new Ajax.Request(‘/posts’, {asynchronous:true,
evalScripts:true, parameters:Form.serialize(this)}); return false;”>”
Rails 3:

<% form_for(@post, :remote => true) do |f| %>

Will generate a HTML like,
“<form action=”/posts” data-remote=”true” id=”new_post” method=”post”>”

Example 3 :

Rails 2 & 3:

<%= link_to ‘Destroy’, post, :method => :delete %>

Will generate a HTML like this for Rails 2,
“<a href=”/posts/1″ onclick=”var f = document.createElement(‘form’); f.style.display = ‘none’;
this.parentNode.appendChild(f); f.method = ‘POST’; f.action = this.href;var m =
document.createElement(‘input’); m.setAttribute(‘type’, ‘hidden’); m.setAttribute(‘name’, ‘_method’);
m.setAttribute(‘value’, ‘delete’); f.appendChild(m);var s = document.createElement(‘input’);
s.setAttribute(‘type’, ‘hidden’); s.setAttribute(‘name’, ‘authenticity_token’); s.setAttribute(‘value’,
‘9skdJ0k+l9/q3PWToz6MtfyiB2gcyhnKubeGV6WFL44=’); f.appendChild(s);f.submit();return false;”>Destroy</a>”

And Will generate a HTML like this in Rails 3,
“<a href=”/posts/1″ data-method=”delete” rel=”nofollow”>Destroy</a>”

Example 4 :

Rails 2 & 3:

<%= link_to ‘Destroy’, post, :confirm => ‘Are you sure?’, :method => :delete %>

Will generate a HTML like this for Rails 2,
“<a href=”/posts/1″ onclick=”if (confirm(‘Are you sure?’)) { var f = document.createElement(‘form’);
f.style.display = ‘none’; this.parentNode.appendChild(f); f.method = ‘POST’; f.action = this.href;var m =
document.createElement(‘input’); m.setAttribute(‘type’, ‘hidden’); m.setAttribute(‘name’, ‘_method’);
m.setAttribute(‘value’, ‘delete’); f.appendChild(m);var s = document.createElement(‘input’);
s.setAttribute(‘type’, ‘hidden’); s.setAttribute(‘name’, ‘authenticity_token’); s.setAttribute(‘value’,
‘9skdJ0k+l9/q3PWToz6MtfyiB2gcyhnKubeGV6WFL44=’); f.appendChild(s);f.submit(); };return false;”>Destroy</a>”

And Will generate a HTML like this in Rails 3,
“<a href=”/posts/1″ data-confirm=”Are you sure?” data-method=”delete” rel=”nofollow”>Destroy</a>”

Example 5 :

Rails 2 :

<%= f.submit ‘Create Post’, :disable_with => “Please wait…” %>

Will generate a HTML like ,
“<input id=”post_submit” name=”commit” onclick=”if (window.hiddenCommit)
{ window.hiddenCommit.setAttribute(‘value’, this.value); }else { hiddenCommit =
document.createElement(‘input’);hiddenCommit.type = ‘hidden’;hiddenCommit.value =
this.value;hiddenCommit.name =
this.name;this.form.appendChild(hiddenCommit); }this.setAttribute(‘originalValue’,
this.value);this.disabled = true;this.value=’Please wait…’;result =
(this.form.onsubmit ? (this.form.onsubmit() ? this.form.submit() : false) :
this.form.submit());if (result == false) { this.value =
this.getAttribute(‘originalValue’);this.disabled = false; }return result;” type=”submit”
value=”Create Post” />”

Rails 3 :

<%= f.submit :disable_with => “Please wait…” %>

Will generate a HTML like ,

“<input data-disable-with=”Please wait…”
id=”post_submit” name=”commit” type=”submit” value=”Create Post” />”

Ajax Request in Rails 2 & Rails 3

AJAX request from anchor tag

Rails 2
<a href="#" onclick="new Ajax.Request('/comments/1', {asynchronous:true, evalScripts:ture, method:'delete'}); return false;">Destroy</a>

Rails 3
(unobstrusive JavaScript in Rails 3) 
<a href="/comments/1" data-remote="true" data-method="delete">Destroy</a>