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

问题描述

我正在使用此指令将jCrop与Angular一起使用： http://plnkr.co/编辑/ Z2IQX8s9UK6wQ1hS4asz？p =预览

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

当我加载 src 的值时，我得到了此错误：

When I load in a value for src, I get this error:

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

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

然后它将我链接到一个页面，上面写着：

Then it links me to a page that says this:

阻止$ sceDelegate policy不允许从url加载资源。

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

我的HTML是这样的：

My html is this:

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

当我更改 $ scope.profileImg 到我的图片的网址。

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

我正在链接到S3，我从中获取值profileImg 。我相信这个来源，所以我怎么能告诉angular这个源是否足以让这个指令有效？

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?

如果我硬编码 src 成为我的形象，我没有遇到这个问题。

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

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

I'm trying to trust the url with $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 ，它也会抛出同样的错误。

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

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

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

我把它移到S3托管，它运作良好。我想要链接到的图像也在S3上。
我把它移到了EC2实例上的Apache Web服务器上，它没有用。

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.

我正在使用所有答案， ng-src 而不是 src ， $ sce.trustAsUrl（url） ， $ compileProvider

I'm using all the answers, ng-src instead of src, $sce.trustAsUrl(url), and the $compileProvider

推荐答案

有时阅读文档很好关于 $ sce

sometimes its good to read the docs about $sce

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

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屋！