# Vue.js

{{#include ../../banners/hacktricks-training.md}}

## XSS Sinks in Vue.js

### v-html Directive
A diretiva `v-html` renderiza **HTML** bruto, então qualquer `<script>` (ou um atributo como `onerror`) incorporado em entradas de usuário não sanitizadas é executado imediatamente.
```html
<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 com src ou href
Vincular uma string de usuário a atributos que contêm URL (`href`, `src`, `xlink:href`, `formaction` …) permite que cargas úteis como `javascript:alert(1)` sejam executadas quando o link é seguido.
```html
<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 com manipuladores controlados pelo usuário
`v-on` compila seu valor com `new Function`; se esse valor vem do usuário, você entrega a execução de código em uma bandeja.
```html
<div id="app">
<button v-on:click="malicious">Click me</button>
</div>
<script>
new Vue({
el: '#app',
data: { malicious: 'alert(1)' }
})
</script>
```
### Nomes de atributos / eventos dinâmicos
Nomes fornecidos pelo usuário em `v-bind:[attr]` ou `v-on:[event]` permitem que atacantes criem qualquer atributo ou manipulador de eventos, contornando a análise estática e muitas regras de CSP.
```html
<img v-bind:[userAttr]="payload">
<!-- userAttr = 'onerror', payload = 'alert(1)' -->
```
### Componente dinâmico (`<component :is>`)
Permitir strings de usuário em `:is` pode montar componentes arbitrários ou templates inline—perigoso no navegador e catastrófico em SSR.
```html
<component :is="userChoice"></component>
<!-- userChoice = '<script>alert(1)</script>' -->
```
### Modelos não confiáveis em SSR
Durante a renderização do lado do servidor, o modelo é executado **no seu servidor**; injetar HTML do usuário pode escalar XSS para execução remota de código completo (RCE). CVEs em `vue-template-compiler` provam o risco.
```js
// DANGER – never do this
const app = createSSRApp({ template: userProvidedHtml })
```
### Filtros / funções de renderização que avaliam
Filtros legados que constroem strings de renderização ou chamam `eval`/`new Function` em dados do usuário são outro vetor de XSS—substitua-os por propriedades computadas.
```js
Vue.filter('run', code => eval(code))   // DANGER
```
---

## Outras Vulnerabilidades Comuns em Projetos Vue

### Poluição de protótipo em plugins
Helpers de deep-merge em alguns plugins (por exemplo, **vue-i18n**) permitiram que atacantes escrevessem em `Object.prototype`.
```js
import merge from 'deepmerge'
merge({}, JSON.parse('{ "__proto__": { "polluted": true } }'))
```
### Redirecionamentos abertos com vue-router
Passar URLs de usuários não verificadas para `router.push` ou `<router-link>` pode redirecionar para URIs `javascript:` ou domínios de phishing.
```js
this.$router.push(this.$route.query.next) // DANGER
```
### CSRF em Axios / fetch
SPAs ainda precisam de tokens CSRF do lado do servidor; cookies SameSite sozinhos não podem bloquear POSTs cross-origin enviados automaticamente.
```js
axios.post('/api/transfer', data, {
headers: { 'X-CSRF-TOKEN': token }
})
```
### Click-jacking
Aplicativos Vue são passíveis de serem emoldurados, a menos que você envie tanto `X-Frame-Options: DENY` quanto `Content-Security-Policy: frame-ancestors 'none'`.
```http
X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none';
```
### Content-Security-Policy armadilhas
A construção completa do Vue precisa de `unsafe-eval`; mude para a construção em tempo de execução ou templates pré-compilados para que você possa eliminar essa fonte perigosa.
```http
Content-Security-Policy: default-src 'self'; script-src 'self';
```
### Ataques à cadeia de suprimentos (node-ipc – Março de 2022)
O sabotagem do **node-ipc**—retirado pelo Vue CLI—mostrou como uma dependência transitiva pode executar código arbitrário em máquinas de desenvolvimento. Fixe versões e audite com frequência.
```shell
npm ci --ignore-scripts   # safer install
```
---

## Lista de Verificação de Fortalecimento

1. **Sanitizar** cada string antes de chegar a `v-html` (DOMPurify).
2. **Lista branca** de esquemas, atributos, componentes e eventos permitidos.
3. **Evitar `eval`** e templates dinâmicos completamente.
4. **Corrigir dependências semanalmente** e monitorar avisos.
5. **Enviar cabeçalhos HTTP fortes** (CSP, HSTS, XFO, CSRF).
6. **Trancar sua cadeia de suprimentos** com auditorias, arquivos de bloqueio e commits assinados.

## Referências

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

{{#include ../../banners/hacktricks-training.md}}