角度不安全的网址 [英] Angular insecure url

问题描述

我正在使用此指令将 jCrop 与 Angular 结合使用:

这是将所有 blob 和 data:image/* url 列入白名单的替代方法，仅用于 <img> 标记，但还有其他方法可以解决此问题，例如生成 url > 传递它进入其中一个 sce 函数，它将被列入白名单.就像@NuclearGhost 说的

app.config(["$compileProvider" 函数($compileProvider) {$compileProvider.imgSrcSanitizationWhitelist(/^\s*(blob:|data:image)/);}]);

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

解决方案

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)/);

}]);

这篇关于角度不安全的网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！