角度不安全的网址

Question

我正在使用此指令将jCrop与Angular一起使用:http://plnkr.co/edit/Z2IQX8s9UK6wQ1hS4asz？p = preview

当我加载一个值时src,我收到此错误:

无法插值:{{profileImg}}错误:[$ sce:insecurl]

然后它将我链接到一个页面,上面写着:

$ sceDelegate策略不允许阻止从url加载资源.

我的HTML是这样的:

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

当我更改$scope.profileImg为我的图像的网址时,会发生此错误.

我正在链接到S3,在那里我从中得到了价值profileImg.我相信这个来源,那么我怎么能告诉angular这个来源是否足以让这个指令有效？

如果我硬编码src为我的形象,我不会遇到这个问题.

编辑:

我试图用$ sce来信任这个网址.

我的控制器:

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

即便如此trustAsUrl,它也会引发同样的错误.

可能是我试图从我的本地nginx服务器连接它？

EDIT2:

我把它移到S3托管,它工作.我想要链接到的图像也在S3上.我将它移动到EC2实例上的Apache Web服务器,但它不起作用.

我使用所有的答案,ng-src而不是src,$sce.trustAsUrl(url)和$compileProvider

Answer 1

有时阅读有关$ sce的文档很有用

这是白名单的所有BLOB和数据的选择:图像/*网址,只是<img>标签,但有一个你可以解决这个喜欢生成一个URL>将其传递到SCE功能的另一种方式,它会被列入白名单.喜欢@NuclearGhost说

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

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

}]);