在 Angular 中，[innerHTML] 默认会自动转义 HTML 字符以防止 XSS 攻击，因此数据库中存储的 not 等标签会被原样显示而非解析为样式。需借助 DomSanitizer 的 bypassSecurityTrustHtml() 显式标记内容为可信 HTML 才能正确渲染。
在 angular 中，`[innerhtml]` 默认会自动转义 html 字符以防止 xss 攻击，因此数据库中存储的 `not` 等标签会被原样显示而非解析为样式。需借助 `domsanitizer` 的 `bypasssecuritytrusthtml()` 显式标记内容为可信 html 才能正确渲染。
Angular 的设计原则是默认安全优先：所有绑定到 [innerHTML] 的字符串都会被 DomSanitizer 自动净化（sanitized），移除或转义潜在危险标签（如 <script></script>、<iframe></iframe>）及属性（如 onclick）。即使你只希望渲染简单的 <strong></strong> 或 <u></u> 标签，Angular 也不会例外处理——这是有意为之的安全机制。
✅ 正确做法：使用 DomSanitizer 主动信任 HTML 内容
你需要在组件中注入 DomSanitizer，调用 bypassSecurityTrustHtml() 将原始字符串转换为 SafeHtml 类型，再绑定到模板：
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 {
safeLabel: SafeHtml;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
// 假设 control.label 来自后端，值为：'Please do <strong>not</strong> proceed without approval.'
this.safeLabel = this.sanitizer.bypassSecurityTrustHtml(this.control.label);
}
}对应模板中使用：
<div [innerHTML]="safeLabel"></div>
⚠️ 重要注意事项：
-
仅对可信来源使用
bypassSecurityTrustHtml()：该方法绕过 Angular 的安全检查，若control.label来自用户输入或未严格过滤的第三方数据，将导致 XSS 漏洞。务必确保数据库内容由可信业务逻辑生成（如 CMS 后台人工编辑或服务端白名单过滤）。 -
避免在模板中直接调用
sanitizer：不可写作<div></div>—— 这会在每次变更检测时重复创建SafeHtml对象，影响性能且可能触发 ExpressionChangedAfterItHasBeenCheckedError。 -
替代方案更安全（推荐用于复杂场景）：若需支持更多格式（如链接、列表），建议使用轻量级 HTML 解析库（如
DOMPurify）预处理字符串，再交由bypassSecurityTrustHtml()渲染，实现“净化 + 信任”双重保障。
总结：[innerHTML] 不是“禁用转义”的快捷方式，而是受控的富文本渲染入口。正确配合 DomSanitizer，既可满足动态样式需求，又能坚守 Angular 的安全边界。
立即学习“前端免费学习笔记（深入）”；
