11

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!

dhalia
  • 401
  • 5
  • 21
  • You might want to remove the final `|` or else anything that has a forward slash will be matched. – ndnenkov Aug 17 '15 at 19:43
  • If you could just simplify the problem statement, someone would be able to help you. You are using regular expressions for something. You can only do stuff like find/replace, etc.. Any engine understands the simple expression you use. –  Aug 18 '15 at 15:38
  • @sln: s/he's passing the regex to this angular method: [https://docs.angularjs.org/api/ng/provider/$compileProvider](https://docs.angularjs.org/api/ng/provider/$compileProvider) – Mario Trucco Aug 19 '15 at 15:58

1 Answers1

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.

Ori Drori
  • 183,571
  • 29
  • 224
  • 209