XSS Protection with AngularJS

This blog talks about the different ways of protecting our web applications based on
AngularJS, from XSS attacks. There are other articles, sources available which talk about either escaping the malicious content like scripts, HTML tags etc. or ignoring few specific tags like img, script etc.

In either of the above solution we don’t get to see the exact content which was inserted in the db, in short we manipulate the data content.
For a scenario where we have to display the same content as it was entered by the user then we need a way to disinfect the malicious code & then render it.

Such scenario will occur where we are allowing users to insert data into db through some API directly or we are allowing user to enter data from UI without any security gate between the UI and database.

AngularJS itself takes care of not evaulating the HTML tags when put in expressions like

{{MalaciousCode}}

In this case if the scope variable had some data like :

 $rootScope.MalaciousCode= "<script>alert('Aw Snap, Attacked')</script><img src=''>Usual Content<b>Bold</b>";

It would render just like that.
This applies to ng-bind as well.

You can explicitly trust the content as HTML and binding it with bind-html attribute using $sce service, this is not recommended though.

Let’s take care of the scenario where we have to evaluate the incoming data, anyway, like in case of tool-tips.

<div tooltip-placement="bottom" ng-bind="MalaciousCode"
     tooltip-append-to-body="true" tooltip-trigger tooltip-html-

unsafe="{{MalaciousCode}}"></div>

In this case even if the data is rendered safe but when it is hovered over it is evaluated
& attack happens.

problem

Solution
For this scenario we either encode the data in client size before passing it to the attribute ‘tool-tip-unsafe’ or as a single point of solution data coming in from server can be HTMLEncoded, with ” encoded, thus what we get is a safe HTML encoded string which if evaluated & trusted as HTML string can be used to render the data as well as showing tool-tips or other usages which may evaluate data.

Data entered by the user:

<script>alert('Aw Snap, Attacked')</script><img src=''>Usual Content<b>Bold</b>

Encoded data from rest service

&lt;script&gt;alert('Aw Snap, Attacked')&lt;/script&gt;&lt;img src=''&gt;Usual Content&lt;b&gt;Bold&lt;/b&gt; 

Include ngSanitize module library:

<script src="js/lib/angular-1.4.0.js"></script>
<script src="js/lib/sanatize.js"></script>

Load ngSanitize service as dependency, this makes sure that bind-html goes through sanitization.

var xssApp = angular.module('xssApp', ['ngSanitize','ui.bootstrap']);

<div tooltip-placement="bottom" ng-bind-html="MalaciousButEncodedContent"
     tooltip-append-to-body="true" tooltip-trigger 
tooltip-html-unsafe="{{MalaciousButEncodedContent}}">
</div>

Rendering
output

References:
Read more about $sanitize service: https://docs.angularjs.org/api/ngSanitize/service/$sanitize
Related article: https://dzone.com/articles/angularjs-how-handle-xss

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s