Angular 2禁用清理

我想呈現base64字符串到<img src='data:image/png;base64,${Here}'。Angular 2禁用清理

但總是當我嘗試呈現它時，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不再存在

來源

2016-09-16 Maris

你爲什麼不使用最終代替RC.6的？ –

剛剛嘗試了RC.7併發布了angular2版本。 – 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被消毒的問題。

來源

2016-09-19 05:48:29 Maris

你需要明確地告訴Angular2該字符串被信任

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

constructor(private sanitizer:DomSanitizer) {} 

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

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

參見In RC.1 some styles can't be added using binding syntax

來源

2016-09-16 05:55:28

不再有DomSanitizer類。我正在嘗試使用新的 - 「Sanitizer」，但它失敗的同樣的錯誤。 '返回this._sanitizer.sanitize（SecurityContext.URL，'data：image/png; base64，$ {this.img}'）;' – Maris

當然有。檢查我的答案中的鏈接（導入信息位於網站的底部）。（以前它被命名爲'DomSanitizationService'） –

模塊'「.../node_modules/@ angular/core/index」'沒有導出成員'DomSanitizer' – Maris

未果後試圖讓bypassSecurityTrust ...職能工作，我使出了以下內容：

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

this.div_element_id.nativeElement.innerHTML = bypass_security_for_this_html;

來源

2017-06-07 22:28:31

哦，我的。不，這不應該完成。繞過衛生條件讓你面對XSS攻擊。 – TimTheEnchanter

Angular 2禁用清理

回答

相關問題