Definindo o atributo iframe src da variável em AngularJS

No AngularJS, você pode encontrar problemas ao tentar definir o atributo src de um iframe de uma variável. Para resolver isso, aqui está um guia passo a passo:

1. Injete o serviço $sce

Injete o serviço $sce (Strict Contextual Escaping) em seu controlador para lidar com a higienização.

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

2. Confie no URL do recurso

Use $sce.trustAsResourceUrl no controlador para garantir que o URL seja seguro.

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

3. Atualize o modelo

No modelo, vincule o atributo ng-src à variável de URL confiável.

Código de exemplo

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 adicionais

• Use $sce.trustSrc para URLs não confiáveis.
• A solução gira em torno da prevenção de cross-site Ataques de script (XSS), garantindo que os URLs sejam seguros.