Yet Another Developer's Blog: Client-Side Contextual Encoding for jQuery

2.16.2011

Client-Side Contextual Encoding for jQuery

As everyone is probably aware by now, jQuery; the awesome brainchild of John Resig - is everywhere! This opened an opportunity for me in my crusade against DOM Based XSS by creating a plugin to allow developers to contextually encode untrusted data on the client side (more and more important with widgets and ajax all over the place).

So what is this new hotness, this awesome plugin? It's called jquery-encoder (yeah, I was feeling very creative when I came up with that name) and it is super-simple to use!

Here is a quick snippet of the power of jquery with jquery-encoder

$.post('http://untrusted.com/webservice', function(data) {
   $('#result').encode('html', data);
});

Under the hood, this runs the untrusted data that is being returned from the untrusted.com webservice through an HTML entity encoding algorythm before setting it using the jQuery .html() function.

You can also encode for HTML Attributes or CSS.

$.post('http://untrusted.com/user-theme-color', function(data) {
   $('body').encode('css', 'background-color', data);
});

$.post('http://untrusted.com/unique-id-generator', function() {
   $('#result').encode('attr', 'id', data);
});

As soon as this matures and get's some testing, a full blown technical description and user's guide will be available - but for now, what I am really looking for is people to try it out! I don't recommend dropping this into your production code just yet, this is just a first attempt at getting this right.

The other big thing that I did was bring the awesome ESAPI canonicalization functionality to the jQuery world. This is *huge* for client side validations and for detecting bad data (multiple/mixed encodings)

The canonicalize function is a static method on the jQuery object and can be used as illustrated below.

$.canonicalize('&lt;script&gt;'); // <script>
$.canonicalize('%3cscript%3d'); // <script>
$.canonicalize('%253cscript%253d') // Raises exception (double)
$.canonicalize('&#x26;lt&#59') // Raises exception (multi-double)

IMHO, this is one of the most powerful utility functions available in the entire ESAPI and I am super-stoked that I was able to port it to javascript for jQuery. However, it needs to be poked at, prodded, and broken before it is rock solid. I currently have a suite of about 70 test cases that I am throwing against it, but I am sure there are at least double that. It will decode escaping for HTML, CSS, and Javascript escaping rules.

Dependencies