AngularJS 使用$sce控制代码安全检查
时间:2022-04-22
本文章向大家介绍AngularJS 使用$sce控制代码安全检查,主要内容包括什么是SCE、来自官网的例子:ng-bind-html、实际工作中的例子:ng-src链接、参考、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
由于浏览器都有同源加载策略,不能加载不同域下的文件、也不能使用不合要求的协议比如file进行访问。 在angularJs中为了避免安全漏洞,一些ng-src或者ng-include都会进行安全校验,因此常常会遇到一个iframe中的ng-src无法使用。
什么是SCE
SCE,即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确,但是通过字面理解,应该是angularjs严格的控制上下文访问。
由于angular默认是开启SCE的,因此也就是说默认会决绝一些不安全的行为,比如你使用了某个第三方的脚本或者库、加载了一段html等等。
这样做确实是安全了,避免一些跨站XSS,但是有时候我们自己想要加载特定的文件,这时候怎么办呢?
此时可以通过$sce服务把一些地址变成安全的、授权的链接...简单地说,就像告诉门卫,这个陌生人其实是我的好朋友,很值得信赖,不必拦截它!
常用的方法有:
$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);
其中后面的几个都是基于第一个api使用的,比如trsutAsUrl其实调用的是trsutAs($sce.URL,"xxxx");
其中type可选的值为:
$sce.HTML
$sce.CSS
$sce.URL //a标签中的href , img标签中的src
$sce.RESOURCE_URL //ng-include,src或者ngSrc,比如iframe或者Object
$sce.JS
来自官网的例子:ng-bind-html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
<i ng-bind-html="explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i>
</div>
<script type="text/javascript">
angular.module('mySceApp',[])
.controller('AppController', ['$scope', '$sce',
function($scope, $sce) {
$scope.explicitlyTrustedHtml = $sce.trustAsHtml(
'<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' +
'sanitization."">Hover over this text.</span>');
}]);
</script>
</body>
</html>
实际工作中的例子:ng-src链接
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
<iframe width="100%" height="100%" seamless frameborder="0" ng-src="{{trustSrc}}"></iframe>
</div>
<script type="text/javascript">
angular.module('mySceApp',[])
.controller('AppController', ['$scope','$sce',function($scope,$sce) {
$scope.trustSrc = $sce.trustAs($sce.RESOURCE_URL,"http://fanyi.youdao.com/");
// $scope.trustSrc = $sce.trustAsResourceUrl("http://fanyi.youdao.com/");//等同于这个方法
}]);
</script>
</body>
</html>
参考
【1】angular源码分析:angular中入境检察官$sce
【2】野兽的 Angular 学习 - - $sce 和 $sceDelegate
【3】$sce官方手册
- React第三方组件5(状态管理之Redux的使用③TodoList中)
- R语言在收入不平等指标测度上的应用~
- React第三方组件5(状态管理之Redux的使用②TodoList上)
- sscanf
- sprintf的用法
- 01背包精讲
- uva Andy's First Dictionary
- UVA Hangman Judge
- shiny动态仪表盘应用——中国世界自然文化遗产可视化案例
- Decode the tape
- poj To the Max
- Python爬虫系列(七)豆瓣图书排行榜(数据存入到数据库)
- ZOJ 3631 Watashi's BG(01dp)
- How Many Tables (并查集)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux常用工作命令
- C语言之二级指针
- 七夕如何向心爱的ta表白,看这里
- 七夕面向对象编程,你知道Java有哪些创建对象的方式吗?
- 微信小程序结合腾讯地图获取用户所在城市信息
- 设置事务超时时间的问题及Oracle数据库update和锁
- 超赞,压缩20M文件从30秒到1秒的优化过程
- 超赞,给你推荐20个使用 Java CompletableFuture的例子!
- Java入门编程练习题
- Spark UDF加载外部资源
- Flink SQL FileSystem Connector 分区提交与自定义小文件合并策略
- Facebook面试题: 用递归和迭代手写Array.prototype.flat()
- Kubernetes插件之ip-masq-agent
- 抽丝剥茧Kotlin - 协程
- 使用Java8中的Optional类来消除代码中的null检查