Introduction
In this article I will tell you how to sanitize data using AngularJS.
As you know, in normal life sanitize means to make things clean and in code we also need to make things clean and bug free, AngularJS provides a directive that can help us to elminate harmful code, "ngSanitize".
ngSanitize doesn't allow the suspicious code to ber executed so it can't attack our system, we can allow the code to bypass the sanitization at certain positions by applying some small conditions, here I created a small application that will help to understand how to apply Sanitize and also bypass the Sanitize.
Step 1
First of all you need to add the following two external Angular.js files to your application:
- angular.min.js
- angular-sanitize.min.js
For this you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
After downloading the external files you need to add these files to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script src="angular-sanitize.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will work on the JavaScript section of this application. Write this code in the head section of your aplication:
<script>
angular.module('htmldoc', ['ngSanitize']).controller('x', function ($scope, $sce) {
$scope.html = '<p style="color:blue">Hey!! Come and ' +
'<em style="color:Red" onmouseover="this.textContent=\'Click\'">Mouse Hover</em>\n' +
'Over Me</p>';
$scope.withoutSanitize = function () {
return $sce.trustAsHtml($scope.html);
};
});
</script>
Here I declared "htmldoc" using the angular.module, this "htmldoc" is the value that will be provided in the ng-app. Then 'ngSanitize' is declared that will be used to sanitize the code.
Then I provided the name of the controller as "x", then you can see that I provided an initial value in which many HTML tags are used along with a mouseover function.
After this I have created one more function named "withoutSanitize", in this function whatever we had declared in the variable "html" is assumed to be trusted code and not sanitized.
Our work on ViewModel is completed and now we just need to work on the View part or design part of this application.
Step 3
Write this code in the Body tag:
<form id="form1" runat="server">
<div ng-controller="x">
<p ng-bind-html="html"></p>
<div ng-bind-html="withoutSanitize()"></div>
</div>
</form>
Here the first div is bound to the function x() using the ng-controller, in this div a <p> tag and a<div> tag is used.
The <p> tag is bound to the variable "html" using the ng-bind-html and the <div> tag is bound to withoutSanitize again using the ng-bind-html.
So, both tags are bound using the ng-bind-html but both are bound to various variables, the first one will allow the automatic sanitization but the second one will bypass the Sanitize.
Now our application is ready for execution.
Output
On running the application you will get output like this:
![ngSanitize in AngularJS]()
You can see that the first line of text is simply showing the data without any color added to that, mousehover is also not working on this first line of text as you can see here:
![ngSanitize in AngularJS]()
But as I hover over the second line you can see that the text is change.
![ngSanitize in AngularJS]()
The complete code of this application is as follows:
<html ng-app="htmldoc" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script src="angular-sanitize.min.js"></script>
<script>
angular.module('htmldoc', ['ngSanitize']).controller('x', function ($scope, $sce) {
$scope.html = '<p style="color:blue">Hey!! Come and ' +
'<em style="color:Red" onmouseover="this.textContent=\'Click\'">Mouse Hover</em>\n' +
'Over Me</p>';
$scope.withoutSanitize = function () {
return $sce.trustAsHtml($scope.html);
};
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="x">
<p ng-bind-html="html"></p>
<div ng-bind-html="withoutSanitize()"></div>
</div>
</form>
</body>
</html>