javascript - change - iframe with angular 4




Como definir um atributo srr iframe de uma variável no AngularJS (4)

Estou tentando definir o atributo src de um iframe de uma variável e não consigo fazer com que funcione ...

A marcação:

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

    }
}

Com esse código, nada é inserido no atributo src do iframe. Está em branco.

Atualização 1: injetamos a dependência do $ sce no AppCtrl e o $ sce.trustUrl () agora funciona sem erros. No entanto, ele retorna TrustedValueHolderType que não tenho certeza de como usar para inserir um URL real. O mesmo tipo é retornado se eu usar $ sce.trustUrl () dentro das chaves de interpolação no atributo src="{{trustUrl(currentProjectUrl))}}" ou se eu fizer isso dentro do controlador ao definir o valor de currentProjectUrl. Eu até tentei com ambos.

Atualização 2: Descobri como retornar o URL do trustedUrlHolder usando .toString (), mas quando faço isso, ele lança o aviso de segurança quando tento transmiti-lo para o atributo src.

Atualização 3: Funciona se eu usar trustAsResourceUrl () no controlador e passar isso para uma variável usada dentro do 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 );

}

Meu problema parece ser resolvido por isso, embora eu não saiba bem por quê.


É o serviço $ sce que bloqueia URLs com domínios externos, é um serviço que fornece serviços de Escape Contextual Escapando para AngularJS, para prevenir vulnerabilidades de segurança como XSS, clickjacking, etc. ele está habilitado por padrão no Angular 1.2.

você pode desativá-lo completamente, mas não é recomendado

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

para mais informações https://docs.angularjs.org/api/ng/service/ $ sce


Desta forma, eu sigo e seu trabalho para mim tudo bem, que possa funcionar para você,

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

aqui trustThisUrl é apenas filtro,

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

Por favor, remova a chamada para a função trustSrc e tente novamente assim. {{trustSrc (currentProject.url)}} para {{currentProject.url}}. Veja este link http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview

Mas, de acordo com a documentação do Angular Js 1.2, você deve escrever uma função para obter o src url. Dê uma olhada no seguinte código.

Antes:

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

Mas por razões de segurança eles estão recomendando o seguinte 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()}}">

Você também precisa do $sce.trustAsResourceUrl ou ele não abrirá o site dentro do 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>







angularjs-directive