Angular在尝试下载文件时向url添加"unsafe"

Question

我有一个小的AngularJS应用程序,我试图打开上传的图像,并遇到角度在URL的开头添加"unsafe:"的问题.我在我的应用配置中添加了以下行来清理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 参数，它将返回当前定义的 regexp 。

在空的 Angular 1.3.0 上运行此代码：

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

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

使用 basic 的 base64 编码的 JPEG实际上可以像您在此处<img ng-src="{{main.src}}">看到的那样工作，以及另一个带有 png 的图像。另请查看控制台以查看正则表达式。

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

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

如您所见，它也有效。

长话短说 - 您不需要在 1.3.0 及更高版本中为 data:image/* 定义正则表达式，因为它是默认定义的。

我不确定问题是什么，但也许您的代码中某处有另一个 imgSrcSanitizationWhitelist 定义，或者数据 uri 以某种方式损坏。