Required a safe HTML, got a Style

Question

I'm working on a component to dynamically load the html content and validate the loaded styles and prevent mixing the app styles with the dynamic template's styles.

This is my html component:

<div class="modal-header">
  <h4 class="modal-title">{{title}}</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body" [innerHTML]="content | htmlParse">
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary" (click)="activeModal.close('Close click')">Aceptar</button>
</div>

The custom pipe:

@Pipe({name: 'htmlParse'})
 export class HtmlParserPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {
  }

   transform(value) {
     return this.sanitized.bypassSecurityTrustStyle(value);
   }
  }

And the received error is this one:

 Error: Required a safe HTML, got a Style (see http://g.co/ng/security#xss)
at DomSanitizerImpl.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomSanitizerImpl.checkNotSafeValue (platform-browser.js:1831)
at DomSanitizerImpl.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomSanitizerImpl.sanitize (platform-browser.js:1800)
at setElementProperty (core.js:21109)
at checkAndUpdateElementValue (core.js:21061)
at checkAndUpdateElementInline (core.js:21008)
at checkAndUpdateNodeInline (core.js:23359)
at checkAndUpdateNode (core.js:23325)
at debugCheckAndUpdateNode (core.js:23959)
at debugCheckRenderNodeFn (core.js:23945)
at Object.eval [as updateRenderer] (GenericContentModalComponent.html:7)

Answer 1

Please try this it worked for me bypassSecurityTrustHtml