iangularjs 模板_AngularJS中的模板安全与作用域绑定
欢迎大家指导与讨论 : )
一、前言
摘要:指令compile、$sce、作用域绑定、$compileProvider和其他资源安全设置。本文是笔者在学习时整理的笔记,由于技术还不够高,如果本章中有错误的地方希望各位能够指出,共同进步O(∩_∩)O
二、compile与$compile
二 . 1 指令中的compile
指令的创建需要经历三大过程: compile(编译) -> preLink(链接作用域前) -> postLink(链接作用域后)。三大过程由前到后按顺序执行,当我们到达postLink(平时创建指令的link函数),就说明这个指令及其子模板都已经经过complie编译了(complie过程最先执行)。其中,complie过程能够访问element实例和element的属性并且只执行一次 compile: function(tElem, tAttrs){//...} 。由于在这个过程还没有进行element与作用域scope的链接并且只执行一次,因此在这个时候对DOM进行操作只有很小的性能开销。因此建议DOM的事件绑定放到complie阶段。而在postLink过程中,因为element已经和作用域绑定了,所以一些需要保证必须执行的代码可以放到link(postLink)中执行 function(scope, iElem, iAttrs){//...}
二 . 2 使用$compile服务进行作用域绑定
$complie服务能够让我们的HTML模板与作用域进行绑定,当我们在指令中需要这么做的时候我们可以这样子写
$compile(element.contents())(scope);//element.contents()表示为当前元素及其所有子元素
三、$sce
$sce是一个非常出色的服务,它允许我们编写黑白名单,默认保护代码,并在很大程度上帮助我们放在XSS和其他漏洞。像是指令中的templateUr、ng-bind-html或者ng-include也是默认使用这个服务
三 . 1 模板安全与实例
假设我们有如下需求:允许用户在编写HTML代码,并得到即时预览。我们希望angular能够允许受信任的内容返回并插入到DOM中。
//html代码
//指令代码
var ngBindHtmlDirective = ['$sce', function($sce) {return function(scope, element, attr) {
scope.$watch($sce.parseAsHtml(attr.ngBindHtml),function(value) {
element.html(value|| '');
});
};
}];
三 . 2 模板加载来源与黑白名单
默认情况下,angular只允许我们在同一域中加载我们所需要的模板,但当我们有特殊需求时,我们通过$sceDelegateProvider.resourceUrlWhitelist()设置白名单来改变这个默认规则(可能需要服务端配合CORS来达到目的)。
三 . 2. 1 当resourceUrlWhitelist中没有参数
此方法变成getter方法,返回当前白名单数组
三 . 2. 2 当resourceUrlWhitelist中参数为self
angular会确保我们所要下载的模板在应用的同一域下
三 . 2. 2 当resourceUrlWhitelist中参数为其他正则表达式
angular会匹配资源所对应的绝对URL
angular.module('app', [])
.config(['$sceDelegateProvider', function($sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist(['.*])
}])
三 . 3 资源安全$compileProvider
三 . 3 . 1 链接资源安全 aHrefSanitizationWhitelist
笔者在做小项目的时候遇到过,自定义的链接在view中被渲染的时候被angular加上了不信任标记,导致不能正常使用
通过设置资源白名单来解决这个问题(注:参数使用正则表达式)
app.config(['$compileProvider' , function($compileProvider)
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|app):/);
}]);
三 . 3 . 1 图片资源安全 imgHrefSanitizationWhitelist(同上)
四、官网实例
//html
User comments
By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when
$sanitize is available. If $sanitize isn't available, this results in an error instead of an
exploit.
{{userComment.name}}:
//js
angular.module('mySceApp', ['ngSanitize'])
.controller('AppController', ['$http', '$templateCache', '$sce',
function($http, $templateCache, $sce) {
var self = this;
$http.get("test_data.json", {cache: $templateCache}).success(function(userComments) {
self.userComments = userComments;
});
self.explicitlyTrustedHtml = $sce.trustAsHtml('Hover over this text.');
}]);//data.json
[
{"name": "Alice","htmlComment":"Is anyone reading this?"},
{"name": "Bob","htmlComment": "Yes! Am I the only other one?"}
]
五、资料参考
《ngBook》 P385
官方文档 http://docs.angularjs.cn/api/ng/service/$sce
其他博客(强烈推荐) http://www.ifeenan.com/angularjs/2014-09-04-%5B译%5DNG指令中的compile与link函数解析/
iangularjs 模板_AngularJS中的模板安全与作用域绑定相关推荐
- c++中的模板_C ++中的模板
c++中的模板 Templates in C++ are an abstract version of Generic Programming wherein the code is written ...
- es6模板字符串中标签模板作为参数时产生空元素的问题
当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,-values) arr:模板字符串中所有那些没有变量替换的部分 -values:各个变量替换后的值 即 let a = 'Oh!' ...
- PHP Smarty 模板,php中Smarty模板初体验
下面介绍一下Smarty模板引擎的特性: 1. 速度:采用Smarty编写的程序可以获得最大速度的提高,这一点是相对于其它的模板引擎技术而言的. 2. 编译型:采用Smarty编写的程序在运行时要编译 ...
- 模板字符串中 嵌套模板字符串
模板字符串中有需求循环数据放到其中,原先我用arr.map(item=><li><a>${arr.content}</a></li>) 这样不符合 ...
- C++ 中的模板类声明头文件和实现文件分离后,如何能实现正常编译?
著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:余天升 链接:http://www.zhihu.com/question/20630104/answer/15722407 ...
- 解决phpcms模版设置中不能显示栏目首页模板,栏目列表页模板,内容页模板等下拉菜单选项的问题!...
第1步:检查相应的模版文件夹中是否有模版文件 一般地,查看目录phpcms/templates/default[模板风格标识]/content 栏目首页模板:以(category_)开头,catego ...
- 发布文章的php模板,PHP实现发送模板消息(微信公众号版)
以下为开发步骤: 1.微信公众号为服务号且开通微信认证(其他类型账号不能发送) 2.ip白名单设置你的服务器ip(用于获取access_token) 3.网页授权你的域名(用于获取用户的openid) ...
- 微信公众号开发-----微信模板消息接口-----发送模板消息
发送模板消息 接口调用请求说明 http请求方式: POST https://api.weixin.qq.com/cgi-bin/message/template/send?access_token= ...
- iangularjs 模板_AngularJS 模板(Templates)
AngularJS 模板(Templates) Angular的模板是一个声明式的视图,它指定信息从模型.控制器变成用户在浏览器上可以看见的视图. 它把一个静态的DOM -- 只包含HTML,CSS以 ...
最新文章
- 【面向工业界】推荐算法工程师培养计划
- ESXi 6.5 进入维护模式死机在68%的进度的bug
- (0038) iOS 开发之Xcode下的DerivedData文件
- 【宝,我去读书了。读的什么书,给你的情书】《数据结构(c++)邓俊晖》-绪论篇
- MAC通过SSH使用PEM文件登录
- WebRTC 系列之视频辅流
- Android中使用的数据单位
- 今天开始学opnet14.5
- Redis缓存持久化:RDB持久化和AOF持久化
- 二叉树——数据结构课堂作业
- 学习 About iOS App Programming 第一天
- java 创建txt_JAVA读取TXT文件、新建TXT文件、写入TXT文件
- 马化腾的互联网之路:别人不是打不赢你,掌声越热烈就越危险
- 数据库系统概述--关系数据库标准语言SQL
- SqlServer使用top 100 PERCENT 无法排序的问题
- 2020-10-15 Comsl学习3
- centos7.1 修改selinux相关机制后出现开机失败,报错faild to load selinux policy freezing
- Figma#1: 图形绘制
- 使用Java导出Excel表格并由浏览器直接下载——基于POI框架
- android 获取权限管理,Android获取超级管理员权限的实现
热门文章
- Vim 自动文件头注释与模板定义
- VS生成时复制文件到指定目录
- mongodb 复制集 维护小结
- weblogic.jdbc.wrapper.Blob_oracle_sql_BLOB cannot be cast to oracle.sql.BLOB 解决方法
- java.net.SocketException四大异常解决方案
- webApi前端ajax调用后端返回{“readyState“:0,“status“:0,“statusText“:“error“}解决方案
- ubuntu 16.04 分辨率只有800×600问题解决
- Win10系统删除文件需提供管理员权限-- 解决方案
- 如何禁用<textarea>的调整大小抓取器? [重复]
- git remote添加其他SSH端口