如何在 Angular 中安全地渲染数据库中的 HTML 内容

Angular 默认会转义 innerHTML 绑定的字符串以防止 XSS 攻击，因此直接插入含 <strong> 等标签的数据库文本会导致标签被原样显示；需通过 DomSanitizer 显式标记为可信 HTML 才能正确解析渲染。

Angular 默认会转义 `innerHTML` 绑定的字符串以防止 XSS 攻击，因此直接插入含 `` 等标签的数据库文本会导致标签被原样显示；需通过 `DomSanitizer` 显式标记为可信 HTML 才能正确解析渲染。

在 Angular 应用中，当动态内容（如从 MSSQL 数据库读取的 control.label）包含内联 HTML 标签（例如 <strong>not</strong> 或 <u>not</u>）时，仅使用 [innerHTML]="control.label" 是不够的——Angular 的内置 DOM sanitizer 会自动剥离或转义这些标签，将其作为纯文本输出，从而导致样式失效。

✅ 正确做法是借助 DomSanitizer 的 bypassSecurityTrustHtml() 方法，将原始字符串显式声明为“已审查、可信任的 HTML”：

import { Component, OnInit } from '@angular/core';import { DomSanitizer, SafeHtml } from '@angular/platform-browser';@Component({selector: 'app-dynamic-label',templateUrl: './dynamic-label.component.html'})export class DynamicLabelComponent implements OnInit {control = { label: 'This is <strong>not</strong> a problem — it is <u>critical</u>!' };safeHtml: SafeHtml;constructor(private sanitizer: DomSanitizer) {}ngOnInit() {this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.control.label);}}

对应模板中使用：

<div [innerHTML]="safeHtml"></div>

注意事项：

1. bypassSecurityTrustHtml()绕过 Angular 的安全检查，仅应在你完全信任数据来源（如受控后台、已过滤/转义的数据库字段）时使用；
2. 切勿对用户直输内容（如评论、表单输入）直接调用该方法，否则将引入 XSS 风险；
3. 若需兼顾安全性与富文本支持，建议在服务端对 HTML 进行白名单过滤（如仅允许 <strong>, <em>, <u>），再传入前端；
4. 不推荐在模板中调用 sanitizer 方法（如 [innerHTML]="sanitizer.bypassSecurityTrustHtml(control.label)"），因其违反单向数据流原则且无法触发变更检测。

总结：[innerHTML] 本身是安全的，但“安全”的代价是牺牲动态 HTML 解析能力；DomSanitizer 提供了可控的“出口”，让开发者在明确风险边界的前提下，精准释放 HTML 渲染能力——这是 Angular 安全模型的设计哲学，而非缺陷。