AngularJS ng-src inside of iframe

Question

I have a problem using ng-src inside of an iframe. I need to do this:

<div class="tab-content">
        <ul class="nav nav-tabs" ng-repeat="document in issues.Document">
            <div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
                <iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%"></iframe>                    
            </div>
        </ul>
    </div>

RESULT:

<iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%" src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}"></iframe>

I know that the problem is $sce, which is a protection from XSS, and that the link needs to be added to the whitelist... So it is working when I do this.

<ul class="nav nav-tabs" ng-repeat="document in issues.Document">
    <div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
         <iframe ng-src="{{someUrl}}" height="100%" width="100%"></iframe>                    
     </div>
</ul>

And I define inside the controller:

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

But I can't do it like that because I'm looping with ng-repeat, so the link is generated dynamically. It need's to be readable from the database!

Answer 1

Ok I found what the problem was.. Thank you for that filter it is working now :)

All I needed to do was to create ng-src link this:

<iframe ng-src="{{apiUrl+document.directory + '/' + document.name + '.'+ document.type   | trustAsResourceUrl}}"
        height="100%" width="100%">
</iframe>

Maybe this helps to someone! :)

Answer 2

As what Kop4lyf said you need to add filter in js

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

and output ih html as

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

Some other filter :

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

Answer 3

You can use a filter instead:

HTML:

<iframe src="{{yourURL | trustAsResourceUrl}}"></iframe>

where 'yourURL' is the URL of the iframe and 'trustAsResourceUrl' is the filter and is defined as in some module(like eg. filters-module) as:

JS:

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

And you can use this filter in all the iframes and other embedded items in your application. This filter will take care of all the urls that you need to trust just by adding the filter.