Angular 中安全渲染 HTML 字符串的完整操作步骤

在 Angular 中，[innerHTML] 默认会转义 HTML 标签以防止 XSS 攻击，因此数据库中存储的 <strong>not</strong> 会被原样显示。需通过 DomSanitizer 的 bypassSecurityTrustHtml() 显式标记为可信内容才能正确渲染。

在 Angular 中，`[innerHTML]` 默认会转义 HTML 标签以防止 XSS 攻击，因此数据库中存储的 `not` 会被原样显示。需通过 `DomSanitizer` 的 `bypassSecurityTrustHtml()` 显式标记为可信内容才能正确渲染。

在 Angular 应用中，动态渲染富文本（如从数据库读取含 <strong>、<u> 等标签的字符串）是一个常见需求，但直接绑定 [innerHTML]="control.label" 并不会解析 HTML —— 这是 Angular 的默认安全策略：所有未显式声明为“可信”的 HTML 字符串都会被自动转义，避免跨站脚本（XSS）风险。

要安全地启用 HTML 渲染，必须使用 DomSanitizer 服务对原始字符串进行显式信任标记。注意：bypassSecurityTrustHtml() 并非“绕过安全”，而是将责任明确移交开发者——你必须确保该 HTML 来源可信（例如已过滤或白名单校验），否则仍存在安全隐患。

正确实现步骤如下：

1. 注入 DomSanitizer

   在组件中导入并注入服务：

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

2. 模板中绑定可信 HTML

   使用 safeHtml 变量绑定到 [innerHTML]：

   <div [innerHTML]="safeHtml"></div><!-- 渲染效果：This is <strong>not</strong> a problem — and <u>underlined</u> too! -->

重要注意事项：

1. ❌ 不要对用户直接提交的富文本（如评论框输入）盲目调用 bypassSecurityTrustHtml()；
2. ✅ 建议结合后端清洗（如使用 DOMPurify 或服务端 HTML 白名单过滤）或前端轻量校验（仅允许 <strong>、<em>、<u> 等无害标签）；
3. ? 若 control.label 可能异步更新（如响应式表单或 HTTP 请求后变更），请在值变更时重新调用 bypassSecurityTrustHtml()，避免陈旧的 SafeHtml 缓存；
4. ? 对于更复杂的场景（如需支持内联样式、自定义属性），可考虑封装一个管道（Pipe）或工具方法，但需严格限制允许的标签与属性。

总结：Angular 的 HTML 渲染安全机制是保护性设计，而非限制性障碍。合理使用 DomSanitizer 并辅以内容校验，即可在保障安全的前提下，灵活支持动态富文本展示。