Angular 中使用 innerHTML 安全显示富文本内容的正确方式

发布日期： 2026-01-26 阅读量： 作者： 碧海醫心

在 angular 中，`[innerhtml]` 默认会自动转义 html 字符以防止 xss 攻击；若需渲染原始 html（如带格式的段落、链接），必须通过 `domsanitizer` 显式信任该内容。

Angular 的核心安全策略默认阻止未经验证的 HTML 插入——这是设计使然，而非 bug。当你写

时，即使 str 是合法 HTML 字符串，Angular 也会将其作为纯文本渲染（或完全不渲染），因为框架认为它“未被信任”。

✅ 正确做法：使用 DomSanitizer 的 bypassSecurityTrustHtml() 方法显式标记该字符串为可信 HTML：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-rich-text',
  template: ``
})
export class RichTextComponent implements OnInit {
  str = 'Please ensure Process Model diagram represents Functions adequately (boxes that represent an activity or group of activities that produce an outcome):

Click here';
  safeHtmlStr!: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    this.safeHtmlStr = this.sanitizer.bypassSecurityTrustHtml(this.str);
  }
}

⚠️ 重要注意事项：

永远不要对用户输入直接调用 bypassSecurityTrustHtml() —— 这将绕过全部 XSS 防护，造成严重安全风险；
如需渲染用户提交的富文本，请先使用可靠库（如 DOMPurify）进行 HTML 清洗，再交由 sanitizer 信任；
bypassSecurityTrustHtml() 仅适用于你完全控制且已验证安全的静态 HTML 字符串；
若目标是「去除 HTML 标签、只显示纯文本」（如问题中提到的“remove HTML elements”），则不应使用 innerHTML，而应使用正则或 DOM 解析提取文本，例如：

stripHtml(html: string): string {
  const tmp = document.createElement('div');
  tmp.innerHTML = html;
  return tmp.textContent || tmp.innerText || '';
}
// 使用示例：this.plainText = this.stripHtml(this.str);

总结：[innerHTML] 本身工作正常，它只是严格遵循 Angular 的安全模型。是否渲染 HTML，取决于你是否主动通过 DomSanitizer 建立信任链——这是保障应用安全与实现富文本展示之间的关键平衡点。

上一篇: ios怎样调用html5评分组件_ios调用html5评分插

下一篇: iPhone如何开启抹掉数据功能？更好保护个人隐私

Angular 中使用 innerHTML 安全显示富文本内容的正确方式

随便看看

南昌壹佳企网络通信有限公司