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

214

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

emersonthis
fuente

Respuestas:

359

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>
musically_ut
fuente
1
Lo probé con $ sce como me recomendó. Hace que el mensaje de error desaparezca, pero el atributo src del iframe aún está vacío.
Emersonthis
3
Intenta usarlo trustAsResourceUrl.
musically_ut
99
... pero este funciona cuando lo paso al atributo ng-src! Gracias.
Emersonthis
2
@Emerson trustAsResourceUrldevuelve una $sce.RESOURCE_URLque es necesaria para iframe/ objectswhile trustAsUrldevuelve una $sce.URLque es una garantía más débil (y actualmente no se utiliza según la documentación ).
musically_ut
1
ng-src no funcionó para mí a menos que elimine las llaves dobles (ng-src = "currentProjectUrl")
baacke
10

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

Mohamed Selim
fuente
3

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

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


Pero de acuerdo con la documentación de Angular Js 1.2, debe escribir una función para obtener la srcURL. Echa un vistazo al siguiente código.

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()}}">
Sajith
fuente
La documentación proporciona este consejo en caso de que uno sea vinculante para más de una expresión en ng-srco src. Angular 1.2 en adelante, uno puede unirse a una sola expresión en srcy ng-src, y el consejo es para recuperar una URL a partir del código utilizando una función, si es necesario.
musically_ut
Pero creo que hay algún error en su código. El controlador debería ser como este app.controller ('AppCtrl', function ($ scope) {});
Sajith
1
Los controladores pueden ser funciones accesibles globalmente .
musically_ut
Okay. Verifique este enlace. Verifiqué su código con plunker. plnkr.co/edit/caqS1jE9fpmMn5NofUve
Sajith
He notado una función "trustSrc" en su código. Elimine esa función e intente nuevamente de esta manera. {{trustSrc (currentProject.url)}} a {{currentProject.url}}
Sajith
0

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

Osman Selvi
fuente
0

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>

Abdo-Host
fuente