Vue.js

Reading time: 5 minutes

XSS Sinks in Vue.js

v-html-Direktive

Die v-html-Direktive rendert rohes HTML, sodass jedes <script> (oder ein Attribut wie onerror), das in unsaniertem Benutzereingang eingebettet ist, sofort ausgeführt wird.

<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 mit src oder href

Das Binden einer Benutzerzeichenfolge an URL-tragende Attribute (href, src, xlink:href, formaction …) ermöglicht es Payloads wie javascript:alert(1), ausgeführt zu werden, wenn der Link gefolgt wird.

<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 mit benutzerkontrollierten Handlern

v-on kompiliert seinen Wert mit new Function; wenn dieser Wert vom Benutzer stammt, bieten Sie ihm die Codeausführung auf einem Silbertablett an.

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

Dynamische Attribut- / Ereignisnamen

Benutzereingereichte Namen in v-bind:[attr] oder v-on:[event] ermöglichen es Angreifern, beliebige Attribute oder Ereignis-Handler zu erstellen, wodurch statische Analysen und viele CSP-Regeln umgangen werden.

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

Dynamische Komponente (<component :is>)

Benutzerschnur in :is zuzulassen, kann beliebige Komponenten oder Inline-Vorlagen einfügen – gefährlich im Browser und katastrophal in SSR.

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

Untrusted templates in SSR

Während des serverseitigen Renderings wird die Vorlage auf Ihrem Server ausgeführt; das Injizieren von Benutzer-HTML kann XSS zu vollständiger Remote Code Execution (RCE) eskalieren. CVEs in vue-template-compiler beweisen das Risiko.

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

Filter / Render-Funktionen, die eval verwenden

Legacy-Filter, die Render-Strings erstellen oder eval/new Function auf Benutzerdaten aufrufen, sind ein weiteres XSS-Vektor—ersetzen Sie sie durch berechnete Eigenschaften.

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

Andere häufige Schwachstellen in Vue-Projekten

Prototyp-Verschmutzung in Plugins

Deep-Merge-Hilfsfunktionen in einigen Plugins (z.B. vue-i18n) haben es Angreifern ermöglicht, in Object.prototype zu schreiben.

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

Offene Weiterleitungen mit vue-router

Das Übergeben von nicht überprüften Benutzer-URLs an router.push oder <router-link> kann zu javascript: URIs oder Phishing-Domains umleiten.

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

CSRF in Axios / fetch

SPAs benötigen weiterhin serverseitige CSRF-Token; SameSite-Cookies können automatisch gesendete Cross-Origin-POSTs nicht blockieren.

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

Click-jacking

Vue-Apps sind einbettbar, es sei denn, Sie senden sowohl X-Frame-Options: DENY als auch Content-Security-Policy: frame-ancestors 'none'.

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

Content-Security-Policy Fallstricke

Der vollständige Vue-Build benötigt unsafe-eval; wechseln Sie zum Runtime-Build oder zu vorcompilierten Vorlagen, damit Sie diese gefährliche Quelle loswerden können.

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

Supply-chain-Angriffe (node-ipc – März 2022)

Die Sabotage von node-ipc—gezogen von Vue CLI—zeigte, wie eine transitive Abhängigkeit beliebigen Code auf Entwicklungsmaschinen ausführen kann. Versionen festlegen und häufig prüfen.

npm ci --ignore-scripts   # safer install

Hardening Checklist

1. Sanitisiere jeden String, bevor er v-html erreicht (DOMPurify).
2. Whitelist erlaubte Schemes, Attribute, Komponenten und Events.
3. Vermeide eval und dynamische Templates vollständig.
4. Patch Abhängigkeiten wöchentlich und überwache Hinweise.
5. Sende starke HTTP-Header (CSP, HSTS, XFO, CSRF).
6. Sichere deine Lieferkette mit Audits, Lockfiles und signierten Commits.

References

• 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