Vue.js

Reading time: 7 minutes

Vue.js中的XSS漏洞

v-html指令

v-html指令渲染原始HTML，因此任何嵌入在未清理的用户输入中的<script>（或像onerror这样的属性）会立即执行。

<div id="app">
<div v-html="htmlContent"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
htmlContent: '<img src=x onerror=alert(1)>'
}
})
</script>

v-bind 与 src 或 href

将用户字符串绑定到带有 URL 的属性（href、src、xlink:href、formaction 等）允许在跟随链接时运行诸如 javascript:alert(1) 的有效载荷。

<div id="app">
<a v-bind:href="userInput">Click me</a>
</div>
<script>
new Vue({
el: '#app',
data: {
userInput: 'javascript:alert(1)'
}
})
</script>

v-on 与用户控制的处理程序

v-on 使用 new Function 编译其值；如果该值来自用户，您就将代码执行的权利直接交给他们。

<div id="app">
<button v-on:click="malicious">Click me</button>
</div>
<script>
new Vue({
el: '#app',
data: { malicious: 'alert(1)' }
})
</script>

动态属性 / 事件名称

用户提供的名称在 v-bind:[attr] 或 v-on:[event] 中允许攻击者创建任何属性或事件处理程序，从而绕过静态分析和许多 CSP 规则。

<img v-bind:[userAttr]="payload">
<!-- userAttr = 'onerror', payload = 'alert(1)' -->

动态组件 (<component :is>)

允许用户字符串在 :is 中可以挂载任意组件或内联模板——在浏览器中是危险的，在 SSR 中是灾难性的。

<component :is="userChoice"></component>
<!-- userChoice = '<script>alert(1)</script>' -->

不可信的模板在SSR中

在服务器端渲染期间，模板在你的服务器上运行；注入用户HTML可能会将XSS升级为完全的远程代码执行（RCE）。vue-template-compiler中的CVE证明了这一风险。

// DANGER – never do this
const app = createSSRApp({ template: userProvidedHtml })

过滤器 / 渲染函数的 eval

构建渲染字符串或在用户数据上调用 eval/new Function 的遗留过滤器是另一个 XSS 向量——用计算属性替换它们。

Vue.filter('run', code => eval(code))   // DANGER

Vue项目中的其他常见漏洞

插件中的原型污染

某些插件中的深度合并助手（例如，vue-i18n）允许攻击者写入 Object.prototype。

import merge from 'deepmerge'
merge({}, JSON.parse('{ "__proto__": { "polluted": true } }'))

使用 vue-router 的开放重定向

将未经检查的用户 URL 传递给 router.push 或 <router-link> 可能会重定向到 javascript: URI 或钓鱼域。

this.$router.push(this.$route.query.next) // DANGER

CSRF in Axios / fetch

单页应用仍然需要服务器端的 CSRF 令牌；仅使用 SameSite cookies 无法阻止自动提交的跨源 POST 请求。

axios.post('/api/transfer', data, {
headers: { 'X-CSRF-TOKEN': token }
})

Click-jacking

Vue 应用程序是可以被框架化的，除非您同时发送 X-Frame-Options: DENY 和 Content-Security-Policy: frame-ancestors 'none'。

X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none';

Content-Security-Policy pitfalls

完整的 Vue 构建需要 unsafe-eval；切换到运行时构建或预编译模板，以便您可以去掉那个危险的源。

Content-Security-Policy: default-src 'self'; script-src 'self';

供应链攻击 (node-ipc – 2022年3月)

对 node-ipc 的破坏——由 Vue CLI 拉取——显示了一个传递依赖如何在开发机器上运行任意代码。固定版本并经常审计。

npm ci --ignore-scripts   # safer install

加固检查清单

1. 在字符串进入 v-html 之前进行清理 (DOMPurify)。
2. 列出 允许的方案、属性、组件和事件。
3. 完全避免使用 eval 和动态模板。
4. 每周修补依赖 并监控安全通告。
5. 发送强大的 HTTP 头 (CSP, HSTS, XFO, CSRF)。
6. 通过审计、锁定文件和签名提交来锁定你的供应链。

参考文献

• https://www.stackhawk.com/blog/vue-xss-guide-examples-and-prevention/
• https://medium.com/@isaacwangethi30/vue-js-security-6e246a7613da
• https://vuejs.org/guide/best-practices/security