Comment définir un attribut src iframe à partir d'une variable dans AngularJS

J'essaie de définir l' srcattribut d'un iframe à partir d'une variable et je ne peux pas le faire fonctionner ...

Le balisage:

<div class="col-xs-12" ng-controller="AppCtrl">

    <ul class="">
        <li ng-repeat="project in projects">
            <a ng-click="setProject(project.id)" href="">{{project.url}}</a>
        </li>
    </ul>

    <iframe  ng-src="{{trustSrc(currentProject.url)}}">
        Something wrong...
    </iframe>
</div>

controllers / app.js:

function AppCtrl ($scope) {

    $scope.projects = {

        1 : {
            "id" : 1,
            "name" : "Mela Sarkar",
            "url" : "http://blabla.com",
            "description" : "A professional portfolio site for McGill University professor Mela Sarkar."
        },

        2 : {
            "id" : 2,
            "name" : "Good Watching",
            "url" : "http://goodwatching.com",
            "description" : "Weekend experiment to help my mom decide what to watch."    
        }
    };

    $scope.setProject = function (id) {
        $scope.currentProject = $scope.projects[id];
        console.log( $scope.currentProject );

    }
}

Avec ce code, rien n'est inséré dans l' srcattribut iframe . C'est juste vide.

Mise à jour 1: j'ai injecté la $scedépendance dans AppCtrl et $ sce.trustUrl () fonctionne maintenant sans lancer d'erreurs. Cependant, il retourne TrustedValueHolderTypeque je ne sais pas comment utiliser pour insérer une URL réelle. Le même type est renvoyé si j'utilise $ sce.trustUrl () à l'intérieur des accolades d'interpolation dans l'attribut src="{{trustUrl(currentProjectUrl))}}"ou si je le fais à l'intérieur du contrôleur lors de la définition de la valeur de currentProjectUrl. Je l'ai même essayé avec les deux.

Mise à jour 2: j'ai compris comment renvoyer l'URL du trustedUrlHolder à l'aide de .toString () mais quand je le fais, il lance l'avertissement de sécurité lorsque j'essaie de le passer dans l'attribut src.

Mise à jour 3: cela fonctionne si j'utilise trustAsResourceUrl () dans le contrôleur et le transmets à une variable utilisée dans l'attribut ng-src:

$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    console.log( $scope.currentProject );
    console.log( $scope.currentProjectUrl );

}

Mon problème semble être résolu par cela, même si je ne sais pas trop pourquoi.

Je soupçonne regardant l'extrait que la fonction trustSrcde trustSrc(currentProject.url)n'est pas définie dans le contrôleur.

Vous devez injecter le $sceservice dans le contrôleur et là trustAsResourceUrl- urlbas.

Dans le contrôleur:

function AppCtrl($scope, $sce) {
    // ...
    $scope.setProject = function (id) {
      $scope.currentProject = $scope.projects[id];
      $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    }
}

Dans le modèle:

<iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe>

C'est le $sceservice qui bloque les URL avec des domaines externes, c'est un service qui fournit des services d'échappement contextuel strict à AngularJS, pour prévenir les failles de sécurité telles que XSS, le détournement de clics, etc. il est activé par défaut dans Angular 1.2.

Vous pouvez le désactiver complètement, mais ce n'est pas recommandé

angular.module('myAppWithSceDisabledmyApp', [])
   .config(function($sceProvider) {
       $sceProvider.enabled(false);
   });

pour plus d'informations https://docs.angularjs.org/api/ng/service/$sce

de cette façon, je suis et son travail pour moi très bien, que cela fonctionne pour vous,

<iframe class="img-responsive" src="{{pdfLoc| trustThisUrl }}" ng-style="{
                height: iframeHeight * 0.75 + 'px'
            }" style="width:100%"></iframe>

ici trustThisUrl est juste un filtre,

angular.module("app").filter('trustThisUrl', ["$sce", function ($sce) {
        return function (val) {
            return $sce.trustAsResourceUrl(val);
        };
    }]);

Veuillez supprimer l'appel à la trustSrcfonction et réessayer comme ceci. {{trustSrc (currentProject.url)}} à {{currentProject.url}}. Vérifiez ce lien http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview

Avant:

Javascript

scope.baseUrl = 'page';
scope.a = 1;
scope.b = 2;

Html

<!-- Are a and b properly escaped here? Is baseUrl controlled by user? -->
<iframe src="{{baseUrl}}?a={{a}&b={{b}}"

Mais pour des raisons de sécurité, ils recommandent la méthode suivante

Javascript

var baseUrl = "page";
scope.getIframeSrc = function() {

  // One should think about their particular case and sanitize accordingly
  var qs = ["a", "b"].map(function(value, name) {
      return encodeURIComponent(name) + "=" +
             encodeURIComponent(value);
    }).join("&");

  // `baseUrl` isn't exposed to a user's control, so we don't have to worry about escaping it.
  return baseUrl + "?" + qs;
};

Html

<iframe src="{{getIframeSrc()}}">

sélectionner un modèle; contrôleur iframe, mise à jour du modèle ng

index.html

angularapp.controller('FieldCtrl', function ($scope, $sce) {
        var iframeclass = '';
        $scope.loadTemplate = function() {
            if ($scope.template.length > 0) {
                // add iframe classs
                iframeclass = $scope.template.split('.')[0];
                iframe.classList.add(iframeclass);
                $scope.activeTemplate = $sce.trustAsResourceUrl($scope.template);
            } else {
                iframe.classList.remove(iframeclass);
            };
        };

    });
    // custom directive
    angularapp.directive('myChange', function() {
        return function(scope, element) {
            element.bind('input', function() {
                // the iframe function
                iframe.contentWindow.update({
                    name: element[0].name,
                    value: element[0].value
                });
            });
        };
    });

iframe.html

   window.update = function(data) {
        $scope.$apply(function() {
            $scope[data.name] = (data.value.length > 0) ? data.value: defaults[data.name];
        });
    };

Vérifiez ce lien: http://plnkr.co/edit/TGRj2o?p=preview

Vous devez également $sce.trustAsResourceUrlou il n'ouvrira pas le site Web à l'intérieur de l'iframe:

angular.module('myApp', [])
    .controller('dummy', ['$scope', '$sce', function ($scope, $sce) {

    $scope.url = $sce.trustAsResourceUrl('https://www.angularjs.org');

    $scope.changeIt = function () {
        $scope.url = $sce.trustAsResourceUrl('https://docs.angularjs.org/tutorial');
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="dummy">
    <iframe ng-src="{{url}}" width="300" height="200"></iframe>
    <br>
    <button ng-click="changeIt()">Change it</button>
</div>