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