I am currently utilizing Angular 2+ [innerHTML] input for inserting HTML formatting that includes style tags.
Within my template, the code looks like this:
<span [innerHTML]="someVar"></span>
In the component file, I have defined:
someVar = `<span style="background-color:#990000">test</span>`;
A warning message is displayed:
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
The output showcases the inserted span element with the style attribute removed.
To address this issue, I followed a solution mentioned in this post:
https://stackoverflow.com/questions/37076867/
The implementation involves creating a pipe as shown below:
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({name: 'safeHtml'})
export class SanitizeHtml implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(html): SafeHtml {
// return this.sanitizer.bypassSecurityTrustStyle(style);
return this.sanitizer.bypassSecurityTrustHtml(html);
// return this.sanitizer.bypassSecurityTrustScript(value);
// return this.sanitizer.bypassSecurityTrustUrl(value);
// return this.sanitizer.bypassSecurityTrustResourceUrl(value);
}
}
However, despite implementing the suggested solution, there seems to be no change in the output. It is unclear if I am using it correctly...
Can anyone guide me on how to maintain the style attribute while using innerHTML in Angular?