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 标签”，不可靠。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 服务端返回前就过滤：用 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 字符（<→） -
v-html：原样插入，不转义、不编译、不响应、不校验 - 性能上
v-html略快（跳过模板解析），但代价是责任全在你 - SSR 场景下，
v-html渲染的内容不会被服务端激活（hydration 不接管），可能造成水合不一致
真正难的从来不是怎么写 v-html，而是你怎么确认那段 HTML 真的没漏掉 <img onerror="fetch('/steal?cookie='+document.cookie)"> 这种边角攻击。
