一、严格的上下文转义服务
严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式。由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子。我们称这些上下文转义为特权或者SCE。
二、$sce
$sce 服务是AngularJs提供的一种严格上下文转义服务。
下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码):
var ngBindHtmlDirective = ['$sce', function($sce) { return function(scope, element, attr) { scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) { element.html(value || ''); }); }; }];
支持哪些信任的上下文类型?
$sce.HTML 将HTML代码安全的绑定到应用程序中。
$sce.CSS 将CSS样式代码安全的绑定到应用程序中。
$sce.URL 将URL安全的绑定到应用程序中并保证其可用。比如(href,src)
$sce.RESOURCE_URL 将RESOURCE_URL安全的绑定到应用程序中并保证其可用。比如(ng-href,ng-src)
$sce.JS 将JAVASCRIPT代码安全的绑定到应用程序中。
如何使$sce服务可用或者不可用?
angular.module(“myApp”,[]).config([“$sceProvider”,function($sceProvider){ $sceProvider.enabled(true/false); }]);
使用:$sce();
方法:
isEnabled();
返回一个boolean,指示是否可启用SCE。
parseAs(type,expression);
将Angular表达式转换为一个函数。这类似$parse解析并且当表达式是常量时是相同的。否则,它将调用$sce.getTrusted(type,result)将表达式包装。
type:在SCE的上下文的使用的结果的类型。
expression:被编译的字符串表达式。
trustAs(type,value);
代表$sceDelegate.trustAs。
type:上下文中能安全的被使用的值,如url,resourceUrl,html,js和css。
value:需要被认为是安全或者值的信赖的值。
trustAsHtml(value);
$sceDelegate.trustAs($sce.HTML,value)的快捷方式。
value:被信任的值。
trustAsUrl(value);
$sceDelegate.trustAs($sce.URL,value)的快捷方式。
value:被信任的值。
trustAsResourceUrl(value);
$sceDelegate.trustAs($sce.RESOURCE_URL,value)的快捷方式。
value:被信任的值。
trustAsJs(value);
$sceDelegate.trustAs($sce.JS,value)的快捷方式。
value:被信任的值。
getTrusted(type,maybeTrusted);
代表$sceDelegate.getTrusted。因此,得到了$sce的结果。如果查询的上下文类型是一个创造型的类型,则调用trustAs()并且返回原来提供的值。如果这个条件不满足,则抛出一个异常。
getTrustedHtml(value);
$sceDelegate.getTrusted ($sce.HTML,value)的快捷方式。
value:通过$sce.getTrusted执行后的值。
getTrustedCss(value);
$sceDelegate.getTrusted ($sce.CSS,value)的快捷方式。
value:通过$sce.getTrusted执行后的值。
getTrustedUrl(value);
$sceDelegate.getTrusted ($sce.URL,value)的快捷方式。
value:通过$sce.getTrusted执行后的值。
getTrustedResourceUrl(value);
$sceDelegate.getTrusted ($sce.RESOURCE_URL,value)的快捷方式。
value:通过$sce.getTrusted执行后的值。
getTrustedJs(value);
$sceDelegate.getTrusted ($sce.JS,value)的快捷方式。
value:通过$sce.getTrusted执行后的值。
parseAsHtml(expression);
$sce.parseAs ($sce.HTML,value)的快捷方式。
value:被编译的字符串表达式。
parseAsCss(expression);
$sce.parseAs ($sce.CSS,value)的快捷方式。
value:被编译的字符串表达式。
parseAsUrl(expression);
$sce.parseAs ($sce.URL,value)的快捷方式。
value:被编译的字符串表达式。
parseAsResourceUrl(expression);
$sce.parseAs ($sce.RESOURCE_URL,value)的快捷方式。
value:被编译的字符串表达式。
parseAsJs(expression);
$sce.parseAs ($sce.JS,value)的快捷方式。
value:被编译的字符串表达式。
使用方式:
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <textarea ng-model="ctrl.jsContext"></textarea> <pre ng-bind="ctrl.jsBody"></pre> <button ng-click="ctrl.runJs()">Run</button> <div ng-bind-html="ctrl.htmlText"></div> </div>
(function () { angular.module('Demo', []) .controller('testCtrl', ["$sce","$scope",testCtrl]); function testCtrl($sce,$scope) { var vm = this; $scope.$watch("ctrl.jsContext",function(n){ vm.jsBody = n; }); this.runJs = function() { eval(vm.jsBody.toString()); }; vm.htmlText = "<h2>Hello World</h2>"; vm.htmlText =$sce.trustAsHtml(this.htmlText); } }());
放在filter使用:
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <div ng-bind-html="ctrl.htmlText | trust:'html'"></div> </div>