When i got the warning:
"WARNING: sanitizing HTML stripped some content"
I did some research and saw people using the pipe below or a pipe that looks like the one below
import { Pipe, PipeTransform } from '@angular/core';import { DomSanitizer, SafeHtml } from '@angular/platform-browser';@Pipe({ name: 'sanitizeHtml' })export class SanitizeHtmlPipe implements PipeTransform {constructor(private _sanitizer: DomSanitizer) { }transform(v: string): SafeHtml {return this._sanitizer.bypassSecurityTrustHtml(v);}}Unfortunately I still get the same error even when i implement the pipe like this:
<span [innerHTML]="specialist.blocks[0].paragraph.html | sanitizeHtml"></span><p [innerHTML]="package.fields.remarks | sanitizeHtml"></p><li [innerHTML]="package.fields.name | sanitizeHtml"></li>So I'm wondering if I implemented the pipe wrong or is there something else why it doesn't work?
Edit:
example of specialist.blocks[0].paragraph.html:
"< div id="test" class="test"> \n< h3>NAME SPECIALIST</h3>\n< p>random text< /p>< /div>\n< /div>"
example of package.fields.remarks:
"Arrangement: 3 nachten incl. ontbijt en 2 greenfees p.p. met keuzeuit North en South< br>\n- gratis dagelijkse toegang tot de spa (1 uurHamman, sauna, zwembad, hydromassage)"
example of package.fields.name:
"Shortbreak 3 nachten< br>2 pers./Superior Double/LO, incl. golf"
Getting the warnings in firefox and chrome
Best Answer
As below example if you trying print {} in html angular treats it as expression and will give errors so you can got below options,We have 2 options for HTML sanitization,
- Using Pipe
import { Pipe, PipeTransform } 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.bypassSecurityTrustHtml(value);}}In Component you can use it as {{variable | santizeHtml }}
- Using Component,as an property binding like below,Declare html in .ts file
const allowedChars = '@ # $ % ^ & * ( ) _ - ., ? < > { } [ ] ! +';and use it in template as,
<span [innerHTML]="allowedChars"></span>Demo : https://stackblitz.com/edit/angular-vjt27k?file=app%2Fsanitize-html.pipe.ts
pipe.ts
import { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: 'sanitizeHtml'})export class sanitizeHtmlPipe implements PipeTransform {transform(value) {return value.split('< ').join('<');}}- All is good but your HTML is not perfect. so you need to remove space from html tags.
- Your JSON something should be like this
JSON:
specialist: any = {"blocks": [{"paragraph": {"html": '<div id="test" class="test">\n<h3>NAME SPECIALIST</h3>\n<p>random text</p> <div>\n</div>'}}]}package: any = {"fields": {"remarks": 'Arrangement: 3 nachten incl. ontbijt en 2 greenfees p.p. met keuze uit North en South<br>\n- gratis dagelijkse toegang tot de spa (1 uur Hamman, sauna, zwembad, hydromassage)',"name": 'Shortbreak 3 nachten<br>2 pers./Superior Double/LO, incl. golf'}}HTML:
<span [innerHTML]="specialist.blocks[0].paragraph.html | sanitizeHtml"></span><p [innerHTML]="package.fields.remarks | sanitizeHtml"></p><li [innerHTML]="package.fields.name | sanitizeHtml"></li>Sanitize Pipe TS:
import { Pipe, PipeTransform } from '@angular/core';import { DomSanitizer, SafeHtml } from '@angular/platform-browser';@Pipe({ name: 'sanitizeHtml' })export class SanitizeHtmlPipe implements PipeTransform {constructor(private _sanitizer: DomSanitizer) { }transform(v: any): any {return this._sanitizer.bypassSecurityTrustHtml(v);}}Output:
Browser Output Log View
For full HTML Sanitizing import setup process see this post