由于浏览器都有同源加载策略，不能加载不同域下的文件、也不能使用不合要求的协议比如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. Codeforces Round #389 Div.2 D. Santa Claus and a Palindrome

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  2. Android——旋转屏幕导致Activity重建解决方法

    Android开发文档上专门有一小节解释这个问题.简单来说,Activity是负责与用户交互的最主要机制,任何“设置”(Configuration)的改变都可能对Activity的界面造成影响,这时系 ...

  3. U型进度条

    今天同事说要做一个U型进度条的效果. 本打算上网找一个,结果找了一个纯CSS3打造的,不过最坑人的是他把进度条从1到100,挨个设置了CSS属性. 这不得活活累死宝宝~~~~~~~~~~~~~~. 于 ...

  4. [JavaEE]Java NIO原理图文分析及代码实现

    转http://weixiaolu.iteye.com/blog/1479656 目录: 一．java NIO 和阻塞I/O的区别      1. 阻塞I/O通信模型      2. java NIO ...

  5. hibernate-聚合函数分组统计数据查询

    聚合函数: 实例: package Test; import static org.junit.Assert.*; import java.util.List; import org.hibernat ...

  6. java连接数据源-读取tomcat数据源配置

    读取数据源配置,获取连接 1.配置数据源 D:\apache-tomcat-7.0.70\conf\context.xml <Resource name="jdbc/news" ...

  7. 捉襟见肘之 CoreImage初级自制相机图片效果

    CoreImage.framework /* CoreImage - CoreImage.h Copyright (c) 2014 Apple, Inc. All rights reserved. * ...

  8. BZOJ1804: [Ioi2007]Flood 洪水

    把点按坐标排序,每次找出最小的点,一定在最外层,再顺着把最外层的边删掉,经过了两次的边不会被冲毁. 其实不难写,但是写了很久. #include<bits/stdc++.h> #defin ...

  9. css013 构建基于浮动的布局

    css013 构建基于浮动的布局 基于浮动的布局时利用float属性是网页上的元素并排,并创建列 float有三个值:left .right .none 1.假设要把一张图片浮动到网页的左侧 .flo ...

  10. Wget下载终极用法和15个详细的例子

    Wget下载终极用法和15个详细的例子 备注:wget  不支持https 下载,也没有相关https参数,当下载https的时候或以改用 axelWget是一种很好用的因特网下载工具,他具有的很多特 ...