angular ng-bind-html $sce.trustAsHtml

時間 2019-11-26

標籤 angular bind html sce.trustashtml sce trustashtml 欄目 AngularJS 简体版

原文原文鏈接

使用ng-bind-html和$sce.trustAsHtml顯示有html符號的內容

angularjs的強大之處之一在於它的雙向數據綁定的功能，咱們一般會使用data-ng-bind或者data-ng-model來綁定數據。可是在項目中不少數據都帶有各類各樣的html標籤，而angularjs綁定的數據都會默認以文本的形式輸出，並不會去識別html標籤，這樣作主要是爲了防止html標籤中的注入攻擊，提升了安全性。那麼如何顯示這些html標籤呢？html

主要有兩種方法：angularjs

1.過濾器

<body ng-app="myApp" ng-controller="myCtl">
<div ng-bind-html="htmlContent | to_trusted">
</div>
</body>安全

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtl',['$scope', function($scope){
        $scope.htmlContent = '<h1 style="color: orange">wednesday</h1>';
    }]);
    app.filter('to_trusted', ['$sce', function ($sce) {
　　  return function (text) {
    　　  return $sce.trustAsHtml(text);
　　};
}]);
</script>

2.$sce.trustAsHtmlapp

<body ng-app="myApp" ng-controller="myCtl">
    <div ng-bind-html="content">
    </div>
</body>

<script>
    var app = angular.module('myApp', []);
    $scope.content="My name is: <h1>John Doe</h1>";
    app.controller('myCtl',['$scope','$sce', function($scope,$sce){
        $scope.content = $sce.trustAsHtml( $scope.content );
    }]);
</script>

這裏主要有地方要注意：spa

1. ng-bind-html指令是經過一個安全的方式將內容綁定到HTML元素上，該屬性依賴於$sanitize，須要在項目中引入angular-sanitize.js文件，並在module定義時注入該服務ngSanitize。code

2.經過ng-bind-html指令綁定html元素，爲何還須要$sce？htm

這是由於若是在angularjs中綁定的數據有html標籤時，如上面的<h1>,會被angularjs認爲是不安全的而自動過濾掉，爲了保留這些標籤就須要開啓非安全模式，這是很是危險的。$sce是angularJS自帶的安全處理模塊，所以須要$sce.trustAsHtml()方法將數據內容以html的形式解析並返回。blog

3.幾種綁定方式的對比事件

(1)ng-bind-html和內置的$sanitize服務ip

$sanitize會自動對html標籤進行淨化，並會把標籤的屬性以及綁定在元素上的事件都移除，僅保留了標籤和內容。

(2)ng-bind-html和$sce.trustAsHtml()

它再也不通過sanitize服務的淨化，直接做爲元素的.html()綁定給元素,保留全部的屬性和事件，這一行的內容不依賴於ngSanitize模塊,$sce服務是內置的。

(3)ng-bind

綁定的值就做爲字符串填充到元素裏。

使用ng-bind-html容易引發XSS(腳本注入攻擊)，這一點必定要注意。