由于浏览器都有同源加载策略，不能加载不同域下的文件、也不能使用不合要求的协议比如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. Linux su和sudo命令的区别，并获得root权限

    su(superuser) su表示切换用户,如: 输入:su命令后回车表示切换当前的用户到root用户,或者: 输入:su - root(或者其他用户名)这里加了"-"后表示也切 ...

  2. POJ3735 矩阵

    题意:有n只猫咪,开始时每只猫咪有花生0颗,现有一组操作,由下面三个中的k个操作组成:        1. g i 给i只猫咪一颗花生米        2. e i 让第i只猫咪吃掉它拥有的所有花生米 ...

  3. 洛谷P1565 牛宫

    题目描述 AP 神牛准备给自己盖一座很华丽的宫殿.于是,他看中了一块N*M 的矩形空地. 空地中每个格子都有自己的海拔高度.AP 想让他的宫殿的平均海拔在海平面之上(假设 海平面的高度是0,平均数都会 ...

  4. Writing a simple Lexer in PHP/C++/Java

    catalog . Comparison of parser generators . Writing a simple lexer in PHP . phc . JLexPHP: A PHP Lex ...

  5. HttpClient + Jsoup模拟登录教务处并获取课表

    1.概述 最近想做一个校园助手类的APP,由于第一次做,所以打算先把每个功能单独实现,防止乱了阵脚.利用教务处登录获取课表和成绩等是一个基本功能,所以以获取课表为例实现了这个功能.完整代码点这里,尝试 ...

  6. TCP/IP详解 笔记十三

    TCP协议(一) 概述 特点 1,  面向连接可靠的字节流服务 2,  只有两方通信,不能用于广播或多播 3,  应用数据被TCP分隔为最合适发送的数据段,传给IP协议栈 4,  发送端并启动定时器, ...

  7. C#6.0特性笔记

    Visual Studio 2015的C#6.0,今天无意中看这个视频,怕忘记其中的特性,故此进行记录. public class Point { //Getter专属自动属性 public int ...

  8. AngularJs $sce 和 $sceDelegate 上下文转义

    $sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模 ...

  9. 演示get、post请求如何算sn，算得sn如何使用

    import java.io.ByteArrayOutputStream; import java.io.InputStream; import java.io.UnsupportedEncoding ...

  10. C语言函数指针的用法

    函数指针是一种在C.C++.D语言.其他类 C 语言和Fortran 2003中的指针.函数指针可以像一般函数一样,用于调用函数.传递参数.在如 C 这样的语言中,通过提供一个简单的选取.执行函数的方 ...