Safe value must use [property]=binding after bypass security with DomSanitizer

Question

<!--HTML CODE-->
<p #mass_timings></p>

//Controller code

@ViewChild('mass_timings') mass_timings: ElementRef;
constructor(private domSanitizer:DomSanitizer)
getInnerHTMLValue(){
 this.mass_timings.nativeElement.innerHTML = 
   this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);

}

but the output which the mass_timings is displaying is including the text:-

Safe value must use [property]=binding

at the beginning

How to remove this string.

Günter Zöchbauer · Accepted Answer · 2018-05-17T17:04:21.420

86

As the error message says, the sanitized HTML needs to be added using property binding:

<p [innerHTML]="massTimingsHtml"></p>

constructor(private domSanitizer:DomSanitizer) {
  this.massTimingsHtml = this.getInnerHTMLValue();
}
getInnerHTMLValue(){
  return this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);
}

StackBlitz example (based on Swapnil Patwa's Plunker - see comments below)

edited May 17 '18 at 17:04

answered Jul 27 '17 at 13:22

Günter Zöchbauer

623,577
216
2,003
1,567

2

@manish kumar, Demo plunker - https://plnkr.co/edit/oCZ9yKTl68kuTPx6s7fH?p=preview – Swapnil Patwa Jul 27 '17 at 13:27
did this only. but can you relate to [this](https://stackoverflow.com/a/38826472/7260635) and explain – manish kumar Jul 27 '17 at 14:14
You can do that, but not with sanitized HTML, only with a plain HTML string. – Günter Zöchbauer Jul 27 '17 at 14:18
1

Not if you use `this.mass_timings.nativeElement.innerHTML = ...`. But sanitizing is recommended for security reasons. – Günter Zöchbauer Jul 27 '17 at 14:46
@manishkumar most of the time copying the Plunkers code to StackBlitz will fix it. Plunker based on old Angular versions don't run anymore. See the StackBlitz in my updated Answer. – Günter Zöchbauer May 17 '18 at 17:05
I've done this but it's still displaying the error message for some reason, anyone knows what I'm doing wrong? I'm literally using ```this.item = this.domSanitizer.bypassSecurityTrustHtml(this.item)``` and ```[innerHtml]="item"``` – SimbaClaws Apr 08 '20 at 12:26
I guess `this.item` is bound before `this.item = this.domSanitizer.bypassSecurityTrustHtml(this.item)` is executed. Try using a different field for `...this.domSanitizer.bypassSecurityTrustHtml(this.itemHtml)` – Günter Zöchbauer Apr 08 '20 at 12:40
is this the only way? What if we need to add a favicon programatically for example? – MartaGalve Jan 18 '21 at 05:03
@bubble Not sure what the problem is. This code is mostly about adding CSS or HTML programmatically. Perhaps you can demonstrate the problem in a stackblitz? – Günter Zöchbauer Jan 18 '21 at 12:33
I get the exact same error even though I'm doing this. – Jul 10 '21 at 19:08

score 21 · Answer 2 · answered Dec 24 '18 at 10:43

21

You need to sanitize() the safevalue like this :

this.domSanitizer.sanitize(SecurityContext.HTML,this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings));

answered Dec 24 '18 at 10:43

Sunil Kumar

6,112
6
36
40

3

Aren't you just resanitizing? – Jake Sylvestre Mar 22 '19 at 16:33
1

I guess sanitize() is happening only once. And it works, that's why i posted. – Sunil Kumar Mar 23 '19 at 06:06
1

It looks funny but this really works! And it's better since you don't need to bind to [innerHtml] everywhere. – Ε Г И І И О Apr 20 '20 at 18:39
thanks, worked for me on angular 8, ng2-table – Prem G Mar 18 '22 at 06:01

Black Mamba · Answer 3 · 2021-09-16T11:54:07.273

20

I was getting this error when using an iframe so there I fixed using [src] as below:

Note: Use pipes for better performance

Import this:

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer, ....other DI){}

