web-dev-qa-db-ja.com

Angular 5-パイプでHTMLをサニタイズ

警告が表示されたとき：

「警告：HTMLをサニタイズすると一部のコンテンツが削除されます」

私はいくつかの研究を行い、下のパイプまたは下のようなパイプを使用している人々を見ました

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

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

 constructor(private _sanitizer:DomSanitizer) { }

 transform(v:string):SafeHtml {
   return this._sanitizer.bypassSecurityTrustHtml(v);
 }
}

残念ながら、次のようにパイプを実装しても、同じエラーが発生します。

<span [innerHTML]="specialist.blocks[0].paragraph.html | sanitizeHtml"></span>
<p [innerHTML]="package.fields.remarks | sanitizeHtml"></p>
<li [innerHTML]="package.fields.name | sanitizeHtml"></li>

だから、私はパイプを間違って実装したのか、それが機能しない理由が他にあるのだろうかと思っていますか？

編集：

の例 specialist.blocks[0].paragraph.html：

"<div id =" test "class =" test ">\n <h3> NAME SPECIALIST </ h3>\n <p>ランダムテキスト</ p> </ div>\n </ div>"

の例 package.fields.remarks：

"アレンジメント：3 nachten int。ontbijt en 2 greenfees p.p. met keuze uit North en South <br>\n- gratis dagelijkse toegang tot de spa（1 uur Hamman、sauna、zwembad、hydromassage）

の例 package.fields.name：

"ショートブレイク3泊<br> 2名/スーペリアダブル/ LO、ゴルフ込み"

FirefoxおよびChromeで警告を取得する

angularangular5html-sanitizing
6
Djkobus

デモ： https://stackblitz.com/edit/angular-vjt27k?file=app%2Fsanitize-html.pipe.ts

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'sanitizeHtml'})

export class sanitizeHtmlPipe implements PipeTransform  {
  transform(value) {
    return value.split('< ').join('<');
  }
}
4
Chandru

以下の例のように、htmlで{}を印刷しようとすると、angularは式として扱い、エラーが発生するため、オプションを下回ることができます。HTMLサニタイズには2つのオプションがあります。1）

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

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer: DomSanitizer) { }

  transform(value: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
  }

}

コンポーネントでは、{{variable | santizeHtml}}

2）コンポーネントを使用して、以下のようなプロパティバインディングとして、.tsファイルでhtmlを宣言します

allowedChars = '@ # $ % ^ & * ( ) _ - ., ? < > { } [ ] ! +';

それをテンプレートで使用して、

<span [innerHTML]="allowedChars"></span>
1
Pravin P Patil