由于浏览器都有同源加载策略，不能加载不同域下的文件、也不能使用不合要求的协议比如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. Xcopy命令参数

    XCOPY是COPY的扩展,可以把指定的目录连文件和目录结构一并拷贝,但不能拷贝系统文件:使用时源盘符.源目标路径名.源文件名至少指定一个:选用/S时对源目录下及其子目录下的所有文件进行COPY.除非 ...

  2. Cloud Design Patterns Book Reading(undone)

    目录 . the most common problem areas in cloud application development ) Availability ) Data Management ...

  3. oracle报错：ORA-28000: the account is locked

    连接数据库的时候报: ORA-28000: the account is locked 解决方法: cmd-进入命令行 C:\Users\0>sqlplus /nolog SQL*Plus: R ...

  4. python编码

    一.编码 常见的编码比较: ascii:1个字节 unicode:2个字节 utf-8:英文1个字节,汉字3个字节 二.一个编码问题 问:如下代码设置了在代码中添加了coding: utf-8,但是在 ...

  5. oracle--知识点汇总1

    同义词: -- e是scott.emp表的临时别名 select e.* from (select * from scott.emp) e; --创建私有同义词 create synonym myem ...

  6. oneM2M标准发展神速 实现万物联网的愿景

    http://m2m.iot-online.com/news/2013102224849.html oneM2M则将负责解决独立于接取网路中通用的M2M服务层的关键需求:使其可更方便地嵌入于各种软硬体 ...

  7. c#多态之抽象类与虚方法的异同点~

    多态之抽象类与虚方法的相似点及不同点 : 不同点 1.方法关键字不一样 虚方法的方法关键字是:virtual. 抽象类的方法关键词是:abstract 2.基类的方法是否有方法体/实现 虚方法的方法: ...

  8. beautifulsoup测试

    import re from bs4 import BeautifulSoup html_doc = """ <html><head><ti ...

  9. Linux下Memcache 安装和使用

    Memcached是一种高性能的分布式内存对象缓存系统(memcached虽然称为“分布式”缓存服务器,但服务器端并没有“分布式”功能,其“分布式”由客户端函数库完成,成熟算法的为一致性Hash),用 ...

  10. 第4章 jQuery的事件和动画（二）

    二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...