# Vue.js

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

## XSS Sinks in Vue.js

### v-html Directive
Η οδηγία `v-html` αποδίδει **ακατέργωτο** HTML, οπότε οποιοδήποτε `<script>` (ή μια ιδιότητα όπως `onerror`) που είναι ενσωματωμένο σε μη καθαρισμένα δεδομένα χρήστη εκτελείται αμέσως.
```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 με src ή href
Η σύνδεση μιας συμβολοσειράς χρήστη με χαρακτηριστικά που περιέχουν URL (`href`, `src`, `xlink:href`, `formaction` …) επιτρέπει την εκτέλεση payloads όπως το `javascript:alert(1)` όταν ακολουθείται ο σύνδεσμος.
```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 με χειριστές ελεγχόμενους από τον χρήστη
`v-on` συντάσσει την τιμή του με `new Function`; αν αυτή η τιμή προέρχεται από τον χρήστη, τους προσφέρετε εκτέλεση κώδικα σε ένα πιάτο.
```html
<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.
```html
<img v-bind:[userAttr]="payload">
<!-- userAttr = 'onerror', payload = 'alert(1)' -->
```
### Δυναμικό συστατικό (`<component :is>`)
Η επιτρεπόμενη χρήση συμβολοσειρών χρηστών στο `:is` μπορεί να τοποθετήσει αυθαίρετα συστατικά ή ενσωματωμένα πρότυπα—επικίνδυνο στον περιηγητή και καταστροφικό στο SSR.
```html
<component :is="userChoice"></component>
<!-- userChoice = '<script>alert(1)</script>' -->
```
### Untrusted templates in SSR
Κατά τη διάρκεια της απόδοσης από τον διακομιστή, το πρότυπο εκτελείται **στον διακομιστή σας**; η εισαγωγή HTML από χρήστες μπορεί να κλιμακώσει το XSS σε πλήρη Εκτέλεση Κώδικα από Απόσταση (RCE). Οι CVEs στο `vue-template-compiler` αποδεικνύουν τον κίνδυνο.
```js
// DANGER – never do this
const app = createSSRApp({ template: userProvidedHtml })
```
### Filters / render functions that eval
Οι παλαιές φίλτρα που δημιουργούν συμβολοσειρές απόδοσης ή καλούν `eval`/`new Function` σε δεδομένα χρηστών είναι μια άλλη διαδρομή XSS—αντικαταστήστε τις με υπολογισμένες ιδιότητες.
```js
Vue.filter('run', code => eval(code))   // DANGER
```
---

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

### Μόλυνση πρωτοτύπου σε plugins
Οι βοηθοί deep-merge σε ορισμένα plugins (π.χ., **vue-i18n**) έχουν επιτρέψει στους επιτιθέμενους να γράφουν στο `Object.prototype`.
```js
import merge from 'deepmerge'
merge({}, JSON.parse('{ "__proto__": { "polluted": true } }'))
```
### Ανοιχτές ανακατευθύνσεις με vue-router
Η μεταφορά μη ελεγμένων διευθύνσεων URL χρηστών σε `router.push` ή `<router-link>` μπορεί να ανακατευθύνει σε `javascript:` URIs ή τομείς phishing.
```js
this.$router.push(this.$route.query.next) // DANGER
```
### CSRF σε Axios / fetch
Οι SPAs εξακολουθούν να χρειάζονται CSRF tokens από τον server; Τα cookies SameSite από μόνα τους δεν μπορούν να μπλοκάρουν τις αυτόματες υποβληθείσες cross-origin POST αιτήσεις.
```js
axios.post('/api/transfer', data, {
headers: { 'X-CSRF-TOKEN': token }
})
```
### Click-jacking
Οι εφαρμογές Vue είναι δυνατόν να ενσωματωθούν σε iframe εκτός αν στείλετε και τα δύο `X-Frame-Options: DENY` και `Content-Security-Policy: frame-ancestors 'none'`.
```http
X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none';
```
### Content-Security-Policy pitfalls
Η πλήρης έκδοση του Vue χρειάζεται `unsafe-eval`; μεταβείτε στην έκδοση runtime ή σε προ-συμπιεσμένα πρότυπα ώστε να μπορείτε να απορρίψετε αυτή την επικίνδυνη πηγή.
```http
Content-Security-Policy: default-src 'self'; script-src 'self';
```
### Επιθέσεις εφοδιαστικής αλυσίδας (node-ipc – Μάρτιος 2022)
Η σαμποτάζ του **node-ipc**—που τραβήχτηκε από το Vue CLI—έδειξε πώς μια μεταβατική εξάρτηση μπορεί να εκτελέσει αυθαίρετο κώδικα σε μηχανές ανάπτυξης. Κλειδώστε τις εκδόσεις και ελέγξτε συχνά.
```shell
npm ci --ignore-scripts   # safer install
```
---

## Λίστα Ελέγχου Σκληροποίησης

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

## Αναφορές

- [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}}