Blazor MarkupString 的正确使用方法

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

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

只用于可信的静态 HTML 片段

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

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

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

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

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

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

Blazor 在解析 MarkupString 时会自动补全或关闭不合法的 HTML 标签（如 <p>hello </p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/xiazai/code/10807"> <img src="https://img.php.cn/upload/webcode/000/000/016/176381100671596.jpg" alt="非常淘 淘宝客源码"> </a> <div class="aritcle_card_info"> <a href="/xiazai/code/10807">非常淘 淘宝客源码</a> <p>本源码是我用过最好的淘客站源码。对于新站长很用帮助。重要!!注意上传完程序后要先登陆后台修改域名，否则会跳转到后台已设置的域名。 使用方法1:将文件夹里面的文件上传至您的空间根目录(不要在本地测试，本地测试期间功能将被限制，首页模板显示不正常!)2:访问网址http://您的网址/admin 账号:admin 密码:admin3:填写您基本网站信息,以及重要的淘客相关信息 声明：本程序使用权是本人</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="非常淘 淘宝客源码"> <span>0</span> </div> </div> <a href="/xiazai/code/10807" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="非常淘 淘宝客源码"> </a> </div> <div>world），这是为了保证 DOM 结构有效。如果你需要保留原始未闭合结构（比如嵌入代码块、XML 片段），不能靠 MarkupString 直接硬塞。 <ul> <li>✅ 用 <code> 包裹尖括号内容（仅适用于 XML/XHTML 上下文，且需确保父容器支持）

替代方案比硬刚 MarkupString 更常用

多数场景下，与其折腾 MarkupString，不如用更 Blazor-native 的方式：

• 动态生成结构？用 <text></text> 或条件块：@foreach (var item in list) { <div>@item.Name</div> }
• 需要局部 HTML 插入？封装成子组件，用 RenderFragment 参数接收内容
• 要渲染带样式的文本？考虑用 CSS 类 + 纯文本 + white-space: pre-wrap 保留换行缩进

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

以上就是Blazor MarkupString 的正确使用方法的详细内容，更多请关注其它相关文章！