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

user_7260635 0
Viewed 79128
<!--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.

ionic2 angular security html javascript
6 Answers

You need to sanitize() the safevalue like this :

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

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

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))
    }
}
user_94980540
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))
);
user_16574650
Related