I’m using ng-dompurify in an Angular 9 application and I’ve substituted the default Angular DomSanitizer with the NgDompurifyDomSanitizer implementation.
@NgModule({
// ...
providers: [
{
provide: DomSanitizer,
useClass: NgDompurifyDomSanitizer,
},
],
// ...
})
That way when doing things like
<div [innerHTML]="someHtmlString"></div>
DomPurify will be used to do the sanitation of that HTML string.
This works fine when I’m not using Ivy but when I use Ivy the rendered HTML is sanitized with something other than the NgDompurifyDomSanitizer. I’m not sure what sanitizer is being used in that case but I see that style attributes are stripped from the html elements which wouldn't happen if the NgDompurifyDomSanitizer is used.
I’ve put together a stackblitz example showing the issue here: https://stackblitz.com/edit/angular-domsanitizer-ivy. If you go into the stackblitz settings and un-check the ‘Enable Ivy’ check box you can see that the text is rendered red, but when it is checked the inline style is stripped and the text is black.
I’m not sure if there is something special I need to do to make this work with Ivy, or if it's not supported with Ivy. I’ve googled around for most of the day trying to figure it out but I haven’t had any luck.
I'd appreciate any insight someone might have.
EDIT: For those interested, this does appear to be a bug and I've opened a ticket: https://github.com/angular/angular/issues/36794
For those interested Kristiyan Kostadinov from the angular team posted a solution to the ticket I opened at: https://github.com/angular/angular/issues/36794
He said.
I think the problem is that you should be providing Sanitizer, not DomSanitizer. Here's a working example: https://stackblitz.com/edit/angular-domsanitizer-ivy-facotn
And changing the code to this seems to work:
@NgModule({
// ...
providers: [
{
provide: Sanitizer,
useClass: NgDompurifyDomSanitizer,
},
],
// ...
})