Vue中安全使用v-html渲染HTML方法

在 Vue 中使用 v-html 渲染原始 HTML 虽便捷却暗藏严重 XSS 风险，尤其当内容来自用户输入或未严格清洗的后端接口时；本文直击要害，明确指出应优先采用文本插值或组件化方案替代，若确需 v-html，则必须从前端（如 DOMPurify 净化）和后端（用 bleach、sanitize-html 等成熟库深度过滤）双管齐下构建防御体系，并推荐更安全的 JSON AST 渲染等现代替代方案，助你兼顾功能与安全。

Vue 中用 v-html 渲染原始 HTML，但直接插入有 XSS 风险，必须谨慎处理。

v-html 的基本用法

它会把绑定的字符串作为 HTML 解析并渲染，而不是普通文本：

• 写法：v-html="htmlContent"，其中 htmlContent 是一个包含 HTML 标签的字符串
• 不会转义内容，Hello 会被渲染成真实 span 元素，而非显示为文字
• 不能用于组件根元素，也不能和 v-model、v-if 等指令混用在同一个元素上

为什么不能随便用 v-html？

用户输入或后端返回的 HTML 若含恶意脚本（如 ），会被执行，造成安全漏洞。

• 常见风险来源：富文本编辑器内容、评论区、后台 CMS 输出的 HTML
• 即使用了 v-html，Vue 也不会自动过滤或沙箱化内容
• 服务端未做清洗 + 前端直接 v-html = 高危组合

安全使用的三个关键做法

不依赖“信任来源”，而是主动防御：

• 优先用纯文本或组件替代：比如用 {{ item.title }} 显示标题，用自定义 RichText 组件封装渲染逻辑
• 前端渲染前做简易白名单过滤：引入 DOMPurify，对 HTML 字符串净化后再绑定：
  const clean = DOMPurify.sanitize(dirtyHtml);
this.safeHtml = clean;
• 服务端必须做严格清洗：前端净化只是辅助，核心应在后端用成熟库（如 Python 的 bleach、Node 的 sanitize-html）过滤 script、onxxx 事件、javascript: 协议等

替代方案：更可控的渲染方式

多数场景其实不需要完整 HTML 支持：

• 仅需简单格式（加粗、换行、链接）：用 text.replace(/\*\*(.*?)\*\*/g, '$1') + v-html，限制标签范围
• 需要结构化内容：把富文本解析成 JSON AST（如 Markdown AST 或自定义 schema），用 Vue 组件递归渲染，完全规避 HTML 字符串
• 展示可信任的静态 HTML（如文档页）：可用 v-html，但仍建议用 DOMPurify 过一遍，防配置错误或模板注入

理论要掌握，实操不能落！以上关于《Vue中安全使用v-html渲染HTML方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！