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!

score 82 · Accepted Answer · answered Jun 11 '14 at 12:47

82

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.

answered Jun 11 '14 at 12:47

Kop4lyf

4,520
1
25
31

Ok, that would work if I have only one..But it is not working inside of ng-repeat :/ {{apiUrl}}{{document.directory}}/{{document.name}}.{{document.type}} I am creating link like this.. – Tindtrelle Jun 20 '14 at 08:14
1

Can you create a fiddle for this. Or provide a code snippet. I am not able to see why this doesn't work. – Kop4lyf Jun 21 '14 at 10:00
1

Oh, sorry you probably didn't saw my answer :) the problem was that I was not writing the url on right way.. :) the filter is working perfectly, thank you! :) – Tindtrelle Jun 22 '14 at 11:49
I think is better to user ng-src for iframe, the 'src' sends some erroneous requests to server before angular is lodaded. – Lelis718 Dec 23 '15 at 04:29
yes agreed. It basically tries to retrieve the iframe with curly braces expression which gets encoded to some ugly url :) – Kop4lyf Dec 26 '15 at 09:51

score 5 · Answer 2 · edited Nov 11 '19 at 16:53

5

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! :)

edited Nov 11 '19 at 16:53

georgeawg

48,608
13
72
95

answered Jun 20 '14 at 08:19

Tindtrelle

373
1
3
10

score 1 · Answer 3 · answered Dec 06 '17 at 12:07

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

AngularJS ng-src inside of iframe

3 Answers3

Linked

Related