Page 405 - AngularJS权威教程

29.1 严格的上下文转义：$sce 服务 385

19

第29章 20

安全性
21

22

对于任何客户端应用而言，应该在构建时就考虑其安全性。然而在任何情况下都很难实现 23
100%的保护，尤其是当客户端应用能看到全部代码的情况下，将更加困难。
在这一章，我们来看看一些保持应用程序安全的技术。我们将会看到如何掌握$sce服务，通 24
过使用指令包装授权请求的方式，保障文本输入框的安全性（在讨论受保护的后端时）。
25
29.1 严格的上下文转义：$sce 服务
26
严格上下文转义模式（在Angular 1.2及更高版本中默认可用）用于告诉我们的应用，它需要
绑定在某个上下文中，以便生成在该上下文中被标记为可信的值。
27
例如，当我们想要使用ng-bind-html绑定一个未加工的HTML给一个元素时，我们希望
Angular使用这个HTML渲染该元素，而不是转义的文本。
28
<textarea ng-model="htmlBody"></textarea>
<div ng-bind-html="{{ htmlBody }}"></div>
29
$sce是一个非常出色的服务，它允许我们编写白名单，默认保护代码，并在很大程度上帮助
我们防止XSS和其他漏洞。鉴于这种能力，理解它到底是什么很重要，这样我们才可以明智地使
用它。 30

在上面的例子中，给<textarea>绑定了一个htmlBody模型。在这个textarea中，用户可以
输入他们想在div中呈现的任意代码。例如，可能是编辑博客或者是评论时的实时预览，等等。 31

如果用户可以输入任意文本到这个文本字段中，这本质上相当于开启了一个巨大的安全漏洞。
32
默认情况下$sce服务会在所有插值表达式上为我们处理这一问题。不确定的字面量永远都是
不可信的。
33
实质上，从Angular 1.2及更高版本的内置指令开始， $scope中的值就不再是绑定给它的值了，
而是绑定$sce.getTrusted()方法的返回结果。
34
指令也使用新的$sce.parseAs()方法替代$parse服务监控属性绑定。$sce.parseAs()方法
会在所有非恒定的字面量上调用$sce.$getTrusted()方法。
35
实际上，ng-bind-html指令会在幕后调用$sce.parseAsHtml()方法，然后将返回值绑定给
DOM元素。ng-include指令以及任何定义在指令上的templateUrl都会执行这一行为。
36