当前位置: 首页 > 编程日记 > 正文

Angular - - $sce 和 $sceDelegate

$sce

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

严格的上下文转义服务

严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式。由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子。我们称这些上下文转义为特权或者SCE。

下面代码是简化了的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; }); vm.runJs = function() { eval(vm.jsBody.toString()); }; vm.htmlText = "<h2>Hello World</h2>"; vm.htmlText =$sce.trustAsHtml(vm.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() { var vm = this; vm.htmlText = "<h2>Hello World</h2>"; } }());
复制代码

上面是一个将不被Angular认定为信任的HTML代码字符串通过$sce设置为信任的HTML代码并且插入的例子,这里用了个小技巧,也就没在 controller进行这步操作了,直接放到一个filter服务内,只要在需要的地方过滤下即可,并且可指定类型,这里写成统一动态选择类型了。那么 在啥时候需要用到这两个服务呢,答案是在当你绑定ng-bind-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”]);}]);

写完睡觉  -。-  这篇准备了两天,在google找了些较详细的资料参考了下,然后写出大致的中文,再写demo,不过感觉这个相关的文章多是多,写的却都复制个源码, 注释2-3句就差不多,还不如实用些的来个demo,所以直接扔上来两串测过后运行成功的代码...

相关文章:

Varnish 和 Squid比较到底强多少

对于坊间流传的:1.varnish的性能比squid高10~20倍2.squid 3.0的性能比2.6有提高本次测试将会揭示结果,是否varnish的架构真的能提升那么多的性能是否squid的新版本在性能上有所提升测试中将不对平台.软件.等等进行优化由于优化水平的关系将极大的影响结果.此次测试中的数据可以…

太强了,Python 开发桌面小工具,让代码替我们干重复的工作~

作者 | Cherish 来源 | 杰哥的IT之旅 决定写这篇文章的初衷是来源于一位小伙伴的问题&#xff0c;关于"如何根据数据源用 Python 自动生成透视表"&#xff0c;这个问题背后有个非常好的解决思路&#xff0c;让代码替我们做重复的工作&#xff0c;从而减轻工作量&…

Windows 2008

Windows2008系统实现多用户登录 https://help.aliyun.com/knowledge_detail/6530052.html?spm5176.7618386.5.1.RTfIVT#Windows2008系统实现多用户登录 ECS Windows2008如何支持用户多会话登入 https://help.aliyun.com/knowledge_detail/6511066.html?spm5176.7618386.5.1.f…

java 复制对象有哪些方式

2019独角兽企业重金招聘Python工程师标准>>> java 复制对象有哪些方式 Apache的 Common beanutils库 org.apache.commons.beanutils.BeanUtils.copyProperties(dest,origin);Springframework 的BeanUtil 依赖: <dependency><groupId>org.springframewor…

mysql常用语句集锦

mysql UNIX时间戳与日期的相互转换 UNIX时间戳转换为日期用函数&#xff1a; FROM_UNIXTIME() select FROM_UNIXTIME(1156219870); 日期转换为UNIX时间戳用函数&#xff1a; UNIX_TIMESTAMP() Select UNIX_TIMESTAMP(’2006-11-04 12:23:00′); 例&#xff1a;mysql查询当天的记…

iOS15.4 来袭:新增“男妈妈”表情及口罩面容解锁、AirTags 反跟踪等新功能

整理 | 章雨铭 责编 | 屠敏出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;今日&#xff0c;苹果发布了iOS/iPadOS 15.4正式版。该版本带来了一些重大新功能的更新&#xff0c;包括在戴口罩时使用Face ID功能&#xff0c;以及一些新的表情符号和Siri语音更新…

symfony2项目访问app_dev.php不显示debug工具栏的问题

2019独角兽企业重金招聘Python工程师标准>>> 当在symfony2中比如添加一个bundle后&#xff0c;访问app_dev.php时不会显示底部debug工具栏&#xff0c;一种情况是模板中没有包含有效的html标签 参考&#xff1a;http://stackoverflow.com/questions/10399089/symfon…

PHP的Smarty

原理&#xff1a;把模板文件编译成php文件&#xff0c;然后每次都去读取下模板的修改时间&#xff0c;没有修改就不编译。然后include这个“编译”后的PHP文件。所谓编译也就是模板用正则替换成含PHP代码的过程。实际上并不会每次请求都编译&#xff0c;所以性能尚可。而SMARTY…

