v-html怎么用_vue框架渲染html内容必看【方法】

v-html 不自动转义，直接插入 html 存在 xss 风险；它绕过 vue 编译，不解析插值、指令，也不响应数据变化；安全使用须前置清洗（如 dompurify），禁用裸传用户输入。

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

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

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

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

怎么安全地用 v-html

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

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

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

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

真正难的从来不是怎么写 v-html，而是你怎么确认那段 HTML 真的没漏掉 <img onerror="fetch('/steal?cookie='+document.cookie)" alt="v-html怎么用_vue框架渲染html内容必看【方法】" > 这种边角攻击。