web-dev-qa-db-ja.com

Angular 2サニタイズを無効にする

Base64文字列を<img src='data:image/png;base64,${Here}'にレンダリングしようとしています。

しかし、レンダリングしようとすると、レンダリングする前にng2がbase64文字列をサニタイズすると、DOMに表示する前に値に何かが追加されます。 （DomSanitizerを使用して）回避策を見つけましたが、最新バージョンでは機能しません。

これが私のマークアップです：

<img alt="RegularImage" src="data:image/png;base64,{{imgBase64}}">

そして、これが私の構成要素です：

imgBase64="SomeBase64StringFetchedSomehow";

しかし、angular2はコンソールの次のメッセージに表示されています-WARNING: sanitizing unsafe URL value

NG2がbase64文字列をサニタイズしないようにするにはどうすればよいですか？

更新

get getImg() {
    return this._sanitizer.sanitize(SecurityContext.URL,`data:image/png;base64,${this.img}`);
}

この問題は解決しません。 DomSanitizerクラスはRC6にはもう存在しません

angulartypescriptsanitizationangular2-template
7
Maris

数時間の調査の結果、最新バージョンのng2には、DIを使用して注入できるDomSanitizerはありませんが、Sanitizerがあることがわかりました。だからここに使用法があります：

constructor( private _sanitizer: Sanitizer){
}

get getImg() {
    return this._sanitizer.sanitize(SecurityContext.URL, `data:image/png;base64,${this.img}`);
}

<input src="{{getImg}}"/>

ご覧のとおり、sanitizeメソッドの最初の引数はSecurityContextインスタンスであり、これは基本的に列挙型です。したがって、現在、Sanitizerは、SecurityContextに基づいて使用する実装を選択するファクトリです。

私の場合、base64が取得前にサニタイズされていたため、動作させることができなかったという問題がありました。

4
Maris

文字列が信頼されていることをAngular2に明示的に伝える必要があります

https://angular.io/docs/ts/latest/api/platform-b​​rowser/index/DomSanitizer-class.html

constructor(private sanitizer:DomSanitizer) {}

get imgBase64() {
  this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,$SomeBase64StringFetchedSomehow');
}

<img alt="RegularImage" [src]="imgBase64">

参照 RC.1では、バインディング構文を使用して一部のスタイルを追加できません

8
Günter Zöchbauer

OverrideSecurityTrust ...関数を機能させようとして失敗した後、私は次のことに頼りました。

@ViewChild('div_element_id') private div_element_id: ElementRef;
...

this.div_element_id.nativeElement.innerHTML = bypass_security_for_this_html;
2
John Langford