Maris Maris - 2 months ago 149
TypeScript Question

Angular 2 disable sanitize

I am trying to render base64 string into

<img src='data:image/png;base64,${Here}'
.

But always when I try to render it, ng2 sanitizing my base64 string before rendering it adds something into my value before showing it in DOM.
I have found workaround(using DomSanitizer) but it doesn't work on latest versions.

Here is my markup:

<img alt="RegularImage" src="data:image/png;base64,{{imgBase64}}">


And here is my component part:

imgBase64="SomeBase64StringFetchedSomehow";


But angular2 is showing in console next message -
WARNING: sanitizing unsafe URL value


How to prevent NG2 from sanitizing my base64 string?

Update

get getImg() {
return this._sanitizer.sanitize(SecurityContext.URL,`data:image/png;base64,${this.img}`);
}


Doesn't solve this issue. DomSanitizer class does not exists anymore in RC6

Answer

After few hours of researches I have finally found that in latest version of ng2 there is no DomSanitizer that can be injected using DI, however there is Sanitizer. So here is the usage:

constructor( private _sanitizer: Sanitizer){
}

get getImg() {
    return this._sanitizer.sanitize(SecurityContext.URL, `data:image/png;base64,${this.img}`);
}

<input src="{{getImg}}"/>

As you can see first argument of sanitize method is SecurityContext instance, which basically is enum. So right now Sanitizer is a factory which choose the implementation to use based on SecurityContext

In my case I had a problem that my base64 was sanitized before that get, that why I was not able to get it working.

Comments