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.

Solution 1

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)

Solution 2

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);
    }
}

Solution 3

You need to sanitize() the safevalue like this :

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

Solution 4

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);
    }
}

Solution 5

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))
    }
}

View more solutions