This site is the archived OWASP Foundation Wiki and is no longer accepting Account Requests.
To view the new OWASP Foundation website, please visit https://owasp.org

Difference between revisions of "XSS Prevention Framework Cheat Sheet"

From OWASP
Jump to: navigation, search
(getting started)
 
(Knockout / Oracle JavaScript Extension Toolkit (OJET))
 
Line 15: Line 15:
 
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 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
+
.Knockout with "html" binding example [source,javascript]
[source,javascript]
 
----
 
 
<div data-bind="html: details"></div> <!-- 1 -->
 
<div data-bind="html: details"></div> <!-- 1 -->
----
 
 
<syntaxhighlight lang="Javascript">
 
<syntaxhighlight lang="Javascript">
 
<1> sets the DIV element's content using _innerHTML_
 
<1> sets the DIV element's content using _innerHTML_
Line 26: Line 23:
 
.Knockout with "text" binding example
 
.Knockout with "text" binding example
 
[source,javascript]
 
[source,javascript]
----
 
<syntaxhighlight lang="Javascript">
 
Today's message is: <span data-bind="text: myMessage"></span> <!-- 1 -->
 
</syntaxhighlight>
 
----
 
 
<syntaxhighlight lang="Javascript">
 
<syntaxhighlight lang="Javascript">
<1> sets the _SPAN_ element's content using _textContent_
+
Today's message is: <span data-bind="text: myMessage"></span>
 
</syntaxhighlight>
 
</syntaxhighlight>
  

Latest revision as of 18:52, 25 January 2018

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