angular - 以 Angular 保存清理 html 的最佳方法

Question

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

我正在显示预览:

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

我的 sanitizer 管道基本上是这样做的:

return this.sanitizer.bypassSecurityTrustHtml(text);

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

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

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

或者您能推荐一个最佳实践吗？

Answer 1

TLDR:使用 innerHTML 是安全的。

无需使用 innerHTML 手动清理，当存在不安全值时，Angular 会自动为您清理它。查看 Angular Documentation了解更多详情。

引自那里:

For the HTML to be interpreted, bind it to an HTML property such asinnerHTML. But binding a value that an attacker might control intoinnerHTML normally causes an XSS vulnerability. For example, codecontained in a tag is executed:

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

Angular recognizes the value as unsafe and automatically sanitizes it,which removes the tag but keeps safe content such as the element.