AngularJs未加载外部资源
AngularJs未加载外部资源
提问于 2014-01-23 03:25:54
使用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):/);我看到了%s，但我不确定如何解决这个问题，也不确定我应该朝哪个方向前进。有什么想法吗？任何帮助我们都将不胜感激
回答 9
Stack Overflow用户
回答已采纳
发布于 2014-03-22 19:51:09
这是唯一对我有效的解决方案：
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">
</iframe>Stack Overflow用户
发布于 2014-07-02 04:51:15
另一个简单的解决方案是创建一个过滤器：
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>Stack Overflow用户
发布于 2015-02-13 22:39:20
使用$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(['**']);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21292114
复制相关文章
相似问题
腾讯云开发者
