External resource not being loaded by AngularJs External resource not being loaded by AngularJs angularjs angularjs

External resource not being loaded by AngularJs


Another simple solution is to create a filter:

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

Then specify the filter in ng-src:

<video controls poster="img/poster.png">       <source ng-src="{{object.src | trusted}}" type="video/mp4"/></video>


This is the only solution that worked for me:

var app = angular.module('plunker', ['ngSanitize']);app.controller('MainCtrl', function($scope, $sce) {  $scope.trustSrc = function(src) {    return $sce.trustAsResourceUrl(src);  }  $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};});

Then in an iframe:

<iframe class="youtube-player" type="text/html" width="640" height="385"        ng-src="{{trustSrc(movie.src)}}" allowfullscreen frameborder="0"></iframe>

http://plnkr.co/edit/tYq22VjwB10WmytQO9Pb?p=preview


Whitelist the resource with $sceDelegateProvider

This is caused by a new security policy put in place in Angular 1.2. It makes XSS harder by preventing a hacker from dialling out (i.e. making a request to a foreign URL, potentially containing a payload).

To get around it properly you need to whitelist the domains you want to allow, like this:

angular.module('myApp',['ngSanitize']).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/**'  ]);  // The blacklist overrides the whitelist so the open redirect here is blocked.  $sceDelegateProvider.resourceUrlBlacklist([    'http://myapp.example.com/clickThru**'  ]);});

This example is lifted from the documentation which you can read here:

https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider

Be sure to include ngSanitize in your app to make this work.

Disabling the feature

If you want to turn off this useful feature, and you're sure your data is secure, you can simply allow **, like so:

angular.module('app').config(function($sceDelegateProvider) {  $sceDelegateProvider.resourceUrlWhitelist(['**']);});