User-generated content can introduce security risks such as Cross-Site Scripting (XSS), where malicious scripts are injected into web applications. In AngularJS, the $sanitize service (part of the ngSanitize module) helps clean user input by removing potentially harmful code while allowing safe HTML elements.
In this guide, we will cover:
- Understanding XSS and Why Sanitization is Needed
- What is
$sanitizein AngularJS? - How to Use
$sanitizein AngularJS? - Installing and Configuring
$sanitize - Example: Cleaning User Input
- Using
$sanitizewith ng-bind-html - Comparing
$sanitizevs$sce - Best Practices for Secure Input Handling
- Testing and Debugging
$sanitize
1. Understanding XSS and Why Sanitization is Needed
What is Cross-Site Scripting (XSS)?
XSS attacks occur when malicious JavaScript is injected into a webpage, allowing attackers to:
- Steal user cookies or session tokens.
- Modify webpage content to phish user credentials.
- Perform actions on behalf of the authenticated user.
Example of XSS Attack
An attacker could inject a malicious script in a comment field:
<script>alert('Hacked!');</script>
If not sanitized, this script would execute when displayed.
2. What is $sanitize in AngularJS?
$sanitize is a built-in security service in AngularJS that: Removes dangerous HTML and JavaScript from user input.
Preserves safe HTML elements like <b>, <i>, <p>, <a>, etc.
Prevents stored and reflected XSS attacks.
Important:
$sanitizeonly cleans user input; it does NOT encode or escape HTML.
3. How to Use $sanitize in AngularJS?
Step 1: Install and Include ngSanitize
By default, AngularJS does not include $sanitize, so you need to load the ngSanitize module.
CDN Link (Include in HTML)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-sanitize.js"></script>
Step 2: Add ngSanitize as a Dependency
Modify your AngularJS module to include ngSanitize:
var app = angular.module('myApp', ['ngSanitize']);
4. Example: Cleaning User Input with $sanitize
Let’s create an example where a user enters text that could contain XSS.
HTML Code
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>AngularJS $sanitize Example</title>
</head>
<body ng-controller="MainController">
<h3>Enter Text:</h3>
<textarea ng-model="userInput"></textarea>
<h3>Without Sanitization:</h3>
<p ng-bind-html="userInput"></p>
<h3>With Sanitization:</h3>
<p ng-bind-html="sanitizedInput"></p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-sanitize.js"></script>
<script>
var app = angular.module('myApp', ['ngSanitize']);
app.controller('MainController', function($scope, $sanitize) {
$scope.userInput = "<script>alert('Hacked!');</script><b>Safe Bold Text</b>";
$scope.sanitizedInput = $sanitize($scope.userInput);
});
</script>
</body>
</html>
Explanation
- Without
$sanitize, the script tag is executed. - With
$sanitize, the script tag is removed, leaving only<b>Safe Bold Text</b>.
5. Using $sanitize with ng-bind-html
AngularJS blocks raw HTML by default. To safely bind sanitized HTML, use:
<p ng-bind-html="sanitizedInput"></p>
This ensures that any harmful script tags are removed before rendering.
6. Comparing $sanitize vs $sce
AngularJS also provides $sce (Strict Contextual Escaping) for handling untrusted content.
| Feature | $sanitize | $sce.trustAsHtml() |
|---|---|---|
| Removes unsafe HTML | Yes | No |
| Prevents XSS | Yes | No |
| Allows full control over trust | No | Yes |
Example: Using $sce.trustAsHtml()
If you completely trust the input and want to allow raw HTML:
app.controller('MainController', function($scope, $sce) {
$scope.trustedHTML = $sce.trustAsHtml('<b>Trusted HTML</b><script>alert("Unsafe!");</script>');
});
<p ng-bind-html="trustedHTML"></p>
Warning: This approach is risky! It allows XSS if used incorrectly.