Why should we use $sce.trustAsResourceUrl(iframeUrl)?

Question

I am new to AngularJS. I tried binding iframe src with Angular controller.

html:

<iframe class="mini-graph" ng-src="{{iframeUrl()}}"></iframe>

controller js:

$scope.iframeUrl = function(){
    return "http://www.google.co.in";
};

This doesn't work. But if I change my controller to:

$scope.iframeUrl = function(){
    return $sce.trustAsResourceUrl("http://www.google.co.in");
};

it works.

I don't know what's the magic happens with $sce.trustAsResourceUrl. It would be great if some one could explain it.

Answer 1

For security reasons, AngularJS prevents binding ng-src to untrusted external resources, such as an external URL. The call to $sce.trustAsResourceUrl returns a special wrapper object for the external URL to mark the URL as trusted.