Angular 的 bypassSecurityTrustHtml 管道如何在后台工作？答案

【问题标题】：How does Angular's bypassSecurityTrustHtml pipe work under the hood?Angular 的 bypassSecurityTrustHtml 管道如何在后台工作？
【发布时间】：2019-04-21 07:14:40
【问题描述】：

我使用了SafeHtml 管道的变体，但我想知道它实际上是如何工作的。 Angular 如何知道应用于 DOM 的文本已经通过管道传递并且是安全的？它只是在编译阶段完成还是运行时检查？

documentation 说：

调用任何 bypassSecurityTrust... API 都会禁用 Angular 的对传入的值进行内置清理

安全 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);
  }
}

更新：从dom_sanitization_service.ts source 中找出来。 bypassSecurityTrustHtml 函数返回一个 new SafeHtmlImpl(value); 实例。在sanitize过程中，有一个检查：if (value instanceof SafeHtmlImpl)，如果是，则跳过清理过程

【问题讨论】：

标签： angular

【解决方案1】：

我认为你误解了函数的意义。它实际上并没有清理，它甚至不检查 HTML。它所做的只是创建一个设置了标志的对象，因此 Angular 安全性不会阻止它。如果字符串包含不安全的 HTML，则不会被阻止。

开发者仍然应该自己编写一些函数或使用其他工具来确保 HTML 是安全的。

【讨论】：

我知道它不会消毒。你可能误解了这个问题
这并没有冒犯的意思，是的，我可能没有得到您的要求。我仍然回答你说 Angular 将字符串包装在一个对象中 (SafeHtml)。