Blazor MarkupString 的正确使用方法

畫卷琴夢 2025-12-13 00:00:00 次阅读

MarkupString 的核心作用是安全地渲染 HTML 字符串，仅适用于可信静态 HTML 片段，不支持 Razor 语法、事件绑定或组件标签，且会自动修正非法标签；误用可能导致 XSS 或功能失效。

MarkupString 的核心作用是**安全地渲染 HTML 字符串**，但它不是万能的“HTML 注入开关”。用错地方或忽略限制，轻则标签被自动修正、事件失效，重则内容不显示或引发 XSS 风险。关键不在“怎么写”，而在“什么时候该用、怎么配得上它”。

只用于可信的静态 HTML 片段

MarkupString 适合渲染你完全控制来源的 HTML，比如后台配置的富文本、预编译的提示文案、或读取自 wwwroot 下的 .html 文件（Blazor Server）。

✅ 推荐：从本地文件读取并渲染（Server 端）：@((MarkupString)HtmlContent)，前提是路径已校验、内容无用户输入
✅ 推荐：拼接简单结构化标签，如 @((MarkupString)$"{title}")
❌ 避免：直接渲染用户提交的评论、富文本编辑器输出（未净化）——这会绕过 Blazor 的默认 HTML 转义，造成 XSS

别指望它执行 JS 或绑定事件

MarkupString 渲染的是纯 HTML DOM 节点，不会解析 Razor 语法，也不会激活 @onclick、@bind 或组件标签。你在字符串里写的 @onclick="HandleClick" 或全部当普通文本处理。

❌ 错误示例：var html = ""; @(new MarkupString(html)) → 按钮显示但点击无响应
✅ 替代方案：用原生 HTML + JS 互操作（需额外注册）、或改用条件渲染（@if(showBtn) { }）

标签不闭合？不是 bug，是设计行为

Blazor 在解析 MarkupString 时会自动补全或关闭不合法的 HTML 标签（如

hello


world），这是为了保证 DOM 结构有效。如果你需要保留原始未闭合结构（比如嵌入代码块、XML 片段），不能靠 MarkupString 直接硬塞。

✅ 用  包裹尖括号内容（仅适用于 XML/XHTML 上下文，且需确保父容器支持）
  ✅ 改用 HtmlString（注意：.NET 6+ 中 HtmlString 已被标记为过时，推荐用 MarkupString + 手动确保格式合法）
  ✅ 对含  > 的纯文本，优先转义：zuojiankuohaophpcndivyoujiankuohaophpcn，而非依赖 MarkupString 去“猜”你的意图


替代方案比硬刚 MarkupString 更常用
多数场景下，与其折腾 MarkupString，不如用更 Blazor-native 的方式：

动态生成结构？用  或条件块：@foreach (var item in list) { @item.Name }

  需要局部 HTML 插入？封装成子组件，用 RenderFragment 参数接收内容
  要渲染带样式的文本？考虑用 CSS 类 + 纯文本 + white-space: pre-wrap 保留换行缩进

基本上就这些。MarkupString 是个工具，不是银弹。用对了省事，用错了反而添乱。