web-dev-qa-db-ja.com

Angular 2、DomSanitizer、bypassSecurityTrustHtml、SVG

私はDomSanitizerをHTML文字列のSVGで使用しています。

Angularの現在のバージョンより前では、これはうまく機能していました。

this.domSanitizer.bypassSecurityTrustHtml(content);

今、私は戻って呼ばれるオブジェクトを取得しています

SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity

DomSanitizerの出力にアクセスする新しい方法はありますか？ SafeHTMLタイプまたは何かとして受信する必要がありますか？ htmlをフィルタリングする場合にbypassSecurityTrustHtmlを使用する意味は何ですか？

ハガキに何か答えがありますか？お願いします...

angularangular-dom-sanitizer
24
Tom

デモ： https://plnkr.co/edit/Qke2jktna55h40ubUl8o?p=preview

import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    console.log(this.sanitized.bypassSecurityTrustHtml(value))
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div [innerHtml]="html | safeHtml">
    </div>
  `,
})
export class App {
  name:string;
  html: safeHtml;
  constructor() {
    this.name = 'Angular2'
    this.html = "<svg> blah </svg>";
  }
}
37
micronyks

つかいます DomSanitizer.bypassSecurityTrustHtml：

constructor(private sanitizer: DomSanitizer) {
}

let html = this.sanitizer.bypassSecurityTrustHtml("<svg> blah </svg>");

詳細： https://angular.io/docs/ts/latest/guide/security.html#bypass-security-apis

1
Andrei Zhytkevich