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]

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

React
.React with HTML binding examples [source,javascript]

.React with inline HTML binding [source,html]

AngularJS 1.x
.Angular with HTML binding [source,html]

.Angular with trusted HTML binding [source,javascript]

= Author =


 * Kirk Rasmussen
 * blackbeltdev@yahoo.com