angularjs - 角度中的不安全链接

Question

在 AngularJS 中，在以下场景中，Firefox 会将unsafe:按以下方式生成的 url 放在前面。然后它会显示一个错误页面，上面写着“地址不被理解”。这是我本地 PC 上的文件请求。

关联：

<li ng-repeat="fruit in fruits">
    <a href="{{ fruit.link }}">{{ fruit.title }}</a>
</li>

大批：

$scope.fruits = [
    {   "title"     :   "Orange",
        "link"      :   "fruits_orange.html"  }
];

Answer 1

您会看到此提交的副作用： https ://github.com/angular/angular.js/commit/9532234bf1c408af9a6fd2c4743fdb585b920531 ，旨在解决一些安全隐患。

此提交为 url 引入了一个非向后兼容的更改file://（随后在https://github.com/angular/angular.js/commit/7b236b29aa3a6f6dfe722815e0a2667d9b7f0899中放宽了

我假设您使用的是 1.0.5 或 1.1.3 AngularJS 版本之一。如果是这样，您可以通过如下配置重新启用对file://URL 的支持$compileProvider：

angular.module('myModule', [], function ($compileProvider) {

  $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);

});

或者在 Angular 1.2.8 及更高版本中：

angular.module('myModule', [], function ($compileProvider) {

  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);

});

Answer 2

将白名单添加到您的控制器。

对于 Angular.js 1.2：

app.config(['$compileProvider', function($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|tel):/);
}]);

对于 Angular 1.1.x 和 1.0.x，使用urlSanitizationWhitelist. 请参阅参考资料。

Answer 3

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

Answer 4

我正在使用angular 1.4.0并且以下格式有效：

ng-href="http://{{baseURLHref}}{{baseURLPort}}/routingPathName"

添加http://开头ng-href有助于摆脱unsafe附加的ng-Sanitize

• 如果您在https，那么硬编码所有内容应该不是问题。
• 但是，如果您的系统必须在两种环境下工作，您可能需要使用来自的协议检测location.protocol

我正在设置变量$rootScope（它们有助于解决从我的站点消耗 css 的代理服务器的问题）

angular.module('myApp').run(function ($route, $rootScope, $location) {
    $rootScope.baseURLHref = '';
    $rootScope.baseURLPort = '';
    if($location.host() != 'localhost'){
      $rootScope.baseURLHref = $location.host();
      $rootScope.baseURLPort = ':' + $location.port();
    }
    ...

Answer 5

<a href="{{applicant.resume}}" download> download resume</a>


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

    app.config(['$compileProvider', function($compileProvider) {
         $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
        $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);

        }]);