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 are the slides for my talk: Technical Debt . I’ve left the presenter notes in so you can see what I was thinking when I put the slide together (since most of the slides are just pictures anyhow.) Enjoy!

So what do you get if you contract the SDC Hawaii team? How about this: you get 4 top notch Ruby developers, including yours truly, along with one awesome designer/UX expert, who are ready to bend over backwards to make sure that your web application is designed, tested and implemented with great care. We are all passionate about web application development and put our hearts and souls into everything we create. Our team is well-versed in agile development, with daily stand-ups, pair programming and test-driven development. And finally we have extensive experience with Amazon’s Web Services including S3, EC2, SQS and Elastic Map Reduce.

So come on over to the SDC Hawaii web site and contact us if you’re interested in having our team develop your next web application.

As part of the troubleshooting process we decided to hook up a profiler. I started out looking at the profiler that’s built into JRuby (use the –sample option) and got a little bit of data. Urged on by @dje I started looking at Java profilers. It’s been a while since I’ve dug into the world of Java so I started with open source tools to get my bearings. Suffice to say I did not find what I was looking for there, so I did what any self-respecting Internet-savvy being would do in my place: I twittered it.

Thanks to @sethladd I downloaded YourKit, got it hooked up in about 30 minutes with the production system and away I went. The results so far have been promising. Some of the issues that could be fixed have, however we are basically at a point where we’ve run into a wall with Ruby’s Net::HTTP implementation. The long term solution is probably to replace the Net::HTTP library with something based on the Reactor pattern (see my jruby-http-reactor project for the initial baby-steps in that direction) but the bottom line is without a profiler to help us get headed on the right path we probably would have spent a lot more time “fixing” things that weren’t broken. If you’re considering using JRuby consider that you will have access to a wide variety of Java tools that can be quite helpful when troubleshooting.

1.) Follow the instructions here (Rob Sanheim, FTW): http://robsanheim.com/2007/12/11/creating-a-static-loopback-address-to-use-in-vmware/

2.) If you provide a different interface depending on the requested host name, then Edit C:\WINDOWS\system32\drivers\etc\hosts to point 10.0.0.100 (or whatever IP address you selected in step 1 to a hostname (for example local.mysite.com).

That’s pretty much it. I noticed that I had to restart IE for it to recognize the new hosts file changes, but otherwise it works like a charm.

I think the following is more elegant:

  has_one :thing
  def thing_with_create
    thing_without_create || create_thing
  end
  alias_method_chain :thing, :create

I can then access o.thing and it will automatically create it if it doesn’t exist.

What do you think?

Let’s go through this piece by piece:


# get the previous timestamp
old_timestamp = File.read("config/deploy_timestamp").to_i rescue 0


The first step is to get the previous timestamp. This will be saved in memory and compared against file modification times to determine if a put or a copy should be used.

# generate timestamp into config/deploy_timestamp
timestamp = Time.now.to_i
File.open("config/deploy_timestamp", 'w') do |f|
  f.write(timestamp)
end

The next step is to update the time stamp file and store the new time stamp in memory.

# generate minified JS and CSS
system('rake asset:packager:build_all')

This portion uses the asset packager plugin for Rails to package up JS and CSS files into bundled assets.

# sync local public/ directory to S3 bucket
# the S3 bucket directory should be the
#  timestamp generated above
require 'right_aws'
s3 = RightAws::S3.new(access_key_id, secret_access_key)
bucket = s3.bucket('a-bucket')

Here we connect to S3 using RightScale’s RightAws library. You will need to put your access key ID and secret access key into the variables provided. The bucket name should be a bucket that has already been set up as an Amazon CloudFront S3 source. Documentation on how to set up a CloudFront configuration can be found in the ACF Getting Started Guide.

put_count = 0
copy_count = 0
Dir.glob('public/**/*').each do |f|
  next if File.directory?(f)
  key = "#{timestamp}/#{f.gsub(/public\//, '')}"
  if File.new(f).mtime.to_i > old_timestamp
    puts "putting #{f} into S3 as #{key}"
    bucket.put(key, File.read(f), {}, 'public-read')
    put_count += 1
  else
    old_key = bucket.key(
      "#{old_timestamp}/#{f.gsub(/public\//, '')}"
    )
    if old_key.exists?
      puts "copying #{old_key} to #{key}"
      old_key.copy(key)

      acl = s3.interface.get_acl(bucket.name, old_key.name)
      s3.interface.put_acl(bucket.name, new_key.name, acl[:object])

      copy_count += 1
    else
      puts "putting #{f} into S3 as #{key}"
      bucket.put(key, File.read(f), {}, 'public-read')
      put_count += 1
    end
  end
end
puts "done. #{put_count} files uploaded,
  #{copy_count} keys copied"

This code loops through all of the files and directories in the public directory and for any file it first checks to see if the file modification time is after the previous timestamp. If it is then the data from the file will be pushed to S3 using a key that is the file path prefixed with the time stamp. If the modification time is before the previous time stamp then the file hasn’t changed. In this case the script will look up the old key in S3. If the old key exists then key.copy() is used to make a copy of the resource (reducing the time required to process large files) and set the ACL to the old key’s ACL. If the key does not exist then the file data will be put into S3.

The S3 key is always prefixed with the time stamp. This is done because Amazon CloudFront will cache files for a minimum of 24 hours. If you were to release a new version of an asset and overwrite the old asset in S3 it could be quite some time before ACF would pick up the change. By prefixing the key with the time stamp you will always get the latest version as long as the asset host is configured properly in your Rails application (more on that in a bit).

# add and commit the config/deploy_timestamp file
system('git add config/deploy_timestamp')
system('git commit -m "deploy_assets complete,
   updating timestamp"')
system('git push')

This last little bit of code commits the updated deploy_timestamp file into the git repository and pushes it to the remote repo. This works for us because we use Github. If you do not then you’d want to adjust these lines to push the file into your source code repository.

The last piece of the puzzle is to set the asset host in Rails. Here’s what that might look like:

ts_file = File.join(RAILS_ROOT, "config/deploy_timestamp")
ts = File.read(ts_file).to_i
config.action_controller.asset_host = Proc.new { |source, request|
  if request.ssl?
    "https://yoursite.com"
  else
    "http://cdn.yoursite.com/#{ts}"
  end
}

This code can go either in your config block in config/environment.rb or in specific environment configs. You’ll also need to set up a CNAME record pointing cdn.yoursite.com to your Amazon CDN host. If you aren’t using Rails you’d still need some way to indicate that all images should be originating from Amazon CloudFront. Note that resources requested from SSL encrypted pages must still go to your SSL-enabled servers since CloudFront does not support SSL at this time.

One final caveat: if you are using images that are specified in stylesheets you’ll need to ensure that you use relative paths to those images.

Update 1 It turns out that when you copy a key in S3 the original key ACL is not retained. This is unfortunate since it means copied assets will now be marked private. Furthermore it appears that RightAWS does not support URI-based group identifiers for S3 ACLs, which means there is no way to change the permissions on a copied key to public-read. It seems likely that I can switch to another S3 lib to get this functionality, but that’ll have to wait. More updates will be forthcoming when I fix this.

Update 2 Thanks to Alex’s comment I’ve re-enabled the key copy in the example code. It’s a bit slow to copy the ACL, but for large files it will still perform significantly better.