Cómo establecer un atributo iframe src desde una variable en AngularJS

Estoy tratando de establecer el srcatributo de un iframe a partir de una variable y no puedo hacer que funcione ...

El marcado:

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

    }
}

Con este código, nada se inserta en el srcatributo del iframe . Es solo en blanco.

Actualización 1:$sce inyecté la dependencia en AppCtrl y $ sce.trustUrl () ahora funciona sin generar errores. Sin embargo, devuelve lo TrustedValueHolderTypeque no estoy seguro de cómo usar para insertar una URL real. Se devuelve el mismo tipo si uso $ sce.trustUrl () dentro de las llaves de interpolación en el atributo src="{{trustUrl(currentProjectUrl))}}"o si lo hago dentro del controlador al establecer el valor de currentProjectUrl. Incluso lo probé con ambos.

Actualización 2: descubrí cómo devolver la url del TrustedUrlHolder usando .toString () pero cuando hago eso, arroja la advertencia de seguridad cuando intento pasarla al atributo src.

Actualización 3: Funciona si uso trustAsResourceUrl () en el controlador y lo paso a una variable utilizada dentro del atributo 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 );

}

Esto parece resolver mi problema, aunque no estoy muy seguro de por qué.

Sospecho que estoy mirando el extracto de que la función trustSrcde trustSrc(currentProject.url)no está definida en el controlador.

Es necesario inyectar el $sceservicio en el controlador y trustAsResourceUrlel urlallí.

En el controlador:

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

En la plantilla:

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

Es el $sceservicio que bloquea las URL con dominios externos, es un servicio que proporciona servicios estrictos de escape contextual a AngularJS, para evitar vulnerabilidades de seguridad como XSS, clickjacking, etc. Está habilitado de forma predeterminada en Angular 1.2.

Puede deshabilitarlo por completo, pero no se recomienda

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

para más información https://docs.angularjs.org/api/ng/service/$sce

de esta manera sigo y me funciona bien, que funcione para ti,

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

aquí trustThisUrl es solo filtro,

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

Elimine la llamada a la trustSrcfunción e intente nuevamente de esta manera. {{trustSrc (currentProject.url)}} a {{currentProject.url}}. Consulte este enlace http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview

Antes de:

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

Pero por razones de seguridad, recomiendan el siguiente método

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()}}">

seleccionar plantilla; controlador de iframe, actualización de modelo 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];
        });
    };

Consulte este enlace: http://plnkr.co/edit/TGRj2o?p=preview

También necesita $sce.trustAsResourceUrlo no abrirá el sitio web dentro del 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>