Vue.js

Reading time: 5 minutes

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.

<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.

<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.

<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.

<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.

<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.

// 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.

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.

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.

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.

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'.

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.

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.

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://medium.com/@isaacwangethi30/vue-js-security-6e246a7613da
• https://vuejs.org/guide/best-practices/security