由于浏览器都有同源加载策略，不能加载不同域下的文件、也不能使用不合要求的协议比如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=&quot;Explicitly trusted HTML bypasses ' +

                'sanitization.&quot;">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官方手册

AngularJS 使用$sce控制代码安全检查的更多相关文章

  1. C/C++静态代码安全检查工具

    静态代码安全检查工具是一种能够帮助程序员自动检测出源程序中是否存在安全缺陷的软件.它通过逐行分析程序的源代码,发现软件中潜在的安全漏洞.本文针对 C/C++语言程序设计中容易存在的多种安全问题,分别分 ...

  2. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  3. maven项目配置findbugs插件 使用git钩子控制代码的提交

    maven项目配置findbugs插件对代码进行静态检测 当发现代码有bug时,就不让用户commit代码到远程仓库里 没有bug时才可以commit到远程仓库中 (1)新建maven项目 ,配置fi ...

  4. Linux - 进程控制 代码(C)

    进程控制 代码(C) 本文地址:http://blog.csdn.net/caroline_wendy 输出进程ID.getpid(). 代码: /*By C.L.Wang * Eclipse CDT ...

  5. android：Android 6.0权限控制代码封装

    新建的Activity类可以继承这个Activity,这个类封装了关于新版的权限处理相关的代码 使用方法: package com.glsite.phone; import android.conte ...

  6. Maxim实时时钟芯片设计指南5791-关于编写健壮的实时时钟控制代码的提示

    用DS12C887设计一个万年历,虽然反复查看说明书,还是出各种的错误. 因此,从美信官网查询资料,翻译的不太通,凑合着对照看. 原文链接 Tips for Writing Bulletproof R ...

  7. 【AngularJs】---$sce 输出Html

    [问题描述] angular js的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model 但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各 ...

  8. AngularJS通过$sce输出html的方法

    不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候,发现用AngularJs输出html的时候,浏览器并不解析这些html标签,这里我们需要其显示angular输出的html能被浏览 ...

  9. AngularJS：一行JS代码实现控件验证效果

    如上图所示,我们需要实现如下这些验证功能: 控件都是必输控件 都需要控制最大长度 第一次打开页面,控件不能显示为错误状态 输入内容再清空后,必输控件需要显示为错误状态 只有所有输入合法后,发布按钮才能 ...

随机推荐

  1. poj 2945 trie树统计字符串出现次数

    用记录附加信息的val数组记录次数即可. trie的原理:每个可能出现的字目给一个编号c,那么整个树就是一个c叉树 ch[u][c]表示 节点u走c边过去之后的节点 PS:trie树还有种动态写法,使 ...

  2. MySQL备份原则

      数据库备份遵守的原则: 定期对数据库进行备份 启用mysql服务器的二进制日志 备份文件命名既要有规律又要有意义 备份文件和数据库不要放在一个文件系统上 定期使用文件系统的备份功能来备份数据库的备 ...

  3. Android登录界面实现

    花了一些时间实现了一个还算可以等登陆界面,主要是对这两天工作的一个总结:自定义按钮.编辑框.布局.全屏等. 效果如下: 获取代码:点这里

  4. Java过滤器与SpringMVC拦截器之间的关系与区别

    今天学习和认识了一下,过滤器和SpringMVC的拦截器的区别,学到了不少的东西,以前一直以为拦截器就是过滤器实现的,现在想想还真是一种错误啊,而且看的比较粗浅,没有一个全局而又细致的认识,由于已至深 ...

  5. Linux下安装webstorm

    Linux下安装webstorm 1--在webstorm官网里面下载最新的版本 WebStorm-11.0.3.tar.gz 2--创建webstorm的安装目录 #mkdir /usr/webst ...

  6. Cost Function Summary

    Mean Square Error \[cost(t,o)=\frac{1}{n}\sum\limits_{i=1}^n{(o-t)^2}\] Binary Cross-Entropy 用于计算 ta ...

  7. BZOJ2049: [Sdoi2008]Cave 洞穴勘测 Link-Cut-Tree 模板题

    传送门 搞了这么长时间Splay终于可以搞LCT了,等等,什么是LCT? $LCT$就是$Link-Cut-Tree$,是维护动态树的一个很高效的数据结构,每次修改和查询的均摊复杂度为$O(logN) ...

  8. Git更新到最新版本

    添加git的ppa源sudo apt-add-repository ppa:git-core/ppasudo apt-get updatesudo apt-get upgrade

  9. 关于 客户端发现响应内容类型为“text/html; charset=utf-8”，但应为“text/xml”的解决方法

    http://www.cnblogs.com/jams742003/archive/2008/10/30/1322761.html 请求web服务时,会有如题的异常出现,解决方法如下: 1 检查web ...

  10. window.location.href的用法

    在写ASP.Net程序的时候,我们经常遇到跳转页面的问题,我们经常使用Response.Redirect 做ASP.NET框架页跳转,如果客户要在跳转的时候使用提示,这个就不灵光了,如: Respon ...