Safe value must use [property]=binding after bypass security with DomSanitizer
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)
You need to sanitize() the safevalue like this :
this.domSanitizer.sanitize(SecurityContext.HTML,this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings));
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); }}