Ionic 2 : "WARNING: sanitizing unsafe URL value" error

Question

I work in Ionic 2 and I want to display a picture with variable, somethink like this :

<img src="data:{{user.file.type}};base64,{{user.file.content}}"/>

But the picture isn't display on my bowser and I have this error in the chrome console : "WARNING: sanitizing unsafe URL value"

Howerver, when I put my file type and file content in hard code it's work. But I need to use variable.

Any idea ? :)

You probably need a sanitizer like demonstrated in http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 — Günter Zöchbauer, Dec 22 '16 at 13:25

Ivar Reukers · Accepted Answer · 2016-12-22T14:21:49.513

2

Not sure why this happens but it can be prevented by creating a binding to the src

<img [src]="'data:'+ user.file.type +';base64,'+ user.file.content "/>

In case that for some reason you don't want to/can't click the URL:

edited Dec 22 '16 at 14:21

answered Dec 22 '16 at 13:40

Ivar Reukers

I'm sure there is no difference whether `[src]="expr"` or `src="{{expr}}"` is used. – Günter Zöchbauer Dec 22 '16 at 14:22
I've solved this issue on multiple occasions just by creating the binding. It doesn't show any errors in the console when binding to the `src` – Ivar Reukers Dec 22 '16 at 14:24
Oh. well in that case the code is correct? In case the media type is in the correct form – Ivar Reukers Dec 22 '16 at 14:26
I think using a sanitizer is the way to go. http://stackoverflow.com/a/39524574/217408 – Günter Zöchbauer Dec 22 '16 at 14:26
1

Why does this occur? Is it a browser related issue? Since the plunker works – Ivar Reukers Dec 22 '16 at 14:32
Actually I don't know. I would expect the same behavior. – Günter Zöchbauer Dec 22 '16 at 14:35
Figured that having a space in the base64 image, or missing a single letter/wrong base64 string/wrong media type returns in a unsafe html warning. – Ivar Reukers Dec 22 '16 at 14:47
@V.Pivet you accepted my answer? What was the solution? – Ivar Reukers Dec 22 '16 at 15:01
It was an error in my base64 code. Your solution with [src] work ! :) – V. Pivet Dec 22 '16 at 15:13
aaah okay that explains. Your own code would work as well probably. – Ivar Reukers Dec 22 '16 at 15:13

1 Answers1