javascript - schools - php iframe

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

Question

Estoy tratando de establecer el atributo src 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>

controladores / 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 atributo src de iframe. Es solo en blanco.

Actualización 1: inyecté la dependencia $ sce en AppCtrl y $ sce.trustUrl () ahora funciona sin errores de lanzamiento. Sin embargo, devuelve TrustedValueHolderType que 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 intenté con ambos.

Actualización 2: Descubrí cómo devolver la url de trustedUrlHolder usando .toString () pero cuando lo hago, emite 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 usada 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 );
}

Mi problema parece resolverse con esto, aunque no estoy muy seguro de por qué.

Answer 1

De esta manera sigo y su trabajo funciona bien para mí, 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 un filtro,

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

Answer 2

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

Puedes desactivarlo completamente, pero no es recomendable

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

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

Answer 3

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

trustAsResourceUrl inyectar el servicio $sce en el controlador y trustAsResourceUrl la url allí.

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>

Answer 4

También necesita $sce.trustAsResourceUrl o 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>

Answer 5

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

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

Answer 6

trustSrc función call to trustSrc y vuelva a intentarlo de esta forma. {{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 src url. 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 están recomendando 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()}}">