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?

Gaurav Srivastava · Answer 1 · 2017-08-11T07:57:09.127

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 }}" />

edited Aug 11 '17 at 07:57

answered Aug 11 '17 at 07:36

Gaurav Srivastava

3,232
3
16
36

Thanks I am aware of that option. I am looking for a way it will be much more generic in case I will have the same prefix of base url. $sce.trustAsResourceUrl('https://example.com/url'); limits me and force me to call that method each time for the same base url. – Moris Aug 11 '17 at 07:39
@Moris Updated my answer – Gaurav Srivastava Aug 11 '17 at 07:43
is there any specifice requirement to use it from the service? – Gaurav Srivastava Aug 11 '17 at 07:46

Using $sceProvider functionality from $sce

1 Answers1