Cross-Site Scripting: Handlebars Helper

Sending unvalidated data to a web browser can result in the browser executing malicious code.

Cross-site scripting (XSS) vulnerabilities occur when:

1. Data enters a web application through an untrusted source. Using Handlebars, you can create custom helpers that can be used to modify templates.


2. The data is included in dynamic content that is inserted into a template before being rendered without validation. In the case of a Handlebars helper, malicious content is rendered as the output of the template.

The malicious content in a Handlebars helper takes the form of a JavaScript segment, or any other type of code that the browser executes. As the output from a Handlebars template is typically HTML content to be passed to the browser, any potentially malicious content should be treated as unsafe and validated.

Example 1: Consider the following Handlebars helper code:

  Handlebars.registerHelper('bolden', function (aString) {
    return new Handlebars.SafeString("" + aString + "")
  })
  // ...
  let template = Handlebars.compile('{{bolden someArgument}}')
  myElem.innerHTML = template({someArgument: userInput})
  

The bolden helper is passed the user-controlled data userInput. Although the use of double curly braces ({{ and }}) typically means that the output will be HTML-encoded, in this scenario the bolden helper overrides any validation by passing the input into new Handlebars.SafeString(), leading to the input being rendered as regular HTML. When the HTML returns from template() it is passed into the innerHTML property leading to a DOM-based XSS.