Angular中的sanitize和bypassSecurityTrustHtml之间有什么区别？

Question

我想知道以下内容之间的区别：

import {Component, SecurityContext} from '@angular/core'

export class App {
  divContent: any;
  constructor(private sanitizer: DomSanitizer) {
    this.divContent= sanitizer.sanitize(SecurityContext.HTML, "divContent");
  }

并用以下内容替换sanitize：

sanitizer.bypassSecurityTrustHtml("divContent");

我希望设置div的内部HTML

<div [innerHTML]="divContent"></div>

在这种情况下使用任一选项都是一样的吗？

Answer 1

从Angular documentation开始，您问题的简短回答是sanitize（您当前正在使用的那个）是大多数中更安全和首选的方法案例。

DomSanitizer.sanitize将为您清理值，以便可以在给定的SecurityContext中使用它（在您的示例中为HTML）：

sanitizer.sanitize(SecurityContext.HTML, "divContent");

引用文档，

  

如果上下文值为值，则此方法将解包所包含的安全值并直接使用它。否则，值[第二个参数]将在给定的上下文中被清理为安全，例如通过替换具有不安全的协议部分的URL（例如javascript:）。 实现负责确保在给定的上下文中绝对可以安全地使用该值。

DomSanitizer.bypassSecurityTrustHtml只是绕过安全检查并假定给定值是安全的HTML。文档指定

  

仅当绑定的HTML 不安全（例如包含<script>标记）时才使用[byPassSecurityTrustHtml]并且应该执行代码。清洁剂将保持完整的HTML安全，因此在大多数情况下不应使用此方法。

基本上，sanitize确保传递给它的值在转换时是安全的，如果它不是安全的，如果它已经保持不变，而bypassSecurityTrustHtml盲目地信任HTML你提供是安全的。