Safe JavaScript Templating

Cross-site scripting is still in the wild!

We are thrilled that many exciting new HTML5 features are being included in modern web application development, making it more intelligent and user friendly. However, despite the technology advancement, cross-site scripting (XSS) has long been ranked in the top 3 of the OWASP Top 10 [1]. This pervasive issue has been disclosed by web application security researchers for more than a decade. Due to the rapid growth of new technologies, the solution to this problem is not as simple as it may seem. In this article, we explain the difficulty of the issue, and further introduce our automated safe JavaScript templating solution - secure-handlebars.

Blindly HTML escaping is Unsafe!

Given the fact that input filtering is error prone and not scalable, most JavaScript Templating engines enable HTML output escaping/filtering by default and automatically. If you want to know why, please read the blog post “Filtering is hard!!!” before continue to read this article. Auto HTML Escaping is the process of applying the HTML escaping to untrusted user data in the JavaScript Templating engines. Typically, it encodes a set of known harmful characters, including “ ‘ < > and &, to defend against XSS. Despite applying HTML escaping automatically, a web application can still be vulnerable to XSS, as the escaping is applied blindly and does not take all output contexts into account. Taking one simple example, the string “javascript:alert(0);” can easily bypass the filtering rule above if the output context is a URI (e.g. href, src) context.

Context Analysis and Safe JavaScript Templating

In order to mitigate the issue, we need to understand the output context and apply output filtering rules accordingly, instead of blindly escaping output to HTML web pages. Context Parser [2] is a small, lightweight HTML5-compliant parser. The implementation is based on the HTML5 WHATWG specification, mainly focused on the tokenization process. This allows the codebase to be small and performant, without the bloat of implementing an end-to-end model of the HTML5 parser. By analyzing the context of the JavaScript template files, we can understand the output context, and apply our context-aware XSS filters [3] accordingly before the data binding process in the JavaScript Templating engine. This makes the JavaScript Templating engine truly secure without a huge hit to performance.

Secure Handlebars

In order to make our solution usable and simple, we applied our solution to Handlebars, one of the popular JavaScript Templating engines. We hook our solution as a pre-processing process in the original Handlebars workflow (the blue boxes on the left in the Figure 1) . Then, we analyze the output context of the template with our context parser and rewrite the templates with our context-aware XSS filters as a helper function in Handlebars supported syntax. After that, we register our context-aware XSS filters as Handlebars supported helpers during the data binding process (the light blue box on the right in the Figure 1). In this way, we apply our XSS filters on untrusted user data, in a context-sensitive manner before the data is returned to the user’s browser.

Screenshot 2015-06-10 16.14.15.png

Figure 1 - Architecture overview of Secure Handlebars.

To increase the ease of adoption of this solution, we have extended our solution on the Express framework as the express-secure-handlebars package. This solution allows you to enable this secure solution with only two lines of code!

Comments