v-html 直接渲染原始 HTML 易引发 XSS，须谨慎使用；应优先用文本插值或组件替代，前端用 DOMPurify 净化，后端严格清洗，必要时转为 JSON AST 渲染。

Vue 中用 v-html 渲染原始 HTML，但直接插入有 XSS 风险，必须谨慎处理。

v-html 的基本用法

它会把绑定的字符串作为 HTML 解析并渲染，而不是普通文本：

• 写法：v-html="htmlContent"，其中 htmlContent 是一个包含 HTML 标签的字符串
• 不会转义内容，<span>Hello</span> 会被渲染成真实 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, '<strong>$1</strong>') + v-html，限制标签范围
• 需要结构化内容：把富文本解析成 JSON AST（如 Markdown AST 或自定义 schema），用 Vue 组件递归渲染，完全规避 HTML 字符串
• 展示可信任的静态 HTML（如文档页）：可用 v-html，但仍建议用 DOMPurify 过一遍，防配置错误或模板注入