Vue.js

Reading time: 5 minutes

Sinki XSS w Vue.js

Dyrektywa v-html

Dyrektywa v-html renderuje surowy HTML, więc każdy <script> (lub atrybut taki jak onerror) osadzony w niesanitarnym wejściu użytkownika wykonuje się natychmiast.

<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 z src lub href

Powiązanie ciągu użytkownika z atrybutami zawierającymi URL (href, src, xlink:href, formaction …) pozwala na uruchomienie ładunków takich jak javascript:alert(1) po kliknięciu w link.

<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 z kontrolowanymi przez użytkownika handlerami

v-on kompiluje swoją wartość za pomocą new Function; jeśli ta wartość pochodzi od użytkownika, wręczasz im wykonanie kodu na tacy.

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

Dynamic attribute / event names

Nazwy dostarczone przez użytkownika w v-bind:[attr] lub v-on:[event] pozwalają atakującym na tworzenie dowolnych atrybutów lub obsługi zdarzeń, omijając analizę statyczną i wiele zasad CSP.

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

Dynamic component (<component :is>)

Zezwolenie na ciągi użytkownika w :is może montować dowolne komponenty lub szablony inline—niebezpieczne w przeglądarce i katastrofalne w SSR.

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

Nieufne szablony w SSR

Podczas renderowania po stronie serwera, szablon działa na twoim serwerze; wstrzykiwanie HTML od użytkownika może eskalować XSS do pełnego zdalnego wykonania kodu (RCE). CVE w vue-template-compiler potwierdzają to ryzyko.

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

Filtry / funkcje renderujące, które eval

Legacy filtry, które budują ciągi renderujące lub wywołują eval/new Function na danych użytkownika, są kolejnym wektorem XSS—zastąp je właściwościami obliczeniowymi.

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

Inne powszechne luki w projektach Vue

Zanieczyszczenie prototypu w wtyczkach

Pomocnicy deep-merge w niektórych wtyczkach (np. vue-i18n) pozwoliły atakującym na zapis do Object.prototype.

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

Otwarte przekierowania z vue-router

Przekazywanie niezweryfikowanych adresów URL użytkowników do router.push lub <router-link> może prowadzić do przekierowań na javascript: URI lub domeny phishingowe.

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

CSRF w Axios / fetch

SPA nadal potrzebują tokenów CSRF po stronie serwera; SameSite cookies same w sobie nie mogą zablokować automatycznie przesyłanych cross-origin POSTów.

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

Click-jacking

Aplikacje Vue są możliwe do osadzenia, chyba że wyślesz zarówno X-Frame-Options: DENY, jak i Content-Security-Policy: frame-ancestors 'none'.

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

Pułapki Content-Security-Policy

Pełna budowa Vue wymaga unsafe-eval; przejdź do budowy runtime lub prekompilowanych szablonów, aby móc zrezygnować z tego niebezpiecznego źródła.

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

Ataki na łańcuch dostaw (node-ipc – marzec 2022)

Sabotaż node-ipc—ściągnięty przez Vue CLI—pokazał, jak transytywna zależność może uruchomić dowolny kod na maszynach deweloperskich. Zablokuj wersje i często przeprowadzaj audyty.

npm ci --ignore-scripts   # safer install

Lista kontrolna wzmacniania

1. Sanityzuj każdy ciąg przed jego użyciem w v-html (DOMPurify).
2. Zezwól na dozwolone schematy, atrybuty, komponenty i zdarzenia.
3. Unikaj eval i dynamicznych szablonów całkowicie.
4. Aktualizuj zależności co tydzień i monitoruj powiadomienia.
5. Wysyłaj silne nagłówki HTTP (CSP, HSTS, XFO, CSRF).
6. Zabezpiecz swój łańcuch dostaw za pomocą audytów, plików blokad i podpisanych commitów.

Odniesienia

• 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