javascript - Angular : sanitizing HTML stripped some content on css style - Stack Overflow

admin管理员组

文章数量:1200357

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 ).
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>

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>

• javascript
• html
• css
• angular

Share Improve this question Follow edited Sep 8, 2020 at 14:42 Salim Ben Hassine asked Dec 6, 2017 at 19:12 Salim Ben HassineSalim Ben Hassine 34911 gold badge66 silver badges2020 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 24

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>

本文标签： javascriptAngularsanitizing HTML stripped some content on css styleStack Overflow