Houseman Houseman - 3 months ago 20
Javascript Question

Angular insecure url

I'm using this directive to use jCrop with Angular: http://plnkr.co/edit/Z2IQX8s9UK6wQ1hS4asz?p=preview

When I load in a value for

src
, 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
$scope.profileImg
to the url of my image.

I'm linking to S3, where I get the value from
profileImg
. 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
src
to be my image, I don't get this problem.

EDIT:



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

My controller:

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

var socket = io.connect('https://xxxxxx.xxxxxxxxxxxxxx.xxx:3000');
$scope.profileImg="";



$scope.uploadProfilePic = function(){
socket.removeAllListeners();
console.log(file3);
var url = 'https://xxxxxxx.xxxxxxxxxx.xxx:3000/uploadProfile?tenant=xxxxx';

$scope.upload = $upload.upload({
url:url,
data:{myObj:'test1'},
file:file3
}).progress(function(evt){
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data,status,headers,config){
$sce.trustAsUrl(data);
$scope.profileImg = data;
});
};
});


And even with the
trustAsUrl
, it throws the same error.

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

EDIT2:



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,
ng-src
instead of
src
,
$sce.trustAsUrl(url)
, and the
$compileProvider

Answer

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) {

    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(blob:|data:image)/);

}]);
Comments