由于浏览器都有同源加载策略，不能加载不同域下的文件、也不能使用不合要求的协议比如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. 推荐一个学习golang的地址

    链接打开后,文字可以点击! http://yougg.github.io/static/gonote/GolangStudy.html#

  2. 过滤器(Filter)的应用

    过滤器的概念 Java中的Filter 并不是一个标准的Servlet ,它不能处理用户请求,也不能对客户端生成响应. 主要用于对HttpServletRequest 进行预处理,也可以对HttpSe ...

  3. MySql的一些操作

    我们安装mysql时一开始root用户如果没设置的话是可以没有密码的,所以,如果需要设置密码,则 格式:mysql> set password for 用户名@localhost = passw ...

  4. ExceptionLess异常日志收集框架-1

    哈哈,中秋和代码更配哦,不知不觉一年过半了,祝园友们中秋快乐 前一阵子在博客园看到了一篇博文 http://www.cnblogs.com/savorboard/p/exceptionless.htm ...

  5. UEditor上传图片到七牛云储存（java）

    我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...

  6. 加州大学伯克利分校Stat2.3x Inference 统计推断学习笔记: Section 1 Estimating unknown parameters

    Stat2.3x Inference(统计推断)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...

  7. MOOCULUS微积分-2: 数列与级数学习笔记 7. Taylor series

    此课程(MOOCULUS-2 "Sequences and Series")由Ohio State University于2014年在Coursera平台讲授. PDF格式教材下载 ...

  8. Python编码格式的指定方式

    参考自: http://python.jobbole.com/85852/, 原文探究的更深,有兴趣的可以去看看. 简介来讲就是使用一种特殊的注释来声明编码格式,如何判断这种格式也用了很简单粗暴有效的 ...

  9. Django 自带的ORM增删改查

     通过Django来对数据库进行增删改查 1 首先创建类,在app应用程序里面的model模块里面创建类,写好数据库信息,方便我们待会初始化: 2 创建在django项目里面的settings里面添加 ...

  10. Yocto开发笔记之《Tip－应用程序无法在目标机运行》（QQ交流群：519230208）

    官方app编译环境编译的应用程序可以在开发板自带的系统中运行,自己编译并烧写了系统,却提示: root@imx6ulevk:/root# ./VTTerminal -sh: ./VTTerminal: ...