Vue.js 下的跨站脚本攻击(XSS)防护指南

1. Vue.js 数据绑定与XSS风险

1.1 安全的数据绑定方式

Vue.js 提供了两种安全的数据绑定方式：

• 双大括号插值 {{}}
• v-text 指令

这两种方式的底层实现都是通过元素的 textContent 属性进行数据插入，浏览器原生API会自动处理这些值，防止XSS攻击。

示例模板：

<p v-text="message"></p>
<!-- 或 -->
<p>{{message}}</p>

编译后的代码：

function anonymous() {
  with(this) {
    return _c('p', { domProps: { "textContent": _s(message) } })
  }
}

1.2 危险的v-html指令

当需要插入富文本内容时，开发者可能会使用 v-html 指令，这会带来XSS风险。

示例模板：

<p v-html="message"></p>

编译后的代码：

function anonymous() {
  with(this) {
    return _c('p', { domProps: { "innerHTML": _s(message) } })
  }
}

安全建议：

• 尽量避免使用 v-html
• 必须使用时，确保对数据进行严格的过滤和净化
• 考虑使用专门的HTML净化库（如DOMPurify）

2. 标签属性绑定的XSS风险

2.1 常规属性绑定

Vue中使用 v-bind 进行属性绑定，通常也是安全的：

示例模板：

<a v-bind:href="url"></a>

编译后的代码：

function anonymous() {
  with(this) {
    return _c('a', { attrs: { "href": url } })
  }
}

2.2 危险属性列表

某些属性的绑定需要特别注意，即使使用 v-bind 也可能导致XSS：

2.3 防护措施

• 对URI类属性（href、src、data、action）进行严格验证：
  • 限制协议为 http:// 或 https://
  • 验证URL指向可信的资源服务器
• 避免用户输入直接绑定到style属性
• 使用白名单机制验证属性值

3. 服务端模板渲染XSS

3.1 模板注入原理

当使用服务端渲染(SSR)时，如果用户输入被直接放入模板中作为模板的一部分解析，可能导致模板注入。

测试方法：输入 {{ 2+2 }}，如果返回4则存在漏洞。

3.2 攻击原理

利用JavaScript的原型特性构造恶意代码：

toString.constructor("alert(1)")();

3.3 常见payload

{{constructor.constructor('alert(1)')()}}
{{_c.constructor('alert(1)')()}}
{{$on.constructor('alert(1)')()}}

3.4 防护措施

• 使用 v-pre 指令跳过用户输入的模板编译：

  <div v-pre>{{ userInput }}</div>
  

• 对用户输入进行HTML实体编码
• 避免将用户输入直接插入模板

4. 其他安全建议

1. 内容安全策略(CSP)：实施严格的CSP策略限制脚本执行
2. 输入验证：对所有用户输入进行严格验证
3. 输出编码：根据上下文对输出进行适当的编码
4. 使用安全库：如DOMPurify处理HTML净化
5. 保持更新：及时更新Vue.js及相关依赖

5. 参考资源

1. Vue.js 官方指令文档
2. Vue 模板浏览器
3. XSS Cheat Sheet
4. 利用Vue.js脚本小工具绕过防御

通过理解这些风险点并实施相应的防护措施，可以显著提高Vue.js应用的安全性，有效防范XSS攻击。