AngularJS 使用$sce控制代码安全检查

出于浏览器都有同源加载策略,不可以加载不同域下的公文、也不可以动用不合要求的情商比如file举办走访。

在angularJs中为了防止安全漏洞,一些ng-src或者ng-include都会进展安全校验,由此日常会遇上 style=”color: #ff0000;”>一个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(
                'Hover over this text.');
          }]);
    </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官方手册

相关文章