Vue.js 模板注入导致XSS漏洞

Question

在使用 Vue.js 开发应用时，若动态渲染用户输入的内容到模板中（如通过 `{{ userInput }}`），是否存在模板注入导致XSS的风险？特别是在未正确转义或过滤恶意脚本的情况下，Vue 是否能自动防御此类攻击？结合 Vue 的插值机制与模板编译原理，分析其在服务端渲染（SSR）和客户端渲染（CSR）场景下，如何因不当使用 `v-html` 或运行时模板编译而引发XSS漏洞？

Answer 1

1. Vue.js 插值机制与 XSS 风险的初步理解

在 Vue.js 中，双大括号语法 {{ userInput }} 是最常见的数据绑定方式。Vue 默认会对插值内容进行 HTML 转义，这意味着如果用户输入包含如 <script>alert(1)</script> 的脚本，Vue 会将其作为纯文本渲染，而非执行。

这一机制基于 Vue 的响应式系统和模板编译流程，在编译阶段将插值表达式转换为安全的文本节点插入 DOM。因此，在标准客户端渲染（CSR）场景下，仅使用 {{ }} 并不会直接导致 XSS 漏洞。

然而，这种“自动防御”仅限于插值表达式本身，并不覆盖所有动态内容渲染场景。

2. v-html 的使用与潜在风险分析

当开发者需要渲染富文本内容时，常使用 v-html 指令。该指令会将数据作为原始 HTML 插入到元素中，绕过 Vue 的转义机制。

示例如下：

<div v-html="userInput"></div>
// 若 userInput = '<img src=x onerror=alert(1)>'，则会触发 JS 执行

此时，若未对 userInput 进行严格的过滤或净化（sanitization），攻击者可注入恶意脚本，造成反射型或存储型 XSS。

常见漏洞场景包括：

• 评论系统中允许 HTML 格式但未过滤事件属性
• 富文本编辑器输出未经处理的内容
• 后端接口返回带标签的描述字段直接用 v-html 渲染

3. Vue 模板编译原理与运行时模板的风险

Vue 应用在构建时通常采用预编译模板（template-to-render-function），但在某些情况下会启用运行时编译，例如：

场景	是否启用运行时编译	XSS 风险等级
字符串模板（如 el: '#app', template: '...'）	是	高
JSX 或 render 函数	否	低
从服务器加载模板字符串	是	极高

若攻击者能控制模板字符串内容（如通过 API 返回动态模板），则可能注入恶意指令，例如：

template: '<div @click="maliciousCode()">Click me</div>'

在运行时编译模式下，Vue 会解析并绑定此事件，导致任意代码执行。

4. 服务端渲染（SSR）中的 XSS 攻击路径

在 SSR 场景中，Vue 应用在服务器端生成 HTML 字符串并发送给客户端。虽然插值仍会被转义，但以下情况可能导致漏洞：

1. 使用 renderToString 渲染包含 v-html 的组件，且内容来自用户输入
2. 通过 dangerouslySetInnerHTML 类似机制拼接 HTML
3. 状态脱水（hydration）时未校验客户端数据一致性

流程图展示 SSR 中 XSS 可能传播路径：

graph TD
    A[用户提交恶意HTML] --> B[后端存储]
    B --> C[Vue SSR 渲染组件]
    C --> D[v-html 渲染未净化内容]
    D --> E[生成含脚本的HTML响应]
    E --> F[浏览器执行脚本]
  

5. 安全防护策略与最佳实践

为防止因不当使用 Vue 特性导致 XSS，建议采取以下措施：

• 避免使用 v-html：除非必要，优先使用文本插值或 CSS 样式模拟富文本
• 输入净化：使用 DOMPurify 等库对需渲染的 HTML 内容进行 sanitization
• 禁用运行时模板编译：生产环境使用只含 runtime 的构建版本
• CSP 策略部署：设置 Content Security Policy 限制内联脚本执行
• 服务端验证：对所有用户输入进行白名单过滤，尤其在 SSR 上下文中

示例代码：使用 DOMPurify 净化内容

import DOMPurify from 'dompurify';

export default {
  computed: {
    cleanHTML() {
      return DOMPurify.sanitize(this.userInput);
    }
  }
}
// 在模板中使用 :v-html="cleanHTML"