web-dev-qa-db-ja.com

Angular 2：HTMLをサニタイズすると、CSSスタイルの一部のコンテンツが削除されます

Angular 2コンポーネントでwysiwygエディターを使用しています。エディターのコンテンツをプレビューしようとすると、（テキストに中央を適用した後）、次の警告が表示されます：

警告：HTMLをサニタイズすると一部のコンテンツが削除されます（ http://g.co/ng/security#xss を参照）。
platform-b​​rowser.es5.js：1015

私がhtmlを検査するとき：

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

しかし、console.log（）を使用してエディターの内容をプレビューしようとすると、次のようになります。

<p style="text-align: center;">Text Here...</p>
javascripthtmlcssangular
8
Salim Ben Hassine

これは、セキュリティ上の理由から、Angular 2+）の設計によるものです。 DomSanitizer クラスを使用することで回避できます。

たとえば、値のサニタイズを防ぐパイプを作成できます。

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);
   }
}

次に、たとえば次のようにバインディングで使用できます。

<div [innerHTML]="htmlText | noSanitize">
</div>
16
AlesD