AngularJS 使用$sce控制代码安全检查


Posted in Javascript onJanuary 05, 2016

由于浏览器都有同源加载策略,不能加载不同域下的文件、也不能使用不合要求的协议比如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>

还有点时间,接着给大家介绍angular中的ng-bind-html指令和$sce服务

angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签。如:

$scope.currentWork.description = “hello,<br><b>今天我们去哪里?</b>”
我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的。是这样的

hello,

今天我们去哪里?

怎么办呢?

对于angular 1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题。所谓sce即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。来看看怎么用吧。

controller code:

$http.get('/api/work/get?workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});

HTML code:

<p> {{currentWork.description}}</p>

我们返回的内容中包含一系列的html标记。表现出来的结果就如我们文章开头所说的那样。这时候我们必须告诉它安全绑定。它可以通过使用$ sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。所以,我们必须在我们的控制器中引入$sce服务

controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) {
$http.get('/api/work/get?workId=' + $routeParams.workId)
.success(function (work) {
  $scope.currentWork = work;
  $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);
});

html code:

<p ng-bind-html="currentWork.description"></p>

这样结果就完美的呈现在页面上了:

hello

今天我们去哪里?

咱们还可以这样用,把它封装成一个过滤器就可以在模板上随时调用了

app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
  return $sce.trustAsHtml(text);
};
}]);

html code:

全选复制放进笔记

<p ng-bind-html="currentWork.description | to_trusted"></p>
Javascript 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
ES6数组的扩展详解
Apr 25 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
JS实现图片切换特效
Dec 23 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 #Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 #Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 #Javascript
jQuery实现二级下拉菜单效果
Jan 05 #Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 #Javascript
jquery中ajax处理跨域的三大方式
Jan 05 #Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 #Javascript
You might like
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
python集合删除多种方法详解
2020/02/10 Python
pyspark 随机森林的实现
2020/04/24 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
自荐信的格式
2014/03/10 职场文书
协会周年庆活动方案
2014/08/26 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
英语复习计划
2015/01/19 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
学校学期工作总结
2015/08/13 职场文书
九年级历史教学反思
2016/02/19 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
flex弹性布局详解
2022/03/20 HTML / CSS
Java 写一个简单的图书管理系统
2022/04/26 Java/Android