Houseman Houseman - 1 year ago 136
Javascript Question

Angular insecure url

I'm using this directive to use jCrop with Angular:

When I load in a value for

, I get this error:

Can't interpolate: {{profileImg}} Error: [$sce:insecurl]

Then it links me to a page that says this:

Blocked loading resource from url not allowed by $sceDelegate policy.

My html is this:

<img-cropped src={{profileImg}} selected='selected(cords)'/>

And this error happens when I change
to the url of my image.

I'm linking to S3, where I get the value from
. I trust this source, so how can I tell angular that this source is trusted enough to get this directive working?

If I hardcode the
to be my image, I don't get this problem.


I'm trying to trust the url with $sce.

My controller:

cmsApp.controller('PresentationCtrl',function($scope, $upload, all, $sce){

var socket = io.connect('');

$scope.uploadProfilePic = function(){
var url = '';

$scope.upload = $upload.upload({
console.log('percent: ' + parseInt(100.0 * evt.loaded /;
$scope.profileImg = data;

And even with the
, it throws the same error.

It might be that I'm trying to connect from it from my local nginx server?


I moved it to S3 hosting, and it worked. The image I'm trying to link to is also on S3.
I moved it to an Apache web server on an EC2 instance, and it didn't work.

I'm using all the answers,
instead of
, and the

Answer Source

sometimes its good to read the docs about $sce

This is a alternative to whitelist all blob and data:image/* urls for just the <img> tag but there is other way that you can solve this like generate a url > pass it into one of the sce function and it will be whitelisted. like @NuclearGhost said

app.config(["$compileProvider" function($compileProvider) {