Angular : sanitizing HTML stripped some content on css style

Question

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>

Solution

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>

Comments

[Jahrenski]

Is there a way to strip content of dangerous things while keeping the style attributes?

[masterxilo]

can anyone put this on npm?