v-html渲染HTML内容详解

v-html 是 Vue 中用于直接插入原始 HTML 的指令，但它不自动转义、不解析插值和指令、不响应数据变化，本质等同于原生 innerHTML，因此若未经严格清洗就渲染用户输入，将导致严重的 XSS 安全漏洞；安全使用的唯一正解是在渲染前用专业库（如 DOMPurify）对 HTML 进行净化处理，绝不可裸传未过滤的用户内容——它不是“更强大的 v-text”，而是一把必须慎之又慎的双刃剑。

v-html 不能直接渲染用户输入的 HTML，它只做无差别插入——这意味着 XSS 风险完全由你兜底。

为什么 v-html 不会自动转义

Vue 设计上把「信任」交给你：它假设你传给 v-html 的内容是安全的、已过滤的 HTML 字符串。一旦你把用户提交的 content 直接塞进去， 就真会执行。

• 它底层等价于 element.innerHTML = value，不经过 Vue 模板编译器
• 不会解析其中的 {{ }} 插值、指令（如 v-if）、组件标签
• 不响应数据变化——改了绑定的变量，DOM 不会自动更新（除非重新赋值）

怎么安全地用 v-html

核心原则：渲染前必须清洗 HTML。别自己写正则去“删 script 标签”，不可靠。

• 服务端返回前就过滤：用 DOMPurify（前端）或 bleach（Python）、HtmlSanitizer（C#）等库处理
• 前端临时清洗示例：

  import DOMPurify from 'dompurify';
  const clean = DOMPurify.sanitize(dirtyHtml);
  // 再传给 v-html

• 绝对避免：v-html="userInput"、v-html="post.content" 这类裸用
• 如果只是需要换行转
，用 white-space: pre-line + v-text 更安全

v-html 和 v-text / {{ }} 的关键区别

三者根本不是替代关系，而是用途隔离：

• v-text 和 {{ }}：纯文本，自动转义所有 HTML 字符（< → <）
• v-html：原样插入，不转义、不编译、不响应、不校验
• 性能上 v-html 略快（跳过模板解析），但代价是责任全在你
• SSR 场景下，v-html 渲染的内容不会被服务端激活（hydration 不接管），可能造成水合不一致

真正难的从来不是怎么写 v-html，而是你怎么确认那段 HTML 真的没漏掉 这种边角攻击。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《v-html渲染HTML内容详解》文章吧，也可关注golang学习网公众号了解相关技术文章。