在 Angular 中，innerHTML 默认会转义 HTML 标签以防止 XSS 攻击，因此数据库中存储的 not 会被原样显示。需借助 DomSanitizer 的 bypassSecurityTrustHtml() 显式标记内容为可信 HTML，才能正确解析并渲染富文本。
在 angular 中，`innerhtml` 默认会转义 html 标签以防止 xss 攻击，因此数据库中存储的 `not` 会被原样显示。需借助 `domsanitizer` 的 `bypasssecuritytrusthtml()` 显式标记内容为可信 html，才能正确解析并渲染富文本。
Angular 的模板绑定机制默认对 innerHTML 进行严格的安全检查：任何包含 HTML 标签的字符串（如 control.label = "This is <strong>not</strong> a problem"）都会被自动转义为纯文本，从而避免潜在的跨站脚本（XSS）风险。这种保护机制虽安全，但在需要动态渲染受信富文本（如 CMS 内容、配置化标签文案）时，必须显式“绕过”该检查。
✅ 正确做法是使用 DomSanitizer 提供的 bypassSecurityTrustHtml() 方法：
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: 'Blah blah blah <strong>not</strong> blah blah blah' };
safeHtml: SafeHtml;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
// 将原始 HTML 字符串标记为可信内容
this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.control.label);
}
}
对应模板中直接绑定：
<div></div>
⚠️ 重要注意事项：
-
仅对完全可信的内容调用
bypassSecurityTrustHtml()—— 若control.label来自用户输入或未严格校验的外部源，绕过校验将导致严重 XSS 漏洞； - 推荐在服务层或数据获取后统一处理 HTML 安全性，而非在每个组件中重复调用；
- 如需更精细控制（例如仅允许
<strong></strong>和<u></u>），应结合DOMPurify等库预清洗 HTML，再交由bypassSecurityTrustHtml()标记； - 不要滥用
bypassSecurityTrustHtml()替代语义化组件设计——若仅需高亮关键词，优先考虑用ngClass+ CSS 或结构化数据（如{ text: 'not', style: 'bold-underline' }）驱动渲染，更安全、更可维护。
总之，DomSanitizer 是 Angular 提供的“安全闸门”，而 bypassSecurityTrustHtml() 是开启它的钥匙——关键在于你是否真正确认了门后的 HTML 值得信赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
