AngularJS Blocked loading resource

Question

I am not sure why but I am trying to make an image button and the URL's come from getting a JSON object in my controller, but what ever the link is through an error, and if I change it to works fine!!!

Controller:

$scope.iconImage = 'http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png';

HTML:

<!-- Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. -->
<input type="image" ng-src="{{iconImage}}" />

<!-- This works fine -->
<img ng-src="{{iconImage}}" />

wael101 · Accepted Answer · 2015-07-04 19:47:53Z

3

You might use the Strict Contextual Escaping (SCE) mode to marked the URL as a safe content source.

See trustAsResourceUrl(value);

Inject [$sce] in your controller and then use it like this:

$scope.iconImage = $sce.trustAsResourceUrl('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png');

answered Jul 4, 2015 at 19:47

wael101

5002 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dfsq Over a year ago

That's right. Just to add that using ngSrc for img tag is an exception from Strict Contextual Escaping, that's why it works for <img ng-src="{{iconImage}}" />.

user1172023 · Accepted Answer · 2015-07-04 19:47:07Z

0

You can white list the URL using the $sceDelegateProvider. See here.

answered Jul 4, 2015 at 19:47

user1172023

Collectives™ on Stack Overflow

AngularJS Blocked loading resource

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related