v-text与v-html区别，防范XSS攻击实战

v-text 和 v-html 看似都是向页面插入内容的指令，实则安全边界天壤之别：v-text 严格将数据视为纯文本，自动转义 HTML 字符，彻底阻断 XSS 攻击；而 v-html 会直接解析并执行 HTML，一旦用于不可信数据，恶意脚本将毫无阻碍地运行——选错一个指令，就可能让整个应用暴露在攻击之下。

v-text 和 v-html 表面都是往标签里塞内容，但本质完全不同：一个只认字，一个真跑 HTML。用错就可能让恶意脚本直接执行。

v-text：安全输出纯文本

它把绑定的数据当普通字符串处理，等价于原生 DOM 的 textContent。哪怕你传的是 ，页面上就真的只显示这串字符，不解析、不执行、不渲染成按钮或弹窗。

• 自动转义所有 HTML 特殊字符（如 < → <），天然防 XSS
• 会清空元素内原有全部内容——包括子节点、空格、注释
• 比双大括号 {{ }} 更稳定，不会在 Vue 初始化前闪出未编译的 {{ message }}
• 适合用户名、状态提示、评论摘要等无需格式的字段

v-html：解析并执行 HTML

它把数据当真实 HTML 代码来处理，等价于原生 DOM 的 innerHTML。传入

公告

• 完全不转义，任何标签、属性、事件处理器都会被解析执行
• 同样覆盖整个元素内容，不留余地
• 只适用于后端 CMS 返回的、经过严格净化的富文本（比如文章正文、系统公告）
• 绝不能用于用户可输入的内容（如个人简介、评论框、搜索关键词）

新手防 XSS 的关键操作

不是“少用 v-html”，而是“该用时更谨慎 + 有兜底”：

• 默认选 v-text 或 {{ }}；只有明确需要保留样式/结构，且确认内容 100% 可信，才考虑 v-html
• 必须用 v-html 时，前端做简单白名单过滤（例如只允许

  等基础标签）

• 后端返回富文本前，必须服务端净化（推荐使用 DOMPurify 或类似库）
• 开发阶段别依赖 Vue 生产模式“隐藏警告”——它不拦 XSS，只是关掉控制台提示

一句话判断逻辑