web-dev-qa-db-fra.com

AngularJS ng-src à l'intérieur de l'iframe

J'ai un problème avec ng-src dans un iframe. Je dois le faire:

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

RÉSULTAT:

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

Je sais que le problème est $ sce, qui est une protection contre XSS, et que le lien doit être ajouté à la liste blanche ... Donc ça marche quand je fais ça.

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

Et je définis à l'intérieur du contrôleur:

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

Mais je ne peux pas le faire comme ça parce que je boucle avec ng-repeat, donc le lien est généré dynamiquement. Il doit être lisible à partir de la base de données!

javascriptangularjsiframe
30
Tindtrelle

Vous pouvez utiliser un filtre à la place:

HTML:

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

où 'yourURL' est l'URL de l'iframe et 'trustAsResourceUrl' est le filtre et est défini comme dans certains modules (comme par exemple. filters-module) comme:

JS:

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

Et vous pouvez utiliser ce filtre dans tous les iframes et autres éléments intégrés de votre application. Ce filtre prendra en charge toutes les URL auxquelles vous devez faire confiance en ajoutant simplement le filtre.

79
Kop4lyf

Ok j'ai trouvé quel était le problème .. Merci pour ce filtre ça marche maintenant :)

Tout ce que je devais faire était de créer un lien ng-src:

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

Peut-être que cela aide quelqu'un! :)

4
Tindtrelle

Comme l'a dit Kop4lyf, vous devez ajouter un filtre en js

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

et sortie ih html comme

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

Un autre filtre:

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