First of all let’s look at the most obvious attack vector, which is pretty simple: a malicious user would enter a script into the person name field and save that and then it would execute the script when the person is rendered in the person list. First I verified that this attack vector worked, and yes it did work, so then I considered where the value entered by the user needed to be sanitized. It’s pretty straightforward to sanitize the rendering when Rails is involved, just add the h() helper before the name output in the listing, so line 4 of index.html.erb becomes:

This is a fairly standard idiom in Rails (not necessarily the best way to sanitize user input, but the most common way to do it). This fix only fixes the problem when the page is rendered by Rails, but it does not address the issue for items that are added via Ajax, and here is where things get a bit tricky.

You’d think that sanitizing user input in JavaScript would be fairly easy, and to be clear you can do it with the JavaScript escape() function, however this results in some pretty ugly percent-encoded content (which may or may not matter to you. I was curious though whether there was something similar to the h() helper in Rails available in JavaScript. There is but finding it proved to be a bit of a challenge.

What I ended up doing what searching Stack Overflow for solutions that others had come up with and eventually landed upon this bit of code: http://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/plugin/html-sanitizer.js. Unfortunately this bit of code by itself doesn’t work unless you have another JS library (html4) and that library requires building with Ant. Fortunately additional searching led me to a minified version with everything already compiled. I’ve included this minified library as html-sanitizer-minified.js and added a call to html_santize before rendering the person name in the JavaScript as such:

..and it works. I’ve deployed this fix to http://rails-jquery-unobtrusive.heroku.com/ and have updated the github repo so you can see the changes in action.

So is this the best solution for handling user input and avoiding XSS when you want to build HTML in JavaScript? I’m not sure. It’s probably not the only solution so feel free to add yours in the comments below. Also, consider this a warning if you are developing JavaScript code that builds and renders HTML: tainted user input is a threat and you need to deal with it.

If you want to go straight to the code it is available on Github: http://github.com/aeden/unobtrusive-jquery-example. I have also put a live demo on this up on Heroku: http://rails-jquery-unobtrusive.heroku.com.

Rather than going through all of the steps needed to set up a Rails app, the best thing to do is to follow along in the code from the example above.

First let’s take a look at the PeopleController (app/controllers/people_controller.rb):

This looks like a fairly normal RESTful controller. The one exception is the delete method, which will be used by browsers that have JavaScript turned off to provide a page that 1.) confirms that the record should be deleted and 2.) has a form that can post to the destroy method.

Next, let’s take a look at the index view:

There is a list of people with each person having a delete link next to their name. The delete link points to /person/:id/delete which will execute the delete action that I mentioned above (I’ll show you how to remove the “/delete” part of that link with JavaScript later). There is also a form for adding a new person. Note that there is no JavaScript in this page, just normal HTML elements with classes.

While we’re looking at views, let’s look at the only other view, the delete view:

This is just a simple form that confirms that they want to delete the user and provides a cancel link back to the people_url if they don’t. Note that the form tag uses the REST-ful URL for accessing the resource and sets ‘_method’ to ‘delete’ in the hidden field tag.

Finally, let’s take a look at the most complicated bit, the jQuery JavaScript. To make things easier to follow I’ll go through it piece by piece, starting with the document ready handler:

This is the jQuery way for executing code when the document has finished loading. All it does is call two methods, one for connecting up the add form and one for connecting up the delete links. To keep things organized and namespaced a bit I placed these two methods onto a JS object called ‘Actions’. First, the connectAddForm implementation:

This function finds the form element with the class “people” and attaches an event handler to the submit event. When the form is submitted an AJAX POST is made. The data type is JSON, which will call the ‘create’ action in the people controller with the accepts type set to a value that triggers Rails to render JSON as the response. The form is serialized and passed as data and when a successful response is received a bit of HTML is appended to the people list and the person name field is cleared.

Now for the connect delete links JavaScript:

Here each element that is in the people list that matches the selector a.delete and adds a click handler to it. Notice that I used the jQuery live method here, the benefit being that as new records are added, and new elements that match the selector expression are added automatically get the click handler that I define here. This saves me from the trouble of having to add the handler each time that a record is added to the page. The click handler first finds the li that it may eventually delete, displays a confirmation message to the viewer and if they confirm that they want to delete the record it will post via AJAX to the /person/:id URL with the method ‘delete’. The URL is pulled from the anchor’s href attribute and the ‘/delete’ is removed using a simple regular expression replace. Upon a successful delete the li that was found earlier is hidden using the slideToggle() function.

That’s it. You can try this in a browser either with JavaScript turned on, in which case it’ll use all of the JavaScript goodness, or you can turn of JavaScript and see the magic of graceful degradation. I hope you’ve enjoyed reading this little tutorial and if you have any suggestions on how to improve the code in the project please feel free to fork the github project, make your changes and send me a pull request. I’ll add any cool mods into the tutorial as I can.

Update: I’ve published a follow-on article that talks about changes to the code for this tutorial to handle sanitizing user input both in Rails and in JavaScript. I suggest reading it to understand XSS vulnerabilities that you need to deal with when accepting user input.

Here’s a little bit of JavaScript that I have used to successfully replace a broken image with a default (assumes prototype is used). Also note that this has been extracted somewhat from my implementation and thus may have gathered bugs during the extraction, but the concept should still be clear.

$$('img.my_class_name').each(function(e) {
  var i = new Image();
  i.onerror = function() {
    e.src = "error.png";
    e.onerror = "";
    return true;
  };
  i.src = e.src;
});