XSS Prevention Framework Cheat Sheet

JavaScript frameworks

In modern web application development it is common to use the Single Page Application (SPA) pattern where a single host page is the sole HTML resource for the entire web application.

In most SPA applications after the initial HTML page is loaded the remaining content is generally dynamically generated from Web API calls (e.g. REST) to the originating server or a small set of trusted servers driven by JavaScript controllers.

It is generally recommended that the Web API does not perform HTML escaping in the response (typically JSON) as it does not know the context of how the data will be used which is needed to select the appropriate encoding type (e.g. HTML element vs attribute, etc.).

It is the responsibility of the UI developer to choose the appropriate JavaScript function to ensure that the dynamic data is bound safely to the HTML elements.

Some of the common frameworks include AngularJS, React, and Knockout (also used in OJET). Each one of these frameworks offer mechanisms for escaping HTML. Often these frameworks automatically perform HTML escaping by default (e.g. React or AngularJS).

Knockout / Oracle JavaScript Extension Toolkit (OJET)

Knockout offers different data bindings depending on the requirements. If the content is trusted (e.g. it has been previously sanitized) and may contain some whitelisted HTML tags or character entities (e.g. "Mike & Ike") it is appropriate to use "html" bindings.

.Knockout with "html" binding example [source,javascript]

<1> sets the DIV element's content using _innerHTML_

.Knockout with "text" binding example [source,javascript]

Today's message is: <span data-bind="text: myMessage"></span>

React

.React with HTML binding examples [source,javascript]

---

   render() {
     const htmlText = '<i>This & That</i>';
     return (
       <div>
         <div>{htmlText}</div>
         <div dangerouslySetInnerHTML={{ __html: htmlText }} />
       </div>
     );

---

.React with inline HTML binding [source,html]

---

<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

---

AngularJS 1.x

.Angular with HTML binding [source,html]

---

<p ng-bind-html="myText"></p>

---

.Angular with trusted HTML binding [source,javascript]

---

App.filter('unsafe', ['$sce', function ($sce) {
     return function (val) {
         return $sce.trustAsHtml(val);
     };
}]);

<any ng-bind-html="content | unsafe"></any>

---

Author

• Kirk Rasmussen
• [email protected]