AngularJS 1: Resource URL whitelist - External resource not being loaded by AngularJs

The $sceDelegateProvider allows one to get/set the whitelists and blacklists used to ensure that the URLs used for sourcing AngularJS templates and other script-running URLs are safe (all places that use the $sce.RESOURCE_URL context). See $sceDelegateProvider.resourceUrlWhitelist and $sceDelegateProvider.resourceUrlBlacklist.

A few months ago I faced an "issue" with AngularJS and remote URL's, I have a feature to upload videos and images, and when I upload images I was able to display the image through AngularJS but was not the same with the video displaying this error in my browser console:

External resource not being loaded by AngularJs

Error: [$interpolate:interr] Can't interpolate: {{object.src}}  
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL  

So the way I handled to solve this issue was adding my remote url's to a whitelist provided by sceDelegateProvider, then everything went well.

app.config(['$sceDelegateProvider', function($sceDelegateProvider) {  
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://remote.s3.amazonaws.com/**',
    'https://remote_development.s3.amazonaws.com/**'
  ]);
}]);

That's all folks, hope you are working with AngularJS 2..4 or ReactJS 😅

Victor Velazquez

Coder, Musician, Startups, Passionate Dancer & Life Lover. Software Engineer at MagmaLabs, Co-founder of Web Dev Talks, Co-founder of Voltaire, Co-founder of Paqkit, Ex-co-founder of Zaznova.

Subscribe to The zazvick's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!