I am currently developing a component that loads html content dynamically and validates the loaded styles to prevent any mixing of app styles with the dynamic template's styles.
This is the structure of 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">×</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')">Accept</button>
</div>
The custom pipe utilized for this purpose is:
@Pipe({name: 'htmlParse'})
export class HtmlParserPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {
}
transform(value) {
return this.sanitized.bypassSecurityTrustStyle(value);
}
}
Upon implementation, an error was encountered:
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)