This article shows different solutions for XSS (cross-site scripting) and how to use the SCE ($sceProvider) and sanitize service features in AngularJS to correctly handle XSS. If I missed anything important please comment/suggest directly. Also, please forgive me for typos.
The following points will be the focus of what I will talk about next:
Use ng-bind directive to transcode HTML
You can use the ng-bind directive to transcode the entire web page. It will transcode all HTML tags but still display them as they are. The following code shows the usage of ng-bind.
<div>
<form>
<h1>AngularJS XSS Demo Test</h1>
<hr/>
<div class="col-md-12">
<input type="text" ng-model="name" class="form-control col-md-12" ng-change="processHtmlCode()" placeholder="Enter Some HTML Text..."/>
</div>
</form>
</div>
<hr/>
<div style="padding:20px">
<span><strong>ng-bind directive: Note that HTML text is entered as it is.</strong></span><br/>
<span ng-bind="helloMessage">{{helloMessage}}</span>
</div>
The picture below proves the above statement. Note the HTML code in the input field. It's exactly the same as in an HTML page.
Insert HTML in a safe way, or use the ng-bind-html directive to ignore elements such as "script"
This is the key to solving XSS attacks. That said, you should still pay attention to elements such as "img" (included as part of the whitelist; as well as empty elements) because it can be used in your web pages Display any image (including illegal ones) on it, therefore, it may also have a negative impact on your web page. Using the ng-bind-html directive, AngularJS JavaScript tags such as "script" can be ignored directly. The ng-bind-html directive evaluates the expression and inserts the resulting HTML into the element in a safe way. For situations where the user will enter input that contains HTML content (such as in a comment), put it in the ng-bind-html directive This ensures that the text is encoded as a whitelist of safe HTML characters. The whitelist of safe characters is encoded as part of $sanitize, described below. The following are included in the safe list (obtained directly from the source code ):
Empty element:
Block element:
Inline elements:
End tag element:
The following two elements need to be circumvented because their content is not trusted. In this case, if you want to display them, you need to use the $sce service and call Angular's trustAsHtml method to execute the elements mentioned below. .
The code presented below demonstrates the use of the ng-bind-html directive.
<div> <form> <h1>AngularJS XSS Demo Test</h1> <hr/> <div class="col-md-12"> <input type="text" ng-model="name" class="form-control col-md-12" ng-change="processHtmlCode()" placeholder="Enter Some HTML Text..."/> </div> </form> </div> <hr/> <div style="padding:20px"> <span>ng-bind-html directive: Note that image is displayed appropriately as a result of text entered in the text field.</span> <span ng-bind-html="helloMessage"></span> </div>
下面这张图片展示了当在文本域中输入HTML代码，Angular用一种安全的方式插入到DOM时，是什么样子的. 注意 “img” 元素是上述列表中空元素的一份子. 因为代码被输入到了文本域中，作为”img"出现的图片被放到了受信任的列表（白名单）中。
信任并插入整段HTML
警告: 这很危险，并且可能很容易就最终造成你web站点的污染. 只有当你知道并且充分确认时，你才应该使用 trustAsHtml. 如此，你就有充足的信心认为这段文本是可以被信任的, 你应该使用$sce 服务并且调用 trustAsHtml 方法来讲整段HTML插入DOM中。在$sce服务被用来调用 trustAsHtml 方法来信任一段HTML代码时，请留意HTML和其中的JavaScript代码块. 在这种情况下，一段诸如 “” 这样的代码被插入了，它最后可能会也给现有的HTML元素加上样式。这可能不是很好。人们也可能采用那种方式用非法的图片替换背景图片.
<script type="text/javascript">
angular.module('HelloApp', ["ngSanitize"])
.controller('HelloCtrl', ['$scope', '$sce', function($scope, $sce){
$scope.name="";
$scope.processHtmlCode = function() {
$scope.helloMessage = "<h1>" + $scope.name + "</h1>";
$scope.trustedMessage = $sce.trustAsHtml( $scope.name );
}
}])
</script>
<!-- Pay attention to class hello which is coded in UI and as a result, element is painted in red-->
<div style="padding:20px">
<span class="hello"><strong>ng-bind directive: Note that HTML text is entered as it is.</strong></span><br/>
<span class="hello" ng-bind="helloMessage">{{helloMessage}}</span>
</div>
<hr/>
<div style="padding:20px">
<span>Note that script tag is executed as well.</span>
<span ng-bind-html="trustedMessage"></span>
</div>
下面的图片展示了当在文本域中输入将要被插入DOM中的HTML样式代码时，会是什么样子. 这里的结果就是, 其它的HTML元素也带上了红色， 如下所示. 在某些场景中，黑客可能会插入一段带有背景样式越苏，这可能会显示出原本不要被显示的背景，给最终用户带来糟糕的体验.
<html>
<head>
<title>Hello AngularJS</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-sanitize.min.js"></script>
</head>
<body class="container" ng-app="HelloApp" ng-controller="HelloCtrl">
<div>
<form>
<h1>AngularJS XSS Demo Test</h1>
<hr/>
<div class="col-md-12">
<input type="text" ng-model="name" class="form-control col-md-12" ng-change="processHtmlCode()" placeholder="Enter Some HTML Text..."/>
</div>
</form>
<hr/>
</div>
<hr/>
<div style="padding:20px">
<span class="hello"><strong>ng-bind directive: Note that HTML text is entered as it is.</strong></span><br/>
<span class="hello" ng-bind="helloMessage">{{helloMessage}}</span>
</div>
<hr/>
<div style="padding:20px">
<span>Note that script tag is executed as well.</span>
<span ng-bind-html="trustedMessage"></span>
</div>
<hr/>
<div style="padding:20px">
<span>ng-bind-html directive: Note that image is displayed appropriately as a result of text entered in the text field.</span>
<span ng-bind-html="helloMessage"></span>
</div>
<hr/>
<script type="text/javascript">
angular.module('HelloApp', ["ngSanitize"])
.controller('HelloCtrl', ['$scope', '$sce', function($scope, $sce){
$scope.name="";
$scope.processHtmlCode = function() {
$scope.helloMessage = "<h1>" + $scope.name + "</h1>";
$scope.trustedMessage = $sce.trustAsHtml( $scope.name );
}
}])
</script>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
