angular ng-bind-html $sce.trustAsHtml
阿新 • • 發佈：2017-11-30
解析結果 進行 這一 btn 行數 需要 屬性 rep class 使用ng-bind-html和$sce.trustAsHtml顯示有html符號的內容
angularJS在進行數據綁定時默認是會以文本的形式輸出，也就是對你數據中的html標簽不進行轉義照單全收，這樣提高了安全性，防止了html標簽中的註入攻擊，但有些時候還是需要的，特別是從數據庫讀取帶格式的文本時，無法正常的顯示在頁面中。
而要對html進行轉義，則要在數據綁定的html標簽中使用ng-bind-html屬性，該屬性依賴與$sanitize，也就是需要引入angular-sanitize.js文件，並在module定義時註入該服務ngSanitize。比如:
html:
<span如此則可以實現html轉義，但有個問題就是style這種標簽會被angularJS認為是不安全的所以統統自動過濾掉，而為了保留這些就需要開啟非安全模式。可以通過angular自帶的$sce服務解決。$sce是angularJS自帶的安全處理模塊，$sce.trustAsHtml(input)方法便是將數據內容以html的形式進行解析並返回。例如：ng-controller="myCtr" ng-bind-html = "htmlStr"></span> javascript: function myCtr($scope){ $scope.htmlStr = ‘<p style="color:red;font-size=18px;"></p>‘; };
<javascript：div ng-repeat="article in articles"> <div class="panel-heading"> <h4><b>{{article.title}}</b></h4> </div> <div class="panel-body"> <article id="word-display" ng-bind-html="article.content | trustHtml"> </article> </div> </div>
success(function (data) { $scope.articles = data; }); myApp.filter(‘trustHtml‘, function ($sce) { return function (input) { return $sce.trustAsHtml(input); } });還可以使用$sanitize服務，$sanitize會根絕一個白名單來凈化html標簽。這樣,不安全的內容就不會被返回. 白名單是根據$compileProvider的aHrefSanitizationWhitelist和imgSrcSanitizationWhitelist函數得到的. 貼一段代碼：
<!DOCTYPE html> <html ng-app="myApp"> <head> <title></title> <meta charset="utf-8"> <script src="../angular-1.3.2.js"></script> <script src="angular-sanitize.min.js"></script> <script src="script.js"></script> <link type="text/css" href="../bootstrap.css" rel="stylesheet" /> </head> <body> <div class="container"> <table class="table table-bordered" ng-controller="ctrl"> <caption>通過ngSanitize模塊的$sanitize服務解析html</caption> <thead> <tr> <th>使用的指令</th> <th>格式化方法</th> <th>指令的寫法</th> <th>解析結果</th> </tr> </thead> <tbody> <tr> <td>ng-bind-html</td> <td>使用內置的$sanitize <br/>(不需要出現在js裏,只要模型添加了ngSanitize模塊, <br/>然後使用ng-bind-html,它的值就自動通過$sanitize編譯)</td> <td><pre><div ng-bind-html="myHtml"><br></div></pre></td> <td><div ng-bind-html="myHtml"></div></td> </tr> <tr> <td>ng-bind-html</td> <td>使用$sce的trustAsHtml方法編譯<br/>(以後會細講$sce服務,這裏不是重點)</td> <td><pre><div ng-bind-html="trustHtml"><br></div></pre></td> <td><div ng-bind-html="trustHtml"></div></td> </tr> <tr> <td>ng-bind</td> <td>不編譯</td> <td><pre><div ng-bind="myHtml"><br></div></pre></td> <td><div ng-bind="myHtml"></div></td> </tr> </tbody> </table> <a class="btn btn-default" href="http://plnkr.co/edit/3FBasliZTRjKs3jwTpoR?p=preview" role="button">plunker</a> </div> </body> </html>JS部分：
var app =angular.module(‘myApp‘,[‘ngSanitize‘]); app.controller(‘ctrl‘,function($scope,$sce){ $scope.myHtml = ‘<p style="color:blue">an html\n‘ + ‘<em onclick="this.textContent=\‘code_bunny\‘">click here</em>\n‘ + ‘snippet</p>‘; $scope.trustHtml = $sce.trustAsHtml($scope.myHtml) });對比一下這三種情況的結果： 具體的結果可以看: http://plnkr.co/edit/3FBasliZTRjKs3jwTpoR?p=preview ng-bind-html如果使用內置的 $sanitize服務，那麽$sanitize會自動對myHtml進行凈化.$sanitize會把標簽的屬性都移除,以及綁定在元素上的事件.僅保留了標簽和內容. ng-bind-html如果 通過$sce.trustAsHtml()處理以後的返回值，它不再經過$sanitize服務的凈化.直接作為元素的.html()綁定給元素,保留所有的屬性和事件,這一行的內容不依賴於ngSanitize模塊,$sce服務是內置的. 當使用ng-bind指令時,綁定的值就作為字符串填充到元素裏 使用ng-bind-html容易引起XSS(腳本註入攻擊)，這一點會在後面介紹。
angular ng-bind-html $sce.trustAsHtml