Recurso externo não sendo carregado pelo AngularJs

Usando Angular e Phonegap, estou tentando carregar um vídeo que está em um servidor remoto, mas me deparei com um problema. No meu JSON, o URL é inserido como um URL HTTP simples.

"src" : "http://sofpt.miximages.com/javascript/f">   

Todos os meus outros dados são carregados, mas quando olho meu console, recebo este erro:

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

Eu tentei adicionar $compileProvider na minha configuração configurada, mas isso não resolveu meu problema.

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

Eu vi este post sobre problemas de domínio cruzado, mas não tenho certeza de como resolver isso ou em que direção devo ir. Alguma idéia? Qualquer ajuda é apreciada

Esta é a única solução que funcionou para mim:

 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"}; }); 

Então, em um iframe:

  

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

Outra solução simples é criar um filtro:

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

Em seguida, especifique o filtro em ng-src :

  

Coloque na lista de permissions o recurso com $ sceDelegateProvider

Isso é causado por uma nova política de segurança implementada no Angular 1.2. Isso torna o XSS mais difícil, impedindo que um hacker discorde (ou seja, fazendo uma solicitação para um URL externo, potencialmente contendo uma carga útil).

Para contornar isso corretamente, você precisa colocar na lista de permissions os domínios que deseja permitir, assim:

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

Este exemplo é retirado da documentação que você pode ler aqui:

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

Não deixe de include o ngSanitize no seu aplicativo para que isso funcione.

Desativando o recurso

Se você quiser desativar esse recurso útil e tiver certeza de que seus dados estão seguros, basta permitir **, assim:

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

Tive o mesmo problema aqui. Eu precisava ligar-me aos links do Youtube. O que funcionou para mim, como uma solução global , foi adicionar o seguinte à minha configuração:

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

Adicionando ‘self’ lá é importante – caso contrário, não será vinculado a qualquer URL. Dos documentos angulares

‘self’ – A string especial, ‘self’, pode ser usada para corresponder a todas as URLs do mesmo domínio que o documento do aplicativo usando o mesmo protocolo.

Com isso, agora posso ligar diretamente a qualquer link do Youtube.

Você obviamente terá que personalizar o regex de acordo com suas necessidades. Espero que ajude!

A melhor e mais fácil solução para resolver este problema é passar seus dados desta function no controller.

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

Na página html

  

Eu corri para o mesmo problema usando Videogular. Eu estava recebendo o seguinte ao usar o ng-src:

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

Eu consertei o problema escrevendo uma diretiva básica:

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

O html:

  

Se alguém está procurando uma solução TypeScript:

arquivo .ts (alterar variables, quando aplicável):

 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); 

Html:

  

Com base na mensagem de erro, seu problema parece estar relacionado à interpolação (normalmente, sua expressão {{}} ), e não a um problema de domínio cruzado. Basicamente, ng-src="{{object.src}}" é uma porcaria.

ng-src foi projetado com a tag img em mente. Pode não ser apropriado para . Veja http://docs.angularjs.org/api/ng.directive:ngSrc

Se você declarar , estará funcionando, certo? (note que eu removo ng-src em favor de src ) Se não, deve ser corrigido primeiro.

Em seguida, certifique-se de que {{object.src}} retorne o valor esperado ( fora de ):

 {{object.src}}  

Se retornar o valor esperado, a seguinte instrução deve estar funcionando:

  //src instead of ng-src 

Eu tive esse erro nos testes , a diretiva templateUrl não era confiável, mas apenas para a especificação, então adicionei o diretório de templates:

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

Meu diretório principal é app .