真香!精心整理了 100+Python 字符串常用操作

来源丨萝卜大杂烩作者丨周萝卜字符串作为平时使用最多的数据类型&#xff0c;其常用的操作我们还是很有必要熟记于心的&#xff0c;本文整理了多种字符串的操作的案例&#xff0c;还是非常用心&#xff0c;记得点赞收藏~字符串切片操作test "Python Programming" pr…

IOS版添加phonegap-视频播放插件教程

2019独角兽企业重金招聘Python工程师标准>>> 插件集成过程&#xff1a;1.配置Target链接参数选择 Build Settings | Linking | Other Linker Flags, 将该选项的 Debug/Release 键都配置为-ObjC。2.Vitamio SDK 依赖的系统框架和系统库如下:– AVFoundation.framwork…

C#线程同步的几种方法

在网上也看过一些关于线程同步的文章&#xff0c;其实线程同步有好几种方法&#xff0c;下面我就简单的做一下归纳。 一、volatile关键字 volatile是最简单的一种同步方法&#xff0c;当然简单是要付出代价的。它只能在变量一级做同步&#xff0c;volatile的含义就是告诉处理器…

ecshop模板的原理分析

模板的原理 类似Smarty/ECShop这类模板的原理如下图所示。1.首先是编译模板ECShop/Smart是利用PHP引擎&#xff0c;所以编译的结果是一个PHP文件&#xff0c;其编译过程就是将分隔符{}替换成PHP的标准分隔符<?PHP ?>&#xff0c;将$var替换成 echo $var; 或者print $va…

Python 快速生成 web 动态展示机器学习项目!

来源丨网络作者丨wedo实验君1. Streamlit一句话&#xff0c;Streamlit是一个可以用python编写web app的库&#xff0c;可以方便的动态展示你的机器学习的项目。优点你不需要懂html&#xff0c; css&#xff0c; js等&#xff0c;纯python语言编写web app包括web常用组件&#x…

Linux-CentOS 7 增加root分区容量

今天搭建了一台CentOS 7 的机器&#xff0c;搭建完成后通过【df -lh】看了一下分区大小&#xff0c;root分区太小了。 分区.png打算把home分区的容量分一部分给root&#xff0c;具体操作步骤如下&#xff1a; 备份home分区cp -r /home/ homebak卸载【home】目录umount /home/现…

PHP数组实际占用内存大小的分析

http://blog.csdn.net/hguisu/article/details/7376705我们在前面的php高效写法提到&#xff0c;尽量不要复制变量&#xff0c;特别是数组。一般来说&#xff0c;PHP数组的内存利用率只有 1/10, 也就是说&#xff0c;一个在C语言里面100M 内存的数组&#xff0c;在PHP里面就要1…

肝货,详解 tkinter 图形化界面制作流程!

作者 | 黄伟呢来源 | 数据分析与统计学之美本期案例是带着大家制作一个属于自己的GUI图形化界面—>用于设计签名的哦(效果如下图)&#xff0c;是不是感觉很好玩&#xff0c;是不是很想学习呢&#xff1f;限于篇幅&#xff0c;今天我们首先详细讲述一下Tkinter的使用方法。tk…

迁移碰到数据库 Unknown collation: 'utf8mb4_unicode_ci'

数据库从香港服务器迁移到阿里云的虚拟主机&#xff0c;不得不吐槽一下。阿里云的ftp好慢&#xff0c;db导入面板也不够友好。 还得靠中断命令行链接&#xff0c;结果版本太低不支持 utf8mb4_unicode_ci&#xff0c;尼玛&#xff0c;现在都mysql5.7了&#xff0c;您还在 5.1时代…

15-shell 输入/输出重定向

大多数 UNIX 系统命令从你的终端接受输入并将所产生的输出发送回到您的终端。一个命令通常从一个叫标准输入的地方读取输入&#xff0c;默认情况下&#xff0c;这恰好是你的终端。同样&#xff0c;一个命令通常将其输出写入到标准输出&#xff0c;默认情况下&#xff0c;这也是…

高性能Mysql主从架构的复制原理及配置详解

1 复制概述Mysql内建的复制功能是构建大型&#xff0c;高性能应用程序的基础。将Mysql的数据分布到多个系统上去&#xff0c;这种分布的机制&#xff0c;是通过将Mysql的某一台主机的数据复制到其它主机&#xff08;slaves&#xff09;上&#xff0c;并重新执行一遍来实现的。复…

gdal 1.9+python 2.7开发环境配置

最近项目使用Cesium平台基于WegGl做web地球&#xff0c;其中关于地形数据有一种支持格式为terrain的地形数据。这种格式可以通过一个python工具切dem来得到。 下面记录下配置gdalpython开发环境&#xff0c;系统是win7 64位&#xff0c;不过gdal和python是32位的&#xff0c;没…

破纪录了!用 Python 实现自动扫雷!

用PythonOpenCV实现了自动扫雷&#xff0c;突破世界记录&#xff0c;我们先来看一下效果吧。中级 - 0.74秒 3BV/S60.81相信许多人很早就知道有扫雷这么一款经典的游&#xff08;显卡测试&#xff09;戏&#xff08;软件&#xff09;&#xff0c;更是有不少人曾听说过中国雷圣&a…

java高并发编程(二)

马士兵java并发编程的代码&#xff0c;照抄过来&#xff0c;做个记录。 一、分析下面面试题 /*** 曾经的面试题&#xff1a;&#xff08;淘宝&#xff1f;&#xff09;* 实现一个容器&#xff0c;提供两个方法&#xff0c;add&#xff0c;size* 写两个线程&#xff0c;线程1添加…

LAMP 关键数据集锦技术选项参考

LAMP 关键数据集锦技术选项参考 源自日积月累自己的其他人的经验总结负载均衡 LVS工作在四层&#xff0c;内核态&#xff0c;性能极高&#xff0c;有VIP功能&#xff0c;配合 keepalived 做有效的 心跳检查和负载均衡安装配置麻烦&#xff0c;HAProxy工作在四层到七层&am…

centos7 设置中文

查看系统版本[rootwebtest76 ~]# cat /etc/redhat-releaseCentOS Linux release 7.0.1406 (Core) [rootlocalhost ~]# cat /etc/locale.conf LANGen_US.UTF-8[rootlocalhost ~]# cp /etc/locale.conf /etc/locale.conf_bak[rootlocalhost ~]# vim /etc/locale.conf # 修改后原英…

Python最常用的函数、基础语句有哪些?

作者 | 朱卫军来源 | Python大数据分析Python有很多好用的函数和模块&#xff0c;这里给大家整理下我常用的一些方法及语句。一、内置函数内置函数是python自带的函数方法&#xff0c;拿来就可以用&#xff0c;比方说zip、filter、isinstance等。下面是Python官档给出的内置函数…

1.5s~0.02s,期间我们可以做些什么?

原文是在我自己博客中&#xff0c;小伙伴也可以点阅读原文进行跳转查看&#xff0c;还有好听的背景音乐噢背景音乐已取消~ 2333333大爷我就算功能重做&#xff0c;模块重构&#xff0c;我也不做优化&#xff01;&#xff01;&#xff01;运行真快&#xff01; 前言 本文主要探讨…

Python 自动化办公之 Excel 拆分并自动发邮件

作者 | 周萝卜来源 | 萝卜大杂烩今天我们来分享一个真实的自动化办公案例&#xff0c;希望各位 Python 爱好者能够从中得到些许启发&#xff0c;在自己的工作生活中更多的应用 Python&#xff0c;使得工作事半功倍&#xff01;需求需要向大约 500 名用户发送带有 Excel 附件的电…

In Gradle projects, always use http://schemas.andr

2019独角兽企业重金招聘Python工程师标准>>> 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 在做项目自定义时候遇到这个错误 In Gradle projects, always use http://schemas.android.com/apk/res-auto for custom attributes 解决办…

HTTP POST慢速DOS攻击初探

1. 关于HTTP POST慢速DOS攻击 HTTP Post慢速DOS攻击第一次在技术社区被正式披露是今年的OWASP大会上&#xff0c;由Wong Onn Chee 和 Tom Brennan共同演示了使用这一技术攻击的威力。他们的slides在这里&#xff1a; http://www.darkreading.com/galleries/security/applicatio…

Java 学习(20)--异常 /  IO 流

异常&#xff08;Exception&#xff09; (1)程序出现的不正常的情况。 (2)异常的体系 Throwable&#xff08;接口&#xff0c;将异常类对象交给 JVM 来处理&#xff09; |--Error 严重问题&#xff0c;我们不处理。(jvm 错误&#xff0c;程序无法处理) |--Exception 异常 …