本文详解如何在 angular 中正确使用 `[innerhtml]` 渲染含 html 标签的字符串（如段落、换行、超链接），同时避免被 angular 默认的 dom 安全策略拦截，并说明为何直接绑定字符串无效、如何通过 `domsanitizer` 安全绕过、以及如何兼顾可读性与安全性。
在 Angular 中，[innerHTML] 是渲染动态 HTML 内容的常用方式，但它默认会拒绝未经信任的 HTML 字符串——这是 Angular 内置的 XSS 防护机制。当你直接写：
<div [innerHTML]="str"></div>
而 str 是一个普通字符串（如包含 <p>、<a> 的富文本），Angular 会将其视为“不安全内容”，自动清空或渲染为空白，并不会报错，也不会提示原因，这正是许多开发者困惑的根源。
✅ 正确做法是：使用 DomSanitizer 将 HTML 字符串显式标记为可信内容。需在组件中注入 DomSanitizer，并通过 bypassSecurityTrustHtml() 方法进行安全绕过：
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-rich-text',
template: `<div [innerHTML]="safeStr"></div>`
})
export class RichTextComponent implements OnInit {
str = '<p>Please ensure Process Model diagram represents Functions adequately (boxes that represent an activity or group of activities that produce an outcome):</p><p><br></p><p><a href="https://www.google.com" rel="noopener noreferrer" target="_blank">Click here</a></p>';
safeStr!: SafeHtml;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
this.safeStr = this.sanitizer.bypassSecurityTrustHtml(this.str);
}
}⚠️ 重要注意事项：
立即学习“前端免费学习笔记（深入）”；
- bypassSecurityTrustHtml() 仅应在你完全信任 HTML 源头时使用（例如：内容由后台管理端审核发布，或经严格白名单过滤）；
- 切勿对用户输入的原始 HTML 直接调用该方法，否则将导致 XSS 漏洞；
- 若目标是「纯文本提取」（即移除所有标签，只保留文字和链接地址），则不应使用 innerHTML，而应改用 DOM 解析或正则清理（如 new DOMParser().parseFromString(str, 'text/html') 提取 textContent）；
- 对于链接，确保保留 rel="noopener noreferrer" 和 target="_blank" 以防范反向 tab-nabbing 攻击——示例中已正确包含。
? 进阶建议：封装复用逻辑
可创建管道（Pipe）统一处理可信 HTML：
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(value: string): SafeHtml {
return value ? this.sanitizer.bypassSecurityTrustHtml(value) : '';
}
}模板中即可简洁使用：
<div [innerHTML]="str | safeHtml"></div>
总之，[innerHTML] 本身工作正常，问题本质在于 Angular 的安全默认策略；掌握 DomSanitizer 的正确用法，是安全、可控渲染富文本的关键一步。
