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 keuze uit North en South< br>\n- gratis dagelijkse toegang tot de spa (1 uur Hamman, 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
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('<');
}
}