Javascript AngularJs未加载外部资源

使用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>

我尝试在配置设置中添加

$compileProvider

，但没有解决我的问题

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

---

我看到了一些问题，但我不确定如何解决这个问题，或者我应该朝着什么方向走。有什么想法吗？感谢您提供的任何帮助

基于错误消息，您的问题似乎与插值（通常是表达式

{{}}

）有关，而不是与跨域问题有关。基本上

ng src=“{{object.src}}”

很烂

ng src

设计时考虑了IMO的

img

标记。它可能不适合

。看

如果您声明

，它将正常工作，对吗？（请注意，我删除了

ng src

以支持

src

），如果没有，则必须首先修复

然后确保

{{object.src}

返回预期值（在

之外）：

{{object.src}
...

如果返回预期值，则以下语句应有效：

<source src="{{object.src}}"; type="video/mp4"/> //src instead of ng-src

//src代替ng src

我在使用Videogular时遇到了同样的问题。使用ng src时，我得到了以下信息：

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

我通过编写一个基本指令解决了这个问题：

angular.module('app').directive('dynamicUrl', function () {
return {
  restrict: 'A',
  link: function postLink(scope, element, attrs) {
    element.attr('src', scope.content.fullUrl);
  }
};
});

html：

 <div videogular vg-width="200" vg-height="300" vg-theme="config.theme">
    <video class='videoPlayer' controls preload='none'>
          <source dynamic-url src='' type='{{ content.mimeType }}'>
    </video>
 </div>

---

这是唯一适合我的解决方案：

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>

---

这里也有同样的问题。我需要绑定到Youtube链接。作为一个全球解决方案，我的工作是在我的配置中添加以下内容：

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

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

}]);

在其中添加“self”很重要，否则将无法绑定到任何URL。从

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

有了它，我现在可以直接绑定到任何Youtube链接

---

显然，您必须根据自己的需要定制正则表达式。希望有帮助

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

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>

使用$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**'
  ]);
});

此示例摘自您可以在此处阅读的文档：

请确保在应用程序中包含ngSanitize，以使其正常工作

禁用该功能 如果您想关闭此有用的功能，并且您确信您的数据是安全的，您可以简单地允许**，如下所示：

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

---

解决此问题的最佳且简单的解决方案是在控制器中从此函数传递数据

$scope.trustSrcurl = function(data) 
{
    return $sce.trustAsResourceUrl(data);
}

在html页面中

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

---

如果任何人正在寻找TypeScript解决方案：

.ts文件（在适用的情况下更改变量）：

module App.Filters {

    export class trustedResource {

        static $inject:string[] = ['$sce'];

        static filter($sce:ng.ISCEService) {
            return (value) => {
                return $sce.trustAsResourceUrl(value)
            };
        }
    }
}
filters.filter('trustedResource', App.Filters.trusted.filter);

<video controls ng-if="HeaderVideoUrl != null">
  <source ng-src="{{HeaderVideoUrl | trustedResource}}" type="video/mp4"/>
</video>

Html:

module App.Filters {

    export class trustedResource {

        static $inject:string[] = ['$sce'];

        static filter($sce:ng.ISCEService) {
            return (value) => {
                return $sce.trustAsResourceUrl(value)
            };
        }
    }
}
filters.filter('trustedResource', App.Filters.trusted.filter);

<video controls ng-if="HeaderVideoUrl != null">
  <source ng-src="{{HeaderVideoUrl | trustedResource}}" type="video/mp4"/>
</video>

---

我在测试中出现此错误，指令

templateUrl

不受信任，但仅适用于规范，因此我添加了模板目录：

beforeEach(angular.mock.module('app.templates'));

---

我的主目录是

app

你也可以发布你的corodva的

config.xml

文件吗？现在我还在浏览器中测试，所以我甚至还没有开始我的phonegap调试。只需使用src和硬编码url，一切都可以正常工作。只要我使用{{object.src}}，尽管src属性甚至没有被传递。我甚至删除了源标记，并将src与视频标记内联，但仍然没有什么我的意思是你确定{{object.src}返回一个值吗？它可能返回未定义的值。{object.src}}正在返回一个值。通过使用a

进行测试，a可能不得不这样做，已经发现了这一点，它看起来相当不错。感谢您的帮助这与

ng src

损坏无关（它没有损坏）。这与AngularJS的安全策略有关：绝对是最优雅、最有角度的解决方案。对我来说很有效，而且确实比使用iframe更好。最佳答案，更具角度精神，而且它在其他解决方案因某些原因无法实现的地方起作用。谢谢！没有iFrame这可能吗？我需要嵌入一个视频，其中会话信息决定是否允许消费者观看视频。会话信息不会通过iFrame.nice传递，如果您可以使用iFrame注意：如果

resourceUrlWhitelist

对您不起作用，请检查域名后是否没有双斜杠（在连接变量中的内容时很容易发生这种情况，并且它们都有斜杠），这是一种更干净的方法，这是一个全球性的、安全的解决问题的方法。对于试图理解这个问题的人来说，“拨出”不是一个很好的术语。谢谢@Ringo-我添加了一条评论来澄清。