Blazorise DataGrid 安全渲染 HTML 指南

在 Blazorise DataGrid中安全渲染HTML（如可点击链接）并非简单插入字符串即可实现，由于Blazor默认自动转义内容以防XSS攻击，直接绑定HTML字符串只会显示为纯文本；本文详解如何通过推荐的TemplateColumn方案——结合原生HTML标签与条件逻辑手动构建单元格内容——在保障绝对安全性的同时获得高度可控、易维护的渲染效果，并警示慎用MarkupString等替代方式，强调任何绕过转义的行为都必须建立在严格HTML清洗与可信数据源基础上，真正践行Blazor“安全优先、语义清晰、结构明确”的开发理念。

在 Blazorise DataGrid 中直接显示 HTML 字符串（如 链接）时，默认会进行 HTML 编码而无法渲染为真实元素；需通过 MarkupString 显式标记可信内容，才能实现安全、可控的 HTML 渲染。

在 Blazorise DataGrid 中直接显示 HTML 字符串（如 `` 链接）时，默认会进行 HTML 编码而无法渲染为真实元素；需通过 `MarkupString` 显式标记可信内容，才能实现安全、可控的 HTML 渲染。

Blazor 的默认行为是自动转义所有字符串输出，以防止 XSS 攻击。因此，即使你在数据模型中存储了 点击访问 这样的字符串，Blazorise DataGrid 也会将其作为纯文本显示，而非可点击的超链接。

要正确渲染 HTML，必须将该字符串显式转换为 Microsoft.AspNetCore.Components.MarkupString 类型——这是 Blazor 提供的“信任此内容为安全 HTML”的明确信号。

✅ 推荐方案：使用 TemplateColumn（推荐且灵活）

在 DataGrid 中避免依赖自动绑定 HTML 字段，而是使用 手动控制单元格内容：

<DataGrid TItem="Product" Data="@products">
    <DataGridColumns>
        <!-- 普通字段（安全） -->
        <DataGridColumn TItem="Product" Field="@nameof(Product.Name)" Caption="名称" />

        <!-- 自定义 HTML 渲染列 -->
        <DataGridTemplateColumn TItem="Product" Caption="操作链接">
            <DisplayTemplate>
                @if (context.Url is not null)
                {
                    <a href="@context.Url" target="_blank" class="btn btn-sm btn-primary">
                        @context.LinkText
                    </a>
                }
                else
                {
                    <span class="text-muted">无链接</span>
                }
            </DisplayTemplate>
        </DataGridTemplateColumn>
    </DataGridColumns>
</DataGrid>

对应的数据模型示例：

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public string Url { get; set; } = string.Empty;
    public string LinkText { get; set; } = "查看详情";
}

⚠️ 替代方案：在模型中预转换为 MarkupString（慎用）

若坚持在模型中直接暴露 HTML 字符串，可在属性中返回 MarkupString：

public class Product
{
    private readonly string _rawHtml;

    public Product(string rawHtml) => _rawHtml = rawHtml ?? "";

    public MarkupString HtmlLink => new(_rawHtml);
}

并在 DataGrid 中绑定：

<DataGridColumn TItem="Product" Field="@nameof(Product.HtmlLink)" Caption="HTML 链接" />

⚠️ 重要安全提醒：

• MarkupString 绕过 Blazor 的自动转义机制，若 rawHtml 来自用户输入、数据库或外部 API，必须先严格清洗/验证 HTML（例如使用 HtmlSanitizer 库），否则将导致严重的 XSS 漏洞。
• 不建议将未过滤的用户输入直接构造成 MarkupString。

? 小结

始终优先选择语义化、结构化的模板渲染方式——它更符合 Blazor 的设计哲学，也更利于团队协作与长期维护。

今天关于《Blazorise DataGrid 安全渲染 HTML 指南》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！