Angular 中使用 innerHTML 安全渲染富文本的正确方式

本文详解如何在 angular 中安全地渲染含 html 标签（如 `

`、``）的字符串，避免内容被转义或拦截，并说明为何直接绑定 `[innerhtml]` 无效及 `domsanitizer` 的必要性。

Angular 默认会对绑定到 [innerHTML] 的字符串进行自动转义和拦截，这是其内置的安全机制——防止 XSS（跨站脚本攻击）。因此，即使你传入的是合法 HTML 字符串（如含

和 标签），Angular 也会将其作为纯文本渲染，或直接忽略未授权的 HTML 结构，导致“看似不工作”。

✅ 正确做法是：显式信任该 HTML 内容，通过 DomSanitizer 的 bypassSecurityTrustHtml() 方法标记为“已审核、可安全渲染”。

✅ 步骤示例

1. 注入 DomSanitizer
   在组件构造函数中注入服务：

   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
   ';
     safeStr!: SafeHtml;
   
     constructor(private sanitizer: DomSanitizer) {}
   
     ngOnInit() {
       this.safeStr = this.sanitizer.bypassSecurityTrustHtml(this.str);
     }
   }

2. 模板中直接绑定

   ✅ 渲染后将正确显示段落、换行及可点击的超链接。

⚠️ 重要注意事项：

• bypassSecurityTrustHtml() 仅适用于你完全信任来源的内容（如 CMS 后台审核过的富文本、内部配置项）。若内容来自用户输入或外部 API，必须先做 HTML 清洗（如使用 DOMPurify 库过滤危险标签/属性），再调用 bypassSecurityTrustHtml。
• 不要滥用 bypassSecurityTrust* 系列方法——绕过安全检查等于主动放弃 Angular 的 XSS 防护层。
• 若目标是纯文本展示（去除所有 HTML），应使用 textContent 或 innerText，或借助 DOMParser + textContent 提取文字（而非依赖 innerHTML）。

? 小结：[innerHTML] “不工作”不是 Bug，而是 Angular 的安全默认行为；DomSanitizer 是官方提供的、可控的“放行通道”，关键在于理解信任边界与风险权衡。