In ts file

getSafeUrl() {
        return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);     
}

In html file

<iframe [src]="getSafeUrl()" frameborder="0" *ngIf="url"></iframe>

This method is quite cycle consuming as it'll call the function multiple time so it's better to sanitize URL inside lifeCycleHooks like ngOnInit().

You can use pipes as well for better performance:

Using Pipe

HTML:

<iframe [src]="url | byPassSecurity"></iframe>

Sanitize.pipe.ts:

import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
    name: 'byPassSecurity'
})
export class ByPassSecurityPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {}

    transform (value: string): SafeHtml {
        return this.sanitizer.bypassSecurityTrustHtml(value);
    }
}

edited Sep 16 '21 at 11:54

answered Apr 12 '18 at 07:55

Black Mamba

13,632
6
82
105

5

You just saved my time, thanks! src="{{code}}" doesn't work, but [src]="code" works like a charm! – Frank Jun 13 '18 at 15:25
3

After hours of trying, this was finally the solution which worked out for me. Anyone an idea why `src="{{code}}"` doesn't work but `[src]="code" ` does? – jammartin Jan 14 '19 at 09:41
1

You should use a pipe instead of a function to save performance and prevent it from being called every time the change detection runs. See Renil Babu answer. – Mick May 11 '20 at 14:11
how do you import the pipe?? – Zaffer Jul 31 '22 at 16:47
You'll need to import it inside the module of the component/page you want to use it in – Black Mamba Aug 06 '22 at 18:34

score 8 · Answer 4 · answered Jan 19 '20 at 07:17

8

My Solution using Pipe.

HTML

<div [innerHtml]="htmlValue | byPassSecurity"></div>

Pipe

import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
    name: 'byPassSecurity'
})
export class ByPassSecurityPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {}

    transform (value: string): SafeHtml {
        return this.sanitizer.bypassSecurityTrustHtml(value);
    }
}

answered Jan 19 '20 at 07:17

Renil Babu

2,118
1
20
29

1

A pipe is the best solution in terms of performance since a function (like Black Mamba said) will be called each time the change detection runs. – Mick May 11 '20 at 14:13
Great job here, thank you sir! – Willie Jul 12 '23 at 21:04

luiscla27 · Answer 5 · 2022-01-31T16:37:29.340

5

You don't need to bind to `[innerHtml]` everywhere.

It works by using sanitize() and bypassSecurityTrustHtml() together like this :

this.mass_timings.nativeElement.innerHTML = (
    this.domSanitizer.sanitize(SecurityContext.HTML, this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings))
);

edited Jan 31 '22 at 16:37

answered Jan 21 '21 at 22:16

luiscla27

4,956
37
49

score 4 · Answer 6 · answered Jan 09 '20 at 05:33

4

I got a same error while using MATHJAX in angular 7. I resolved by below pipe transform. 100% work perfectly

//Sanitize HTML PIPE

import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
    name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) {
    }

    transform(value: string): SafeHtml {
        return this._sanitizer.sanitize(SecurityContext.HTML, this._sanitizer.bypassSecurityTrustHtml(value))
    }
}

answered Jan 09 '20 at 05:33

Kishore Thangapandi

219
2
5

Why would you underscore sanitizer? Makes no sense. Also you say it works 100% perfectly but no thats not true, some others might use `SecurityContext.URL` for example depending on the context. – Mick May 11 '20 at 14:25
1

How to apply the same with title of an element – Shaik Habeeb Aug 14 '20 at 07:38

Safe value must use [property]=binding after bypass security with DomSanitizer

6 Answers6

You don't need to bind to `[innerHtml]` everywhere.

Linked

Safe value must use [property]=binding after bypass security with DomSanitizer

6 Answers6

You don't need to bind to [innerHtml] everywhere.

Linked

You don't need to bind to `[innerHtml]` everywhere.