Vue.js

Reading time: 5 minutes

XSS Sinks in Vue.js

v-html Directive

Η οδηγία 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 …) επιτρέπει την εκτέλεση payloads όπως το 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>' -->

Untrusted templates in SSR

Κατά τη διάρκεια της απόδοσης από τον διακομιστή, το πρότυπο εκτελείται στον διακομιστή σας; η εισαγωγή HTML από χρήστες μπορεί να κλιμακώσει το XSS σε πλήρη Εκτέλεση Κώδικα από Απόσταση (RCE). Οι CVEs στο vue-template-compiler αποδεικνύουν τον κίνδυνο.

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

Φίλτρα / συναρτήσεις απόδοσης που αξιολογούν

Οι παλαιές φίλτρα που δημιουργούν συμβολοσειρές απόδοσης ή καλούν eval/new Function σε δεδομένα χρήστη είναι μια άλλη διαδρομή XSS—αντικαταστήστε τα με υπολογισμένες ιδιότητες.

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

Άλλες Κοινές Ευπάθειες σε Έργα Vue

Μόλυνση πρωτοτύπου σε plugins

Οι βοηθοί deep-merge σε ορισμένα plugins (π.χ., vue-i18n) έχουν επιτρέψει στους επιτιθέμενους να γράφουν στο Object.prototype.

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

Ανοιχτές ανακατευθύνσεις με vue-router

Η μεταφορά μη ελεγμένων διευθύνσεων URL χρηστών σε router.push ή <router-link> μπορεί να ανακατευθύνει σε javascript: URIs ή τομείς phishing.

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

CSRF σε Axios / fetch

Οι SPAs εξακολουθούν να χρειάζονται CSRF tokens από τον server; Τα cookies SameSite από μόνα τους δεν μπορούν να μπλοκάρουν τις αυτόματες υποβληθείσες cross-origin POST αιτήσεις.

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

Click-jacking

Οι εφαρμογές Vue είναι δυνατόν να ενσωματωθούν σε iframe εκτός αν στείλετε και τα δύο 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; μεταβείτε στην έκδοση runtime ή σε προ-συμπιεσμένα πρότυπα ώστε να μπορείτε να απορρίψετε αυτή την επικίνδυνη πηγή.

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

Επιθέσεις εφοδιαστικής αλυσίδας (node-ipc – Μάρτιος 2022)

Η σαμποτάζ του node-ipc—που τραβήχτηκε από το Vue CLI—έδειξε πώς μια μεταβατική εξάρτηση μπορεί να εκτελέσει αυθαίρετο κώδικα σε μηχανές ανάπτυξης. Κλειδώστε τις εκδόσεις και ελέγξτε συχνά.

npm ci --ignore-scripts   # safer install

Hardening Checklist

1. Καθαρίστε κάθε συμβολοσειρά πριν φτάσει στο v-html (DOMPurify).
2. Λευκή λίστα επιτρεπόμενων σχημάτων, χαρακτηριστικών, συστατικών και γεγονότων.
3. Αποφύγετε το eval και τις δυναμικές προτύπες εντελώς.
4. Ενημερώστε τις εξαρτήσεις εβδομαδιαία και παρακολουθήστε τις συμβουλές.
5. Στείλτε ισχυρούς HTTP headers (CSP, HSTS, XFO, CSRF).
6. Κλειδώστε την αλυσίδα προμήθειας με ελέγχους, αρχεία κλειδώματος και υπογεγραμμένες δεσμεύσεις.

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