wake-up-neo.com

So legen Sie ein iframe src-Attribut aus einer Variablen in AngularJS fest

Ich versuche, das src-Attribut eines Iframes aus einer Variablen zu setzen, und ich kann es nicht zum Laufen bringen ...

Das Markup:

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

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

    }
}

Mit diesem Code wird nichts in das src-Attribut des iframe eingefügt. Es ist nur leer.

Update 1: Ich habe die $sce-Abhängigkeit in AppCtrl injiziert und $ sce.trustUrl () funktioniert jetzt ohne Fehler. Es gibt jedoch TrustedValueHolderType zurück, bei dem ich nicht sicher bin, wie ich eine tatsächliche URL einfügen soll. Der gleiche Typ wird zurückgegeben, unabhängig davon, ob ich $ sce.trustUrl () in den Interpolationsklammern im Attribut src="{{trustUrl(currentProjectUrl))}}" verwende oder wenn ich den Controller beim Festlegen des Werts von currentProjectUrl verwende. Ich habe es sogar mit beiden probiert.

Update 2: Ich habe herausgefunden, wie ich die URL aus dem trustedUrlHolder mithilfe von .toString () zurückgeben kann, aber wenn ich das tue, wird die Sicherheitswarnung ausgegeben, wenn ich versuche, sie in das Attribut src zu übergeben.

Update 3: Es funktioniert, wenn ich trustAsResourceUrl () im Controller verwende und dies an eine im ng-src-Attribut verwendete Variable weitergebe:

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

}

Mein Problem scheint damit gelöst zu sein, obwohl ich mir nicht ganz sicher bin, warum.

javascripthtmlangularjsiframeangularjs-directive
204
emersonthis

Ich vermute beim Blick auf den Auszug, dass die Funktion trustSrc von trustSrc(currentProject.url) nicht in der Steuerung definiert ist. 

Sie müssen den $sce-Dienst in die Steuerung und trustAsResourceUrl die url dort einfügen.

Im Controller:

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

In der Vorlage:

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

Es ist der $ sce-Dienst, der URLs mit externen Domänen blockiert. Es ist ein Dienst, der AngularJS Strict Contextual Escaping-Dienste bereitstellt, um Sicherheitslücken wie XSS, Clickjacking usw. zu verhindern. Er ist standardmäßig in Angular 1.2 aktiviert.

sie können es vollständig deaktivieren, aber es wird nicht empfohlen

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

weitere Informationen finden Sie hier https://docs.angularjs.org/api/ng/service/ $ sce

11
Mohamed Selim

Bitte entfernen Sie den Aufruf der trustSrc-Funktion und versuchen Sie es erneut. {{trustSrc (currentProject.url)}} an {{currentProject.url}} . Überprüfen Sie diesen Link http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview

Aber gemäß der Angular Js 1.2-Dokumentation sollten Sie eine Funktion schreiben, um src url zu erhalten. Schauen Sie sich den folgenden Code an.

Vor:

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

Aus Sicherheitsgründen empfehlen sie jedoch die folgende Methode

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

auf diese Weise folge ich und seine Arbeit für mich in Ordnung, möge es für Sie funktionieren,

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

hier ist trustThisUrl nur ein Filter,

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

Sie brauchen auch $sce.trustAsResourceUrl, sonst öffnet sich die Website nicht im 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>

0
Abdo-Host

vorlage auswählen; iframe controller, ng model update

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

Überprüfen Sie diesen Link: http://plnkr.co/edit/TGRj2o?p=preview

0
Osman Selvi