角度不安全的网址答案

【问题标题】：Angular insecure url角度不安全的网址
【发布时间】：2023-03-09 21:40:01
【问题描述】：

我正在使用此指令将 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 信任该 url。

我的控制器：

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 服务器连接它？

编辑2：

我将其移至 S3 托管，并且成功了。我试图链接到的图像也在 S3 上。我将它移到 EC2 实例上的 Apache Web 服务器上，但它不起作用。

我正在使用所有答案，ng-src 而不是 src、$sce.trustAsUrl(url) 和 $compileProvider

【问题讨论】：

你试过用 ng-src 代替 img 上的 src 吗？它应该有助于防止类似的问题。硬编码可以工作的事实告诉我，您可能应该改用 ng-src。
@aaronfrost 我刚刚尝试过，但没有成功。我得到了同样的错误
在您设置 url 的控制器中，您需要注入 $sce 服务并使用它。不知道你在做什么出了什么问题。
@aaronfrost 我发布了我的控制器代码，看起来我注入了$sce

标签： javascript angularjs angularjs-directive jcrop

【解决方案1】：

有时阅读有关 $sce 的文档会很好

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

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

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

}]);

【讨论】：

【解决方案2】：

如果您想将网址添加为可信来源，您可以使用ng.$sce 服务中的trustAsUrl() 方法

这是angular documentation for the service。

【讨论】：

我尝试输入 ng.$sce.trustAsUrl(url) 并告诉我 ng 未定义。
您需要将 $sce 作为服务注入到您的控制器或指令中，您从中进行 http 调用。然后从$sce.trustAsUrl(url)访问它

【解决方案3】：

我最终只是用$sceProvider.enabled(false) 将其关闭。

【讨论】：

我认为这不是一个好主意。您可以使用 $sceDelegateProvider 设置一个受信任（列入白名单）的 URL