Blazor 怎么安全地渲染 HTML 内容

Blazor 中安全渲染 HTML 的关键是仅对完全可信内容使用 MarkupString，对用户输入必须经服务端 HtmlSanitizer 净化后才可渲染，优先采用纯文本、Markdown 或代码高亮等更安全的替代方案。

Blazor 中安全地渲染 HTML 内容，核心是避免直接使用 @((MarkupString)html) 渲染不可信来源的字符串——这会绕过所有 XSS 防护，等同于执行任意脚本。

只对完全可信的内容使用 MarkupString

MarkupString 本身不做过滤或转义，它只是告诉 Blazor“这段字符串已由你（开发者）审核过，可以按 HTML 解析”。所以仅限以下情况使用：

• 硬 编码 的静态 HTML（如 @((MarkupString)"标题")）
• 服务端严格白名单过滤后返回的内容（例如 CMS 后台人工审核 + 服务端 HTML sanitizer 处理过的字段）
• 客户端生成的、不含用户输入的 HTML（如纯图标 SVG 字符串）

对用户输入内容必须先净化再渲染

来自表单、API、数据库的富文本（如用户评论、编辑器内容），绝不能直接转 MarkupString。推荐在服务端用成熟库净化：

• .NET 服务端：用 HtmlSanitizer（支持自定义白名单标签、属性、CSS、URI 协议）
• 示例（服务端 API）：
  

  var sanitizer = new HtmlSanitizer();
   sanitizer.AllowedTags.Add("p"); sanitizer.AllowedTags.Add("em");
   sanitizer.AllowedAttributes.Add("class");
   string cleanHtml = sanitizer.Sanitize(dirtyHtml); // 返回净化后字符串

• Blazor 组件中接收 cleanHtml 后，再用 @((MarkupString)cleanHtml)

优先考虑非 HTML 方案替代渲染

很多场景其实不需要真正渲染 HTML，更安全的做法是：

立即学习 “ 前端免费学习笔记（深入）”；

• 纯文本展示 → 用 @text（自动 HTML 编码）
• 有限格式（粗体 / 斜体 / 链接）→ 用 Markdown 解析器（如 MarkdownBlazor），它默认只输出安全 HTML
• 需要高亮代码 → 用

   + 客户端语法高亮库（如 highlight.js），内容作为 text 插入，不解析 HTML

禁用危险属性和事件处理（补充防护）

即使用了 HtmlSanitizer，也要确保 Blazor 渲染时不会激活危险行为：

• 确认净化配置禁用了 on* 事件属性（如 onclick）、javascript: 协议、data: URI 等
• 避免在组件中手动绑定 @onclick 到动态 HTML 元素（Blazor 不支持运行时绑定事件到 MarkupString 渲染的节点）
• 不要用 ElementReference + JS 互操作去操作未净化的 HTML 节点

基本上就这些。关键不是“怎么让 MarkupString 更安全”，而是“什么时候不该用 MarkupString”——把净化做在上游，把信任边界划清楚。