$sce.trustAsResourceUrl() globally

Question

How can I do something like this: $sce.trustAsResourceUrl(\'URL_HERE\');

Globally, like in the main app\'s config() or run() f

Answer 1

I use for my videos stored on filesystem:

app.config( [
    '$sceDelegateProvider',
    function($sceDelegateProvider)
    {
        $sceDelegateProvider.resourceUrlWhitelist(['self','filesystem:**']); 
    }
]);

Answer 2

I also liked the filter solution; however, it didn't work for me until I injected $sce properly...

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

Answer 3

I just read your comment from the previous answer. Not sure if you found a solution yet. Seems you are looking for a whitelist type of thing. I recently found this out that there's a whitelist function for $sce.

Taken from the AngularJS docs for $sceDelegateProvider:

angular.module('myApp', []).config(function($sceDelegateProvider) {
 $sceDelegateProvider.resourceUrlWhitelist([
   // Allow same origin resource loads.
   'self',
   // Allow loading from our assets domain.  Notice the difference between * and **.
   'http://srv*.assets.example.com/**']);
 })

With this you can do string interpolation in iframes like this:

<iframe ng-src="{{ 'http://srv1.assets.example.com/' + url_asset }}"></iframe>

Answer 4

You could use a filter. These are available globally.

angular.module('myApp')
  .filter('trustUrl', function ($sce) {
    return function(url) {
      return $sce.trustAsResourceUrl(url);
    };
  });

<img ng-src={{ imageHref | trustUrl }}">