Safe value must use [property]=binding after bypass security with DomSanitizer
JavascriptHtmlAngularSecurityIonic2Javascript Problem Overview
<!--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.
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
You need to sanitize() the safevalue like this :
this.domSanitizer.sanitize(SecurityContext.HTML,this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings));
Solution 3 - Javascript
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 4 - Javascript
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 - Javascript
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))
}
}
Solution 6 - Javascript
[innerHtml]
everywhere.
You don't need to bind to 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))
);