为了提升网站的安全性,避免恶意代码注入,AngularJs提供了相应的解决方案,测试代码如下:
04 | <meta charset= "UTF-8" > |
05 | <title>$sce服务安全的处理html数据</title> |
06 | <style type = "text/css" > |
07 | .ng-cloak{display:none;} |
10 | <body ng-app= "app" ng-controller= "ctr" ng-cloak class= "ng-cloak" > |
11 | <div ng-bind= "data1" ></div> |
12 | <div ng-bind-html= "data2" ></div> |
13 | <div ng-bind-html= "data1 | safeHtml" ></div> |
16 | <script type = "text/javascript" src= "http://www.zymseo.com/js/demo.js" ></script> |
17 | <script type = "text/javascript" src= "http://www.zymseo.com/js/angular.min.js" ></script> |
18 | <script type = "text/javascript" > |
19 | var m = angular.module( 'app' , []); |
20 | m.controller( 'ctr' , [ '$scope' , '$sce' , function ($scope, $sce){ |
21 | $scope.data1 = '<h1>赵一鸣WEB前端开发学习笔记</h1>' ; |
22 | $scope.data2 = $sce.trustAsHtml( '<h1>赵一鸣AngularJs学习笔记</h1>' ); |
24 | m.filter( 'safeHtml' , [ '$sce' , function ($sce){ |
25 | return function (htmlString){ |
26 | return $sce.trustAsHtml(htmlString); |
|
(完!)