Razor页面图标安全渲染技巧

本文深入剖析了在 ASP.NET Core Razor 页面中安全高效渲染动态图标的两大核心方案：针对 `@(...)` 表达式因默认 HTML 转义导致图标被当作纯文本显示的常见痛点，既揭示了使用 `@Html.Raw()` 的快捷解法（仅限可信静态内容），更力荐结构化 `@if/@else` 渲染——它彻底规避 XSS 风险、提升代码可读性与可维护性，并天然支持语义化属性（如 `aria-hidden`）、无障碍增强和未来功能扩展，真正将“写对代码”升维为“写好工程实践”。

本文详解在 ASP.NET Core Razor 页面中基于条件动态显示 Font Awesome 图标的方法，重点解决 `@(...)` 表达式默认 HTML 转义导致图标字符串被原样输出的问题，并提供 `@Html.Raw()` 和结构化条件渲染两种专业方案。

在 Razor 页面中，开发者常需根据业务状态（如健康检查结果）动态显示语义化图标（例如 ✅ 成功、❌ 失败）。但直接将含 HTML 标签的字符串赋值给变量并在内联表达式中使用（如 @(condition ? iconString : otherIcon)），会导致 Razor 默认对字符串进行 HTML 编码——浏览器将其作为纯文本渲染，而非解析为 DOM 元素，最终看到的是 的源码，而非实际图标。

✅ 正确方案一：使用 @Html.Raw()（谨慎适用）

若仍希望保留内联三元表达式风格，可借助 @Html.Raw() 绕过自动编码：

@{
    string successIcon = "<i class='fas fa-check-circle' style='color: #3fd421;'></i>";
    string failedIcon = "<i class='fas fa-times-circle' style='color: #e63737;'></i>";
}

<td class="lft">@Html.Raw(UserAccessHealth.Contains("Healthy") ? failedIcon : successIcon) UserAccess:</td>

⚠️ 注意事项：

• @Html.Raw() 会完全禁用 HTML 编码，若 successIcon 或 failedIcon 来源于用户输入或不可信数据，将引发 XSS 安全风险；
• 本例中图标字符串为硬编码常量，属安全场景，但应养成“仅对可信静态内容使用 Html.Raw”的习惯。

✅ 推荐方案二：结构化条件渲染（更清晰、更安全、更易维护）

直接在 Razor 中编写 @if/@else 块，将逻辑与标记分离，既避免转义问题，又提升可读性与可测试性：

@if (UserAccessHealth.Contains("Healthy"))
{
    <td class="lft"><i class="fas fa-times-circle" style="color: #e63737;"></i> UserAccess:</td>
}
else
{
    <td class="lft"><i class="fas fa-check-circle" style="color: #3fd421;"></i> UserAccess:</td>
}

✅ 优势说明：

• 零安全风险：所有 HTML 标签均为 Razor 模板原生语法，无动态拼接；
• 高可维护性：图标样式、类名、文字内容均可独立调整，无需字符串操作；
• 便于扩展：后续如需添加 tooltip、aria-label 或点击事件，可直接在 标签内补充属性，逻辑清晰；
• 符合语义化最佳实践：推荐为图标添加 aria-hidden="true"（若仅为装饰）或完整 role/aria-label（若承载关键信息），例如：

  <i class="fas fa-check-circle" style="color: #3fd421;" aria-hidden="true"></i>

? 总结建议

始终优先选择 Razor 原生控制结构而非字符串拼接 HTML —— 这不仅是解决转义问题的技术选择，更是构建健壮、可维护前端模板的工程实践。

理论要掌握，实操不能落！以上关于《Razor页面图标安全渲染技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！