AngularJs未加载外部资源

Question

使用Angular和Phonegap,我正在尝试加载远程服务器上的视频,但遇到了一个问题.在我的JSON中,URL作为纯HTTP URL输入.

"src" : "http://www.somesite.com/myvideo.mp4"

我的视频模板

 <video controls poster="img/poster.png">
       <source ng-src="{{object.src}}" type="video/mp4"/>
 </video>

我的所有其他数据都被加载但是当我查看我的控制台时,我收到此错误:

Error: [$interpolate:interr] Can't interpolate: {{object.src}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL

我尝试添加$compileProvider我的配置设置,但它没有解决我的问题.

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

我看过这篇关于跨域问题的帖子,但我不知道如何解决这个问题或者我应该采用什么方向.有什么想法吗？任何帮助表示赞赏

Answer 1

另一个简单的解决方案是创建一个过滤器

app.filter('trusted', ['$sce', function ($sce) {
    return function(url) {
        return $sce.trustAsResourceUrl(url);
    };
}]);

然后在ng-src以下处指定过滤器:

<video controls poster="img/poster.png">
       <source ng-src="{{object.src | trusted}}" type="video/mp4"/>
</video>

Answer 2

这是唯一对我有用的解决方案:

var app = angular.module('plunker', ['ngSanitize']);

app.controller('MainCtrl', function($scope, $sce) {
  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }

  $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});

然后在iframe中:

<iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{trustSrc(movie.src)}}" allowfullscreen frameborder="0">

http://plnkr.co/edit/tYq22VjwB10WmytQO9Pb?p=preview

Answer 3

使用$ sceDelegateProvider将资源列入白名单

这是由Angular 1.2中实施的新安全策略引起的.它通过阻止黑客拨出(即向外部URL发出请求,可能包含有效负载)使XSS更难.

要正确解决问题,您需要将要允许的域列入白名单,如下所示:

angular.module('myApp',['ngSanitize']).config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from our assets domain.  Notice the difference between * and **.
    'http://srv*.assets.example.com/**'
  ]);

  // The blacklist overrides the whitelist so the open redirect here is blocked.
  $sceDelegateProvider.resourceUrlBlacklist([
    'http://myapp.example.com/clickThru**'
  ]);
});

此示例取自您可以在此处阅读的文档:

https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider

请确保在您的应用中包含ngSanitize以使其正常工作.

禁用该功能

如果你想关闭这个有用的功能,并且你确定你的数据是安全的,你可以简单地允许**,如下所示:

angular.module('app').config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist(['**']);
});

Answer 4

这里有同样的问题.我需要绑定到Youtube链接.作为一个全局解决方案,对我来说有用的是在我的配置中添加以下内容:

.config(['$routeProvider', '$sceDelegateProvider',
        function ($routeProvider, $sceDelegateProvider) {

    $sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]);

}]);

在那里添加"self"很重要 - 否则将无法绑定到任何URL.从角度文档

'self' - 特殊字符串'self'可用于匹配与使用相同协议的应用程序文档相同域的所有URL.

有了这个,我现在能够直接绑定到任何Youtube链接.

您显然必须根据需要自定义正则表达式.希望能帮助到你!