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

在 angular 中直接绑定 html 字符串到 `[innerhtml]` 会因默认安全策略被自动过滤；需通过 `domsanitizer` 显式信任内容，才能安全渲染富文本（如带链接的段落）。

Angular 默认对 [innerHTML] 绑定的内容执行严格的安全检查，任何包含

、 等标签的字符串都会被当作潜在 XSS 风险而原样转义显示（即显示为纯文本而非可渲染的 HTML），这正是你看到“HTML 没有生效”的根本原因——它不是“不工作”，而是被主动拦截了。

✅ 正确做法是：使用 DomSanitizer 的 bypassSecurityTrustHtml() 方法显式标记该字符串为“可信 HTML”，从而绕过 Angular 的默认清理机制：

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):


							

								
								

									GemDesign
									
AI高保真原型设计工具
								
								下载 
							
						
立即学习“前端免费学习笔记（深入）”；
Click here
';
  safeStr!: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

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

⚠️ 重要注意事项：

• bypassSecurityTrustHtml() 仅适用于你完全信任来源的 HTML 内容（例如内部配置、CMS 后台审核过的富文本）。若内容来自用户输入或外部 API，必须先进行 HTML 清洗（如使用 DOMPurify 库），再调用 bypassSecurityTrustHtml，否则将引入严重 XSS 漏洞。
• 不要滥用 bypassSecurityTrustXxx 系列方法（如 trustScript、trustUrl），它们会完全关闭 Angular 的安全防护。
• 若目标是纯文本提取（即移除所有 HTML 标签，只保留文字和链接地址），则不应使用 innerHTML，而应借助 DOM 解析或正则（如 str.replace(/]*>/g, '')），但注意正则处理 HTML 有局限性，推荐用 DOMParser 安全提取文本：

getTextOnly(html: string): string {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.body.textContent || '';
}

总结：[innerHTML] 本身工作正常，问题在于 Angular 的安全模型。信任 HTML 必须显式授权，且始终以安全性为前提——信任 ≠ 放行，而是可控、可审计、可追溯的信任。