Angular 保存清理html的最佳方法

我需要在我的数据库中存储一部分html代码，但反过来以一种安全的方式将其显示为预览

我正在显示预览，如下所示：

  <div class="preview" [innerHTML]="card | sanitize">

我的问题是，我应该直接保存卡片文本还是申请：

this.sanitizer.sanitize(SecurityContext.HTML, card);

问题是，当我应用senitize并再次尝试显示它时，它会丢失css的所有属性

---

或者您可以推荐一种最佳做法吗？

TLDR：使用innerHTML是安全的。

无需使用innerHTML手动清理，Angular会在出现不安全值时自动清理。查看Angular了解更多详细信息

引述：

对于要解释的HTML，请将其绑定到HTML属性，例如 innerHTML。但将攻击者可能控制的值绑定到 innerHTML通常会导致XSS漏洞。例如，代码 执行标记中包含的内容：

export class InnerHtmlBindingComponent {
  // For example, a user/attacker-controlled value from a URL.
  htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
}

导出类InnerHtmlBindingComponent{
//例如，用户/攻击者通过URL控制值。
htmlSnippet='模板警报（“0wned”）语法'；
}

Angular将该值识别为不安全并自动对其进行清理， 它删除标记，但保留安全内容，如 元素

export class InnerHtmlBindingComponent {
  // For example, a user/attacker-controlled value from a URL.
  htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
}