Angular : sanitizing HTML stripped some content on css style Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Angular : sanitizing HTML stripped some content on css style without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am using a wysiwyg editor in my Angular component, when i try to preview the content of the editor, (after i apply center to the text), i get this warning:

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
platform-browser.es5.js:1015

when i inspect the html:

<p>Text Here...</p>

but when i try to use console.log() to preview the content of the editor i get:

<p style="text-align: center;">Text Here...</p>

Answer

This is by design in Angular 2+ for security reasons. You can workaround it by using the DomSanitizer class.

For example you can make a pipe that prevents sanitization of the value:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'noSanitize' })
export class NoSanitizePipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) {

   }
   transform(html: string): SafeHtml {
      return this.domSanitizer.bypassSecurityTrustHtml(html);
   }
}

Then you can use it in binding for example like this:

<div [innerHTML]="htmlText | noSanitize">
</div>
We are here to answer your question about Angular : sanitizing HTML stripped some content on css style - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji