v-html 直接渲染原始 HTML 易引发 XSS，须谨慎使用；应优先用文本插值或组件替代，前端用 DOMPurify 净化，后端严格清洗，必要时转为 JSON AST 渲染。
Vue 中用 v-html 渲染原始 HTML，但直接插入有 XSS 风险，必须谨慎处理。
v-html 的基本用法
它会把绑定的字符串作为 HTML 解析并渲染，而不是普通文本：
- 写法：
v-html="htmlContent"，其中htmlContent是一个包含 HTML 标签的字符串 - 不会转义内容，
Hello会被渲染成真实 span 元素，而非显示为文字 - 不能用于组件根元素，也不能和
v-model、v-if等指令混用在同一个元素上
为什么不能随便用 v-html？
用户输入或后端返回的 HTML 若含恶意脚本（如 <script>alert('xss')</script>），会被执行，造成安全漏洞。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 常见风险来源：富文本编辑器内容、评论区、后台 CMS 输出的 HTML
- 即使用了
v-html，Vue 也不会自动过滤或沙箱化内容 - 服务端未做清洗 + 前端直接
v-html= 高危组合
安全使用的三个关键做法
不依赖“信任来源”，而是主动防御：
-
优先用纯文本或组件替代：比如用
{{ item.title }}显示标题，用自定义RichText组件封装渲染逻辑 -
前端渲染前做简易白名单过滤：引入 DOMPurify，对 HTML 字符串净化后再绑定：
const clean = DOMPurify.sanitize(dirtyHtml);<br> 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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
