Blazor 怎么安全地渲染 HTML 内容

来源:这里教程网 时间:2026-02-21 17:35:53 作者:

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;">&lt;code&gt;&lt;/code&gt; + 客户端语法高亮库(如 highlight.&lt;a style=&quot;color:#f60; text-decoration:underline;&quot; title=&quot;js&quot; href=&quot;https://www.php.cn/zt/15802.html&quot; target=&quot;_blank&quot;&gt;js&lt;/a&gt;),内容作为 text 插入,不解析 HTML</pre>

禁用危险属性和事件处理(补充防护)

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

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

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

相关推荐