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官方手册

相关文章