角度添加＆＃34;不安全＆＃34;尝试下载文件时的URL

Question

我有一个小的AngularJS应用程序，我正在尝试打开上传的图像，并且遇到了角度添加＆＃34;不安全的问题：＆＃34;在URL的开头。我在我的应用配置中添加了以下行来清理URL，但它对我不起作用：

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob:chrome-extension):|data:image|\//);

我正在使用Angular v1.3.0，因此我使用了正确的属性名称。我主要使用Chrome，但我在其他浏览器中遇到同样的问题。此外，我的图像的开头看起来像这样：

unsafe:data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg...

知道我的正则表达式中缺少什么？ 提前谢谢！

Answer 1

如果$compileProvider.imgSrcSanitizationWhitelist()没有regexp参数，则返回当前定义的正则表达式。

在空角度1.3.0上运行此代码：

app.config(function ($compileProvider) {
    console.log($compileProvider.imgSrcSanitizationWhitelist()); // 
});

我得到了这个结果 - /^\s*((https?|ftp|file|blob):|data:image\/)/

使用基本<img ng-src="{{main.src}}">的base64编码JPEG实际上可以正常工作，因为您可以看到here，another one带有png。另请查看控制台以查看正则表达式。

我运行的另一项测试是将data:image/jpeg;base64,移出范围绑定字符串并将其放入ng-src：

<img ng-src="data:image/jpeg;base64,{{main.src}}">

正如你所看到的那样worked。

简而言之 - 您不需要在1.3.0及更高版本中为数据定义正则表达式：image / *，因为它是默认定义的。

我无法确定问题是什么，但也许你有另一个定义 imgSrcSanitizationWhitelist代码中的某个地方或数据uri以某种方式被破坏。