当前位置：首页 > 资讯 > 技术文档

详解AngularJs中$sce与$sceDelegate上下文转义服务

时间：2021-03-07 07:25 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解AngularJs中$sce与$sceDelegate上下文转义服务

[b]一、严格的上下文转义服务[/b] 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式。由用户通过[code]ng-bind-html[/code]绑定任意HTML语句就是这方面的一个例子。我们称这些上下文转义为特权或者SCE。 [b]二、$sce[/b] $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 || '');
 });
 };
 }];

[b]支持哪些信任的上下文类型？[/b] [code]$sce.HTML [/code] 将HTML代码安全的绑定到应用程序中。 [code]$sce.CSS[/code] 将CSS样式代码安全的绑定到应用程序中。 [code]$sce.URL[/code] 将URL安全的绑定到应用程序中并保证其可用。比如（href，src） [code]$sce.RESOURCE_URL[/code] 将RESOURCE_URL安全的绑定到应用程序中并保证其可用。比如（ng-href，ng-src） [code]$sce.JS[/code] 将JAVASCRIPT代码安全的绑定到应用程序中。 [b]如何使$sce服务可用或者不可用？[/b]

 angular.module(“myApp”,[]).config([“$sceProvider”,function($sceProvider){
 $sceProvider.enabled(true/false);
 }]);

[b]使用：[/b][code]$sce();[/code] [b]方法：[/b] [b]isEnabled();[/b] 返回一个boolean，指示是否可启用SCE。 [code]parseAs(type,expression);[/code] 将Angular表达式转换为一个函数。这类似$parse解析并且当表达式是常量时是相同的。否则，它将调用[code]$sce.getTrusted(type,result)[/code]将表达式包装。 type：在SCE的上下文的使用的结果的类型。 expression：被编译的字符串表达式。 [code]trustAs(type,value);[/code] 代表$sceDelegate.trustAs。 type：上下文中能安全的被使用的值，如url，resourceUrl，html，js和css。 value：需要被认为是安全或者值的信赖的值。 [code]trustAsHtml(value);[/code] $sceDelegate.trustAs($sce.HTML,value)的快捷方式。 value：被信任的值。 [code]trustAsUrl(value);[/code] $sceDelegate.trustAs($sce.URL,value)的快捷方式。 value：被信任的值。 [code]trustAsResourceUrl(value);[/code] $sceDelegate.trustAs($sce.RESOURCE_URL,value)的快捷方式。 value：被信任的值。 [code]trustAsJs(value);[/code] $sceDelegate.trustAs($sce.JS,value)的快捷方式。 value：被信任的值。 [code]getTrusted(type,maybeTrusted);[/code] 代表$sceDelegate.getTrusted。因此，得到了$sce的结果。如果查询的上下文类型是一个创造型的类型，则调用trustAs()并且返回原来提供的值。如果这个条件不满足，则抛出一个异常。 [code]getTrustedHtml(value);[/code] $sceDelegate.getTrusted ($sce.HTML,value)的快捷方式。 value：通过$sce.getTrusted执行后的值。 [code]getTrustedCss(value);[/code] $sceDelegate.getTrusted ($sce.CSS,value)的快捷方式。 value：通过$sce.getTrusted执行后的值。 [code]getTrustedUrl(value);[/code] $sceDelegate.getTrusted ($sce.URL,value)的快捷方式。 value：通过$sce.getTrusted执行后的值。 [code]getTrustedResourceUrl(value);[/code] $sceDelegate.getTrusted ($sce.RESOURCE_URL,value)的快捷方式。 value：通过$sce.getTrusted执行后的值。 [code]getTrustedJs(value);[/code] $sceDelegate.getTrusted ($sce.JS,value)的快捷方式。 value：通过$sce.getTrusted执行后的值。 [code]parseAsHtml(expression);[/code] $sce.parseAs ($sce.HTML,value)的快捷方式。 value：被编译的字符串表达式。 [code]parseAsCss(expression);[/code] $sce.parseAs ($sce.CSS,value)的快捷方式。 value：被编译的字符串表达式。 [code]parseAsUrl(expression);[/code] $sce.parseAs ($sce.URL,value)的快捷方式。 value：被编译的字符串表达式。 [code]parseAsResourceUrl(expression);[/code] $sce.parseAs ($sce.RESOURCE_URL,value)的快捷方式。 value：被编译的字符串表达式。 [code]parseAsJs(expression);[/code] $sce.parseAs ($sce.JS,value)的快捷方式。 value：被编译的字符串表达式。 [b]使用方式：[/b]

 <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" class="myCss"></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>

 (function () {
 angular.module('Demo', [])
 .filter("trust",["$sce",trust])
 .controller('testCtrl', testCtrl);
 function trust($sce){
  return function(value,type){
  return $sce.trustAs(type,value); 
  }
 };
 function testCtrl() {
  this.htmlText = "<h2>Hello World</h2>";
 }
 }());

上面是一个将不被Angular认定为信任的HTML代码字符串通过$sce设置为信任的HTML代码并且插入的例子，这里用了个小技巧，也就没在controller进行这步操作了，直接放到一个filter服务内，只要在需要的地方过滤下即可，并且可指定类型，这里写成统一动态选择类型了。那么在啥时候需要用到这两个服务呢？在当使用ng-bind-html绑定html时报错：Error: [$sce:unsafe]Attempting to use an unsafe value in a safe context. 的时候使用。 [b]三、$sceDelegate[/b] $sceDelegate是一个AngularJs为$sce服务提供严格的上下文转义服务的服务。通常，你会配置或者重写$sceDelegate去代替$sce服务以定制AngularJs中的严格的上下文转义机制。当$sce提供众多的快捷方式，你其实只需要重写三个核心功能（trustAs，getTrusted和valueOf）来替代事件的工作方式，因为$sce代表了$sceDelegate的这些操作。当你完成了重写或配置$sceDelegate用来改变$sce的行为时，一般情况下，需要配置$sceDelegateProvider以代替你用于装载可信任的AngularJs资源（如template）的白名单和黑名单。 [b]使用：[/b][code]$sceDelegate();[/code] [b]方法：[/b] [code]trustAs(type,value);[/code] 返回一个在angular中作为指定的使用严格的上下文转义服务上下文中的值的对象使用。 type：上下文中能安全的被使用的值，如url，resourceUrl，html，js和css。 value：需要被认为是安全或者值的信赖的值。 [code]valueOf(value);[/code] 如果传递的参数被上一个[code]$sceDelegate.trustAs[/code]调用返回，返回已通过[code]$sceDelegate.trustAs[/code]的值。否则返回原先的值。 value：上一个[code]$sceDelegate.trustAs[/code]调用的结果或者其他任何结果。 [code]getTrusted(type,maybeTrusted);[/code] 如果查询的上下文类型是一个创造型的类型，得到$sceDelegate调用的结果并返回最初提供的值。如果这个条件不满意，抛出一个异常。 type：需要用到的值的类型。 value：上一个[code]$sceDelegate.trustAs[/code]调用的结果或者其他任何结果。使用代码（配置白名单/黑名单）：

 angular.module('myApp', []).config([“$ sceDelegateProvider”,function($sceDelegateProvider) {
 $sceDelegateProvider.resourceUrlWhitelist([“whitelist value”]);
 $sceDelegateProvider.resourceUrlBlacklist([“blacklist value”]);
 }]);

总结以上就是这篇文章的全部内容，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：WordPress中用于更新伪静态规则的PHP代码实例讲解
下一篇：PHP获取一个字符串中间一部分字符的方法

资讯排行榜
更多>>