Configuración del atributo src de iframe desde variable en AngularJS

En AngularJS, puedes encontrar problemas al intentar configurar el atributo src de un iframe desde una variable. Para solucionar este problema, aquí tienes una guía paso a paso:

1. Inyecte el servicio $sce

Inyecte el servicio $sce (escapado contextual estricto) en su controlador para manejar la desinfección.

function AppCtrl($scope, $sce) {
  // ...
}

2. Confíe en la URL del recurso

Utilice $sce.trustAsResourceUrl dentro del controlador para garantizar que la URL sea segura.

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

3. Actualizar la plantilla

En la plantilla, vincule el atributo ng-src a la variable URL confiable.

Código de ejemplo

function AppCtrl($scope, $sce) {
  $scope.projects = {
    // ...
  };

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

  
{{project.name}}

Notas adicionales

• Utilice $sce.trustSrc para URL que no sean de confianza.
• La solución gira en torno a la prevención de Cross-Site Ataques de scripting (XSS) garantizando que las URL sean seguras.