How to Set an Iframe Src Attribute from a Variable in Angularjs

How to set an iframe src attribute from a variable in AngularJS

I suspect looking at the excerpt that the function trustSrc from trustSrc(currentProject.url) is not defined in the controller.

You need to inject the $sce service in the controller and trustAsResourceUrl the url there.

In the controller:

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

In the Template:

<iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe>

How to change iframe src use angularjs

You need also $sce.trustAsResourceUrl or it won't open the website inside the iframe:

JSFiddle

HTML:

<div ng-app="myApp" ng-controller="dummy">
    <button ng-click="changeIt()">Change it</button>
    <iframe ng-src="{{url}}" width="300" height="600"></iframe>
</div>

JS:

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');
    }
}]);

How to set variable ng-src within one iframe using Angular Js

You can have a function defined and pass the url to it,

JS:

 $scope.trustSrc = function(src) {
        return $sce.trustAsResourceUrl(src);
    }

HTML:

    <md-button ng-click="selectMuppet(it)" ng-class="{'selected' : it === selected }">
     <img ng-src="{{trustSrc(it.link)}}" class="face" alt="Sample Image">
      {{it.sitename}}
   </md-button>

Working APP

Angular 10: Set IFrame URL Input with Variable

Yes, it is still non-secure to put whatever into url same as in Angular.js. Just bypass it - it will be still non-secure, but you will take responsibility instead of angular developers.

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

write as [src]="urlSafe"

https://angular.io/api/platform-browser/DomSanitizer

ng-src attribute in an iframe doesn't accept expressions ? using Angular.js

As far as I know, this don't work because of security matters to previne xss attacks. But you can create a filter to trust the url like:

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

And then call it as filter of the url in src

<iframe ng-src="{{ anUrlFromYourController | trustThisUrl}}"></iframe>

angularjs ng-src within iframe

iframe and ng-src have been discussed on SO before with a solution using $sce (to trust the URL for ng-src='URL')

link: AngularJS ng-src inside of iframe

link: Unable to load url into iframe via AngularJS controller

link: How to set an iframe src attribute from a variable in AngularJS

GL!

AngularJS ng-src inside of iframe

You can use a filter instead:

HTML:

<iframe src="{{yourURL | trustAsResourceUrl}}"></iframe>

where 'yourURL' is the URL of the iframe and 'trustAsResourceUrl' is the filter and is defined as in some module(like eg. filters-module) as:

JS:

angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}])

And you can use this filter in all the iframes and other embedded items in your application.
This filter will take care of all the urls that you need to trust just by adding the filter.

---

Related Topics