Angular：清理HTML剥离了CSS样式的某些内容 [英] Angular : sanitizing HTML stripped some content on css style

问题描述

我在Angular组件中使用了一个wysiwyg编辑器，当我尝试预览编辑器的内容时​​（在我将文本应用于居中之后），
i出现以下警告：

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:

警告：清理HTML会剥离一些内容（请参见 http://g.co/ng/security#xss ）。

platform-b​​rowser.es5.js：1015

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

当我检查html时：

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

但是当我尝试使用console.log（）预览编辑器的内容时​​，我得到了：

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>

推荐答案

出于安全原因，这是Angular 2+设计的。您可以使用 DomSanitizer 类来解决此问题。

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>

这篇关于Angular：清理HTML剥离了CSS样式的某些内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！