Angular adding "unsafe" to url when trying to download an file [duplicate]

Question

I have a small AngularJS app where I am trying to open an uploaded image and am running into the issue where angular adds "unsafe:" at the beginning of the URL. I have added the following line in my app config to sanitize the URL, but it is not working for me:

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

I am using Angular v1.3.0 so I am using the correct property name. I am using Chrome mostly, but I have the same issue in other browsers. Also, the beginning of my image looks like this:

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

Any idea what am I missing in my regex? Thanks in advance!

Answer 1

If you $compileProvider.imgSrcSanitizationWhitelist() without the regexp parameter it returns the currently defined regexp .

Running this code on an empty angular 1.3.0:

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

I got this result - /^\s*((https?|ftp|file|blob):|data:image\/)/

And the base64 encoded JPEG using the basic <img ng-src="{{main.src}}"> actually works as you can see here, and another one with a png. Also look at the console to see the regexp.

Another test I've run is to move the data:image/jpeg;base64, out of the scope binded string and put it the ng-src:

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

As you can see it worked as well.

To make a long story short - you don't need to define a regexp in 1.3.0 and above for data:image/*, as it's defined by default.

I can't be sure what's the problem, but maybe you've got another definition of imgSrcSanitizationWhitelist somewhere in your code or the data uri is broken somehow.