javascript 角度不安全的网址
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21735002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular insecure url
提问by Mark Meyer
I'm using this directive to use jCrop with Angular: http://plnkr.co/edit/Z2IQX8s9UK6wQ1hS4asz?p=preview
我正在使用此指令将 jCrop 与 Angular 结合使用：http://plnkr.co/edit/Z2IQX8s9UK6wQ1hS4asz?p=preview
When I load in a value for src, I get this error:
当我加载 的值时src，出现此错误：
Can't interpolate: {{profileImg}} Error: [$sce:insecurl]
无法插入：{{profileImg}} 错误：[$sce:insecurl]
Then it links me to a page that says this:
然后它将我链接到一个页面，上面写着：
Blocked loading resource from url not allowed by $sceDelegate policy.
阻止从 $sceDelegate 政策不允许的 url 加载资源。
My html is this:
我的 html 是这样的：
<img-cropped src={{profileImg}} selected='selected(cords)'/>
And this error happens when I change $scope.profileImgto the url of my image.
当我更改$scope.profileImg图像的 url时会发生此错误。
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?
我正在链接到 S3，在那里我从profileImg. 我信任这个来源，那么我怎么能告诉 angular 这个来源足够信任让这个指令工作呢？
If I hardcode the srcto be my image, I don't get this problem.
如果我将其硬编码src为我的图像，则不会出现此问题。
EDIT:
编辑：
I'm trying to trust the url with $sce.
我正在尝试使用 $sce 信任该 url。
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.
即使使用trustAsUrl，它也会引发相同的错误。
It might be that I'm trying to connect from it from my local nginx server?
可能是我试图从我的本地 nginx 服务器连接它？
EDIT2:
编辑2：
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.
我将它移到 S3 托管，并且它起作用了。我试图链接到的图像也在 S3 上。我将它移到 EC2 实例上的 Apache Web 服务器，但它不起作用。
I'm using all the answers, ng-srcinstead of src, $sce.trustAsUrl(url), and the $compileProvider
我使用所有的答案，ng-src而不是src，$sce.trustAsUrl(url)和$compileProvider
回答by Endless
sometimes its good to read the docs about $sce
有时阅读有关$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
这是将所有 blob 和 data:image/* url 列入白名单的替代方法，仅用于<img>标记，但还有其他方法可以解决此问题，例如生成一个 url > 将其传递给 sce 函数之一，它将被列入白名单。就像@NuclearGhost 说的
app.config(["$compileProvider" function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(blob:|data:image)/);
}]);
回答by Mark Meyer
If you'd like to add the url as a trusted source you can use the trustAsUrl()method from ng.$sceservice
如果您想将 url 添加为可信来源，您可以使用service 中的trustAsUrl()方法ng.$sce
Here's the angular documentation for the service.
回答by Mark Meyer
I ended up just turning it off with $sceProvider.enabled(false).
我最终只是用$sceProvider.enabled(false).
