Setting iframe src Attribute from Variable in AngularJS

In AngularJS, you may encounter issues when attempting to set the src attribute of an iframe from a variable. To address this, here's a step-by-step guide:

1. Inject the $sce Service

Inject the $sce (Strict Contextual Escaping) service into your controller to handle sanitization.

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

2. Trust the Resource URL

Use $sce.trustAsResourceUrl within the controller to ensure the URL is safe.

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

3. Update the Template

In the template, bind the ng-src attribute to the trusted URL variable.

Example Code

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

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

  
{{project.name}}

Additional Notes

• Use $sce.trustSrc for untrusted URLs.
• The solution revolves around preventing Cross-Site Scripting (XSS) attacks by ensuring URLs are safe.