Using $sceProvider functionality from $sce

Question

From Angular documents it says that $sceDelegateProvider.resourceUrlWhitelist can set the trusted resource URLs, But I need that functionality from the controller.

I want to set a whitelist of trusted resource URLs within my service. Therefore, I am only allowed to use $sce service and not provider..

I was trying to implement this example and it caused me an error ( "$sce:unsafe Require a safe/trusted value"):

this.renderUrl = this.$sce.getTrustedUrl(${this.baseUrl}) + `/x/y/?name=${this.name};

Then inject the the renderUrl into the html:

<iframe ng-src="{{$ctrl.renderUrl}}"></iframe>

Is there a way to set a trusted resource URLs from $sce service, so it will be added to the whitlist of trusted resource URLs?

Answer 1

Create a Filter :

app.filter('trusturl', ['$sce', function ($sce) {
  return function(url) {
    return $sce.trustAsResourceUrl(url);
  };
}]);

In your service:

// Injecting Filter in Service
app.service('trustUrlService', function ($scope,$filter) {

  $scope.trustUrl = function(url){
    return $filter('trusturl')(url);
  };

});

In Controller use like this:

app.controller("myCtrl", function($scope,trustUrlService) {  
  $scope.url = trustUrlService.trustUrl(url);
});

In Template you could use like this:

<iframe ng-src={{ imageHref | trusturl }}" />