本文详解如何在 angular 中正确使用 `[innerhtml]` 渲染含 html 标签的字符串（如段落、换行、超链接），同时避免被 angular 默认的 dom 安全策略拦截，并说明为何直接绑定字符串无效、如何通过 `domsanitizer` 安全绕过、以及如何兼顾可读性与安全性。
在 Angular 中，[innerHTML] 是渲染动态 HTML 内容的常用方式，但它默认会拒绝未经信任的 HTML 字符串——这是 Angular 内置的 XSS 防护机制。当你直接写：
<div [innerHTML]="str"></div>
而 str 是一个普通字符串（如包含
、 的富文本），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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9392" title="Work Productivity Gog Google Workflow Helper"><img
src="https://img.php.cn/upload/skill/000/000/081/179257869783808.jpg" alt="Work Productivity Gog Google Workflow Helper" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9392" title="Work Productivity Gog Google Workflow Helper">Work Productivity Gog Google Workflow Helper</a>
<p>帮助用户满足已验证的需求：代理用户在Clawhub上对Gog式工作流有强烈需求，需要实际帮助修复bug、强化设置等。</p>
</div>
<a href="/xiazai/skill9392" title="Work Productivity Gog Google Workflow Helper" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><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 的正确用法，是安全、可控渲染富文本的关键一步。
