Angular insecure url
Solution 1
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)/);
}]);
Solution 2
If you'd like to add the url as a trusted source you can use the trustAsUrl()
method from ng.$sce
service
Here's the angular documentation for the service.
Related videos on Youtube
Admin
Updated on June 04, 2022Comments
-
Admin about 2 years
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 ofsrc
,$sce.trustAsUrl(url)
, and the$compileProvider
-
Admin over 10 yearsI tried typing
ng.$sce.trustAsUrl(url)
and that told me thatng
was not defined. -
Mark Meyer over 10 yearsYou need to inject
$sce
as a service into your controller or directive where you're making the http call from. Then just access it from$sce.trustAsUrl(url)