Angular 2 disable sanitize

Question

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

Why are you not using final instead of RC.6? – Günter Zöchbauer Sep 16 '16 at 06:01 — Günter Zöchbauer, Sep 16 '16 at 06:01
Just tryied with RC.7 and release version of angular2. – Maris Sep 16 '16 at 06:51 — Maris, Sep 16 '16 at 06:51

score 9 · Answer 1 · edited May 23 '17 at 12:09

9

You need to explicitly tell Angular2 that the string is trusted

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

constructor(private sanitizer:DomSanitizer) {}

get imgBase64() {
  this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,$SomeBase64StringFetchedSomehow');
}

<img alt="RegularImage" [src]="imgBase64">

See also In RC.1 some styles can't be added using binding syntax

edited May 23 '17 at 12:09

Community

1
1

answered Sep 16 '16 at 05:55

Günter Zöchbauer

623,577
216
2,003
1,567

There is no DomSanitizer class anymore. I was trying to use new one - `Sanitizer` but it failed with same error. `return this._sanitizer.sanitize(SecurityContext.URL,`data:image/png;base64,${this.img}`);` – Maris Sep 16 '16 at 05:58
Of course there is. Check the link in my answer (import info is at the bottom of the site). (Previously it was named `DomSanitizationService`) – Günter Zöchbauer Sep 16 '16 at 05:59
Module '".../node_modules/@angular/core/index"' has no exported member 'DomSanitizer' – Maris Sep 16 '16 at 06:35
As I mentioned above it was renamed. I guess in RC.7 so you probably need to use `DomSanitizationService` or perhaps `DomSanitizerService` (don't remember exactly) (or update to final) – Günter Zöchbauer Sep 16 '16 at 06:36
I have tried with RC7 version and release version of Angular2 and still there is no `DomSanitizer`/`DomSanitizationService`/`DomSanitizerService`. However there is `Sanitizer`, but it is not working. I am still getting - `ARNING: sanitizing unsafe URL value data:...` – Maris Sep 16 '16 at 06:50
`Sanitizer` should work as well. `DomSanitizer` is the concrete implementation you get passed, but you don't need to know about that. I found http://stackoverflow.com/questions/38324762/angular-2-render-byte-from-web-api-as-an-image-src and there it seems to work. – Günter Zöchbauer Sep 16 '16 at 06:55
1

Not sure why some people say it doesn't work. It works fine in Angular 8 – Sagar V Jun 30 '20 at 17:40

Maris · Accepted Answer · 2016-09-19T11:03:18.183

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.

score 4 · Answer 3 · answered Jun 07 '17 at 22:28

4

After unsuccessfully trying to get the bypassSecurityTrust... functions to work, I resorted to the following:

@ViewChild('div_element_id') private div_element_id: ElementRef;
...

this.div_element_id.nativeElement.innerHTML = bypass_security_for_this_html;

answered Jun 07 '17 at 22:28

John Langford

1,272
2
12
15

2

Oh, my. No. This should never be done. Bypassing sanitazation leaves you open to XSS attacks. – TimTheEnchanter Dec 14 '17 at 02:03
4

Not if the html is trusted, for example, it was created in a CMS. – speciesUnknown Jan 07 '19 at 09:54

Angular 2 disable sanitize

3 Answers3

Linked