1

我有一个角度单页应用程序。我正在尝试创建一个书签，但希望书签引用不同的 JS 文件，具体取决于我是在产品还是本地开发环境中。这是大致的原始书签：

<a href="javascript:(function(){var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://mydomain.com/scripts/bookmarklet.js');
document.body.appendChild(jsCode);})();">My Bookmarklet</a>

这工作得很好，并且会加载bookmarklet.js。但是在 Angular 中，我在控制器中设置了一个范围变量，它是 prod 域或本地主机的根，如下所示：

$scope.rootUrl = prod ? 'http://mydomain.com/' : 'localhost:3000/';

然后在我正在做的角度页面上：

<a href="javascript:(function(){var jsCode = document.createElement('script');
jsCode.setAttribute('src', '{{rootUrl}}/scripts/bookmarklet.js');
document.body.appendChild(jsCode);})();">My Bookmarklet</a>

出于某种原因，当将 angular 变量添加到小书签时，chrome 在渲染时会像这样添加一个“不安全： ”，并使小书签无用。：

<a href="unsafe:javascript:(function(){var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://mydomain.com/scripts/bookmarklet.js');
document.body.appendChild(jsCode);})();">My Bookmarklet</a>

我四处搜索，似乎找不到解决方案或理解为什么会发生这种情况。任何帮助解决这个问题将不胜感激！

4

1 回答 1

2

安全性、组织性和可测试性是 Angular 框架的三个核心目标。因此，默认情况下，它不允许您将 javascript 设置为<a>标签的 href——它通常被认为是草率和不安全的，很容易被利用，并且很难测试。

该框架提供 ng-click 指令来执行 javascript 以响应单击事件，这几乎取代了<a href="javascript:whatever">所有情况下的需要，并且为了强制安全，角度编译器默认情况下仅允许在 href 中使用mailto:、ftp:、http:和。https:

这意味着如果您需要一个可以拖到书签工具栏的不安全的 javascript href，您必须在配置块中配置角度编译器，如下所示：

angular.module('moduleName').config(['$compileProvider', function($compileProvider) {   
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|javascript):/);
}]);

（注意：旧版本的 angular (< 1.2) 使用 $compileProvider.urlSanitizationWhitelist）

于 2014-01-30T00:55:11.277 回答