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

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