Blazor 中安全地渲染 HTML 内容,核心是避免直接使用
@((MarkupString)html)渲染不可信来源的字符串——这会绕过所有 XSS 防护,等同于执行任意脚本。
只对完全可信的内容使用 MarkupString
MarkupString 本身不做过滤或转义,它只是告诉 Blazor “这段字符串已由你(开发者)审核过,可以按 HTML 解析”。所以仅限以下情况使用:
硬编码的静态 HTML(如@((MarkupString)"<strong>标题</strong>")) 服务端严格白名单过滤后返回的内容(例如 CMS 后台人工审核+服务端 HTML sanitizer 处理过的字段) 客户端生成的、不含用户输入的 HTML(如纯图标 SVG 字符串)
对用户输入内容必须先净化再渲染
来自表单、API、数据库的富文本(如用户评论、编辑器内容),绝不能直接转 MarkupString。推荐在服务端用成熟库净化:
.NET 服务端:用 HtmlSanitizer(支持自定义白名单标签、属性、CSS、URI 协议) 示例(服务端 API):var sanitizer = new HtmlSanitizer();<br>
sanitizer.AllowedTags.Add("p"); sanitizer.AllowedTags.Add("em");<br>
sanitizer.AllowedAttributes.Add("class");<br>
string cleanHtml = sanitizer.Sanitize(dirtyHtml); // 返回净化后字符串
Blazor 组件中接收 cleanHtml 后,再用 @((MarkupString)cleanHtml)
优先考虑非 HTML 方案替代渲染
很多场景其实不需要真正渲染 HTML,更安全的做法是:
立即学习“前端免费学习笔记(深入)”;
纯文本展示 → 用@text(自动 HTML 编码) 有限格式(粗体/斜体/链接)→ 用 Markdown 解析器(如 MarkdownBlazor),它默认只输出安全 HTML 需要高亮代码 → 用
<pre class="brush:php;toolbar:false;"><code></code> + 客户端语法高亮库(如 highlight.<a style="color:#f60; text-decoration:underline;" title="js" href="https://www.php.cn/zt/15802.html" target="_blank">js</a>),内容作为 text 插入,不解析 HTML</pre>
禁用危险属性和事件处理(补充防护)
即使用了 HtmlSanitizer,也要确保 Blazor 渲染时不会激活危险行为:
确认净化配置禁用了on*事件属性(如
onclick)、
javascript:协议、
data:URI 等 避免在组件中手动绑定
@onclick到动态 HTML 元素(Blazor 不支持运行时绑定事件到 MarkupString 渲染的节点) 不要用
ElementReference+ JS 互操作去操作未净化的 HTML 节点
基本上就这些。关键不是“怎么让 MarkupString 更安全”,而是“什么时候不该用 MarkupString”——把净化做在上游,把信任边界划清楚。
