AngularJS Services : Dangerous Data
Learn how to use AngularJS to work with Dangerous and Unsecured Data
AngularJS Services : Working with Dangerous Data
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
|$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
< and > with display safe escaped alternatives.
Example: AngularJS Service Displaying Dangerous DataGive 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 BindingGive 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 DirectlyGive 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.