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


Posted in Javascript onSeptember 21, 2016

一、严格的上下文转义服务

严格的上下文转义(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" 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. 的时候使用。

三、$sceDelegate

$sceDelegate是一个AngularJs为$sce服务提供严格的上下文转义服务的服务。

通常,你会配置或者重写$sceDelegate去代替$sce服务以定制AngularJs中的严格的上下文转义机制。当$sce提供众多的快捷方式,你其实只需要重写三个核心功能(trustAs,getTrusted和valueOf)来替代事件的工作方式,因为$sce代表了$sceDelegate的这些操作。

当你完成了重写或配置$sceDelegate用来改变$sce的行为时,一般情况下,需要配置$sceDelegateProvider以代替你用于装载可信任的AngularJs资源(如template)的白名单和黑名单。

使用:$sceDelegate();

方法:

trustAs(type,value);

返回一个在angular中作为指定的使用严格的上下文转义服务上下文中的值的对象使用。

type:上下文中能安全的被使用的值,如url,resourceUrl,html,js和css。

value:需要被认为是安全或者值的信赖的值。

valueOf(value);

如果传递的参数被上一个$sceDelegate.trustAs调用返回,返回已通过$sceDelegate.trustAs的值。否则返回原先的值。

value:上一个$sceDelegate.trustAs调用的结果或者其他任何结果。

getTrusted(type,maybeTrusted);

如果查询的上下文类型是一个创造型的类型,得到$sceDelegate调用的结果并返回最初提供的值。如果这个条件不满意,抛出一个异常。

type:需要用到的值的类型。

value:上一个$sceDelegate.trustAs调用的结果或者其他任何结果。

使用代码(配置白名单/黑名单):

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

总结

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

Javascript 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
js+css实现打字效果
Jun 24 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 #Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 #Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 #Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 #Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 #Javascript
JS获取鼠标相对位置的方法
Sep 20 #Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 #Javascript
You might like
PHP错误和异长常处理总结
2014/03/06 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
简单实现js浮动框
2016/12/13 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
Python进阶-函数默认参数(详解)
2017/05/18 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
解决python线程卡死的问题
2019/02/18 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
String和StringBuffer的区别
2015/08/13 面试题
中学门卫岗位职责
2013/12/26 职场文书
《我的信念》教学反思
2014/02/15 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
村级换届选举方案
2014/05/10 职场文书
董事长助理工作职责
2014/06/08 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
幼儿学前班评语
2014/12/29 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
个人总结怎么写
2015/02/26 职场文书
师范生见习自我总结
2015/06/23 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers