Angular学习笔记

最新推荐文章于 2020-05-15 15:29:39 发布

某某运

最新推荐文章于 2020-05-15 15:29:39 发布

阅读量654

点赞数

分类专栏： web 文章标签： angular

本文链接：https://blog.csdn.net/ymc2015/article/details/50923596

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Iframe动态绑定（关于$sce）

<!-- Html -->

<script src="public/js/angular.min.js"></script>
<script src="public/js/angular-sanitize.min.js"></script>
<!-- Other Code -->
<iframe ng-src = {{url}}></iframe>

<!-- Controller -->

var myApp = angular.module("myApp", ['ngSanitize']);

function unoteListController($scope, $sce) {
    /*
     * Other Code
     */
    $scope.url = $sce.trustAsResourceUrl(url);
}

从官方文档和源码中可以看出， $sce 服务提供了很多方法，但它只是代理了 $sceDelegate 服务的功能，提供了一些快捷的接口而已；
关键的三个方法： trustAs ， getTrusted ， valueOf 都是 $sceDelegate 服务提供的；
而 getTrustedHtml 等方法又是调用 $sanitize 的，文中的 trustAsResourceUrl 方法即需要注入 $sanitize 服务；

附：AngularJS和XSS

首先，什么是XSS，常见的Web攻击都有哪些？

推荐看这篇文章《关于XSS（跨站脚本攻击）和CSRF（跨站请求伪造）》；

如果项目是基于 ng（Angular）的，那么直接使用 $sanitize 即可以帮助我们屏蔽掉存在风险的 html 标签； $sanitize 服务会处理要显示的 html 数据，把这些 html 解析成一个一个的标签，然后去自己的白名单中进行校验，如果被检查的标签被认为是非安全，那么它就会转移成普通字符串显示，需要留意的是， $sanitize 服务需要单独加载；

官方的例子中提到了一个依赖 $sanitize 的指令： ng-bind-html ，该指令会自动调用 $sanitize 服务把 html 字符串进行过滤，如果没有发现 $sanitize 被注入，则会报异常；而如果直接使用 {{ }} 或 ng-bind 来绑定数据，那么 html 会被自动转义，显示在页面上；

官方例子中有一个写法如下：

//HTML
<div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>

//Controller
$scope.deliberatelyTrustDangerousSnippet = function() {
    return $sce.trustAsHtml($scope.snippet);
};

在官方文档中，我们看到了一个术语 SCE (Strict Contextual Escaping) ，它使得 ng 默认对所有要绑定显示的数据进行安全处理，过滤掉 ng 认为存在风险的标签和属性；

我们看一下 ng-bind-html 的源码，可以看出其内部就是使用的 $sce.getTrustedHtml 来做校验的；

除了 ng-bind-html 指令外， ng-include 指令和我们在声明一个指令时使用的 templateUrl 属性， ng 都会默认进行校验，默认情况下 ng 只会加载同源资源（利用 $sce.getTrustedResourceUrl ），如果你想跨域加载模板资源，意味着你除了要解决浏览器默认的跨域限制外，你还要通过 ng 自身的校验；

如上所述。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular学习笔记

Iframe动态绑定（关于$sce）<script src="public/js/angular.min.js"></script><script src="public/js/angular-sanitize.min.js"></script><iframe ng-src = {{url}}></iframe><!-- Cont
复制链接

扫一扫