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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
分页栏的web标准实现
Nov 01 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 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数组去重实例及分析
2013/11/26 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
js 实现浏览历史记录示例
2014/04/20 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Python txt文件如何转换成字典
2020/11/03 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
Android笔试题总结
2014/11/29 面试题
编辑个人求职信范文
2013/09/21 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
六个一活动实施方案
2014/03/21 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
政协调研汇报材料
2014/08/15 职场文书
整改落实自查报告
2014/11/05 职场文书
2014年残联工作总结
2014/11/21 职场文书
2014年司法所工作总结
2014/11/22 职场文书
教师先进个人材料
2014/12/17 职场文书
检讨书怎么写
2015/05/07 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python