Search within TutorialsPark

AngularJS Services : Dangerous Data


Learn how to use AngularJS to work with Dangerous and Unsecured Data


AngularJS Services : Working with Dangerous Data

A common mode of web attack is to make to fool the application in displaying data which is dangerous, or execute harmful javascript code, or manipulate the layout using CSS.

But most easy way to insert malicious code is via form inputs, such that the content is displayed to the unauthorised users.AngularJS provides built-in support to reduce such risks by providing services that are useable on Dangerous Data.

Table : AngularJS Service Services useable on Dangerous Data

Name Description
$sce To Remove Dangerous elements and attributes from the HTML code
$sanitize To remove Dangerous characters within HTML strings along with their escaped counterparts

AngularJS Services : Display Dangerous Data

In order to prevent unsafe values from being displayed via data-binding, AngularJS provides a feature called Strict Contextual Escaping(SCE)

In the demo, the controller scope has an input element bound to a property named dangerData which is displayed using Inline Binding Expression

The input element has HTML code to create an alert box, but HTML replaces the dangerous HTML characters like < and > with display safe escaped alternatives.

Example: AngularJS Service Displaying Dangerous Data

Give it a TRY! » Note: The default AngularJS behaviour is to prevent dangerous HTML Text being displayed.

AngularJS Dangerous Data : Using Unsafe HTML Binding

AngularJS directive of ng-bind-html is used to specify that data that the data is from a trusted source and hence should be displayed without being escaped.The directive depends upon the AngularJS module sanitize, hence we download it from the angularjs.org

A dependency is added on the ngSanitize module and applied to the directive ng-bind-html to display dangerous data.The alert box cannot be displayed because because security measure strips out dangerous HTML elements.

Example: AngularJS Dangerous Data Using unsafe HTML Binding

Give it a TRY! » Note:The process is called sanitization and is provided by service $sanitize within module ngSanitize.


AngularJS Dangerous Data : Performing Sanitization Directly

Other than using the $sanitize service, you can perfrom sanitization directly on data stored within the application.

The value of the directive ng-model is changed to dangerMsg.The $sanitize object function weeds out thr potentially dangerous value and returns the sanitized value.

Example: Angular Dangerous Data Performing Sanitization Directly

Give it a TRY! » Note: The sanitization process has effectively removed the code for alter box.


AngularJS Dangerous Data : Trusting Data

In some condition you need to display the dangerous content without having to escape or sanitize it, using the service $sce you can sanitize the content.

The service $sce defines the method trustAsHtml to return a value that will be displayed when Strict contextual escaping is being applied.

Example: AngularJS Dangerous Data Trusting Data Openly

Give it a TRY! » Note:The alert box can be displayed by hovering the mouse over the word dangerous.