Vue.js

Reading time: 6 minutes

Sinks XSS en Vue.js

Directiva v-html

La directiva v-html renderiza HTML sin procesar, por lo que cualquier <script> (o un atributo como onerror) incrustado en la entrada del usuario no sanitizada se ejecuta de inmediato.

<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 con src o href

Vincular una cadena de usuario a atributos que contienen URL (href, src, xlink:href, formaction …) permite que cargas útiles como javascript:alert(1) se ejecuten cuando se sigue el enlace.

<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 con controladores controlados por el usuario

v-on compila su valor con new Function; si ese valor proviene del usuario, les entregas la ejecución de código en un plato.

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

Nombres de atributos / eventos dinámicos

Los nombres proporcionados por el usuario en v-bind:[attr] o v-on:[event] permiten a los atacantes crear cualquier atributo o controlador de eventos, eludiendo el análisis estático y muchas reglas de CSP.

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

Componente dinámico (<component :is>)

Permitir cadenas de usuario en :is puede montar componentes arbitrarios o plantillas en línea, lo cual es peligroso en el navegador y catastrófico en SSR.

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

Plantillas no confiables en SSR

Durante la renderización del lado del servidor, la plantilla se ejecuta en tu servidor; inyectar HTML de usuario puede escalar XSS a una ejecución remota de código (RCE) completa. Los CVEs en vue-template-compiler demuestran el riesgo.

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

Filtros / funciones de renderizado que evalúan

Los filtros heredados que construyen cadenas de renderizado o llaman a eval/new Function en datos de usuario son otro vector de XSS; reemplázalos con propiedades computadas.

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

Otras Vulnerabilidades Comunes en Proyectos Vue

Contaminación de prototipos en plugins

Los ayudantes de combinación profunda en algunos plugins (por ejemplo, vue-i18n) han permitido a los atacantes escribir en Object.prototype.

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

Redirecciones abiertas con vue-router

Pasar URLs de usuario no verificadas a router.push o <router-link> puede redirigir a URIs javascript: o dominios de phishing.

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

CSRF en Axios / fetch

Las SPAs aún necesitan tokens CSRF del lado del servidor; las cookies SameSite por sí solas no pueden bloquear los POSTs de origen cruzado enviados automáticamente.

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

Click-jacking

Las aplicaciones Vue son enmarcables a menos que envíes tanto X-Frame-Options: DENY como Content-Security-Policy: frame-ancestors 'none'.

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

Content-Security-Policy pitfalls

La construcción completa de Vue necesita unsafe-eval; cambia a la construcción en tiempo de ejecución o a plantillas precompiladas para que puedas eliminar esa fuente peligrosa.

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

Ataques a la cadena de suministro (node-ipc – marzo de 2022)

El sabotaje de node-ipc—extraído por Vue CLI—mostró cómo una dependencia transitiva puede ejecutar código arbitrario en máquinas de desarrollo. Fija las versiones y audita con frecuencia.

npm ci --ignore-scripts   # safer install

Lista de Verificación de Fortalecimiento

1. Sanitizar cada cadena antes de que llegue a v-html (DOMPurify).
2. Lista blanca de esquemas, atributos, componentes y eventos permitidos.
3. Evitar eval y plantillas dinámicas por completo.
4. Parchear dependencias semanalmente y monitorear avisos.
5. Enviar encabezados HTTP fuertes (CSP, HSTS, XFO, CSRF).
6. Asegurar tu cadena de suministro con auditorías, archivos de bloqueo y commits firmados.

Referencias

• 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