Angular 2禁用消毒答案

【问题标题】：Angular 2 disable sanitizeAngular 2禁用消毒
【发布时间】：2017-01-24 06:32:21
【问题描述】：

我正在尝试将 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}`);
}

不能解决这个问题。 RC6 中不再存在 DomSanitizer 类

【问题讨论】：

为什么不使用 final 而不是 RC.6？
刚刚尝试使用 RC.7 和 angular2 的发布版本。

标签： angular typescript sanitization angular2-template

【解决方案1】：

你需要明确告诉 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

【讨论】：

不再有 DomSanitizer 类。我试图使用新的 - Sanitizer 但它失败并出现同样的错误。 return this._sanitizer.sanitize(SecurityContext.URL,data:image/png;base64,${this.img});
当然有。检查我的答案中的链接（导入信息位于网站底部）。（之前它被命名为DomSanitizationService）
模块 '".../node_modules/@angular/core/index"' 没有导出的成员 'DomSanitizer'
正如我上面提到的，它被重命名了。我猜在 RC.7 中，所以您可能需要使用 DomSanitizationService 或 DomSanitizerService（不记得确切）（或更新到最终版本）
不知道为什么有些人说它不起作用。它在 Angular 8 中运行良好

【解决方案2】：

经过几个小时的研究，我终于发现在最新版本的 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 在获取之前被清理过，这就是为什么我无法让它工作的原因。

【讨论】：

【解决方案3】：

在尝试让 bypassSecurityTrust... 功能工作失败后，我采取了以下措施：

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

this.div_element_id.nativeElement.innerHTML = bypass_security_for_this_html;

【讨论】：

哦，天哪。不，这绝不应该这样做。绕过清理会让您容易受到 XSS 攻击。
如果 html 是可信的，例如，它是在 CMS 中创建的，则不会。