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>

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
"deliberatelyTrustDangerousSnippet()">

//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 自身的校验；

如上所述。

关于$watch，$apply与$digest

理解$watch ，$apply 和 $digest — 理解数据绑定过程

关于$compile

Angular 中 $compile 源码分析
Angular 源码分析：$compile 服务
AngularJS 不得不了解的服务 $compile 用于动态显示 html 内容
Angular 中重要指令介绍：$eval, $parse 和 $compile
ng 指令中的 compile 与 link 函数解析

关于 directive

AngularJS 指令实践
Angular 控制器之间的数据共享与通信

关于 Factory, Service, Provider

AngularJS 之 Factory vs Service vs Provider

关于依赖注入

理解 AngularJS 中的依赖注入
AngularJS 中的依赖注入实际应用场景？
Angular 依赖注入详解
如何理解依赖注入？

关于性能调优

对 AngularJS 进行性能调优的7个建议
AngularJs ng-repeat 必须注意的性能问题
整理 AngularJS 框架使用过程当中的一些性能优化要点
AngularJS 性能优化二三事
谈谈 AngularJS 中的一次性数据绑定

面试题

angularjs 面试题
AngularJS 常见面试问题
十个由浅入深的Angular.js面试问题
AngularJS 开发者最常犯的 10 个错误