Page 407 - AngularJS权威教程

29.2 URL 白名单 387

在这段代码中，其运行原理与解析原始文本为安全文本一致。这次，还要添加第三个元素， 19
也就是在作用域中调用runJs()的按钮。
正如在HTML绑定中看到的，我们会监控这个JavaScript代码片段： 20

.controller('MyController', ['$scope', '$sce', function($scope, $sce) {
// 在email.rawJs上设置监控
$scope.$watch('email.rawJs', function(v) { 21
if(v) {
$scope.email.jsBody = $sce.trustAsJs($scope.email.rawJs);
} 22
});
}]);
注意，这次我们没有使用trustAsHtml，而是使用trustAsJs()方法。这个方法会告诉Angular 23
将指定的文本解析为可执行的JavaScript代码。调用结束后，这会得到一个可以在应用程序上下文
中使用eval()执行的、安全的、已解析的JavaScript代码片段。 24

现在可以将runJs()方法设置给用户，然后可以应用email.rawJS来运行这个代码片段。

// ... 25
$scope.runJs = function() {
eval($scope.email.jsBody.toString());
}; 26
对于在JavaScript代码片段上执行eval，还有更智能的方法。但是不推荐在产品中
使用eval。 27
Angular中还提供了内置的保护机制：只能从加载应用的同一域中以及应用所在的协议内加
载模板。Angular通过在templateUrl上强制调用$sce.getTrustedResourceUrl来对它进行保护。 28

这个协议不能替代浏览器的同源策略以及跨域资源共享（CORS）。这些策略仍然能够有效保
护浏览器。 29
但是可以通过使用$sceDelegateProvider设置域白名单或者黑名单的方式来改写这个值。
30
29.2 URL 白名单
31
在模块的config()函数内可以设置新的白名单和黑名单。

angular.module('myApp', []) 32
.config(['$sceDelegateProvider', function($sceDelegateProvider) {
// 设置一个新的白名单
$sceDelegateProvider.resourceUrlWhitelist(['self']); 33
}]);

可以使用resourceUrlWhitelist()方法设置新的白名单。这个函数接受一个可选的参数。
34
 白名单列表（数组）。

如果没有传入参数，那么这个函数就作为一个getter方法，同时返回当前设置的白名单数组。 35
如果传入了白名单参数，resourceUrlWhitelist就会使用新的数组替换原来的数组。

每个数组元素必须是一个正则表达式或者是字符串'self'。当设置为'self'时，Angular会 36