AngularJS ng-src dentro do iframe

Eu tenho um problema usando o ng-src dentro de um iframe. Eu tenho que fazer isso:

RESULTADO:

  

Eu sei que o problema é $ sce, que é uma proteção do XSS, e que o link precisa ser adicionado à whitelist … Então está funcionando quando eu faço isso.

  

E eu defino dentro do controlador:

 $rootScope.someUrl = $sce.trustAsResourceUrl('http://192.168.223.110/cat/files/incoming/12345_3232ASD_pero.pdf'); 

Mas eu não posso fazer assim porque estou dando um loop com ng-repeat, então o link é gerado dinamicamente. Precisa ser legível a partir do database!

Você pode usar um filtro em vez disso:

HTML:

  

onde ‘yourURL’ é o URL do iframe e ‘trustAsResourceUrl’ é o filtro e é definido como em algum módulo (como, por exemplo, filters-module) como:

JS:

 angular.module('filters-module', []) .filter('trustAsResourceUrl', ['$sce', function($sce) { return function(val) { return $sce.trustAsResourceUrl(val); }; }]) 

E você pode usar esse filtro em todos os iframes e outros itens incorporados em seu aplicativo. Este filtro irá cuidar de todos os URLs que você precisa confiar apenas adicionando o filtro.

Ok achei o que era o problema .. Obrigado por esse filtro está funcionando agora 🙂

Tudo que eu precisava fazer era criar ng-src link this:

  

Talvez isso ajude alguém! 🙂

Como o Kop4lyf disse que você precisa adicionar filtro em js

 //Create a filter for trust url app.filter('trustAsResourceUrl', ['$sce', function($sce) { return function(val) { return $sce.trustAsResourceUrl(val); }; }]); 

e saída ih html como

 ng-src="{{x.title.rendered | trustAsResourceUrl}}" 

Algum outro filtro:

 //Create a filter for trust html app.filter('trustAsHtml', ['$sce', function($sce) { return function(val) { return $sce.trustAsHtml(val); }; }]);