Vue.js

Reading time: 5 minutes

Vue.js'de XSS Sinks

v-html Yönergesi

v-html yönergesi ham HTML render eder, bu nedenle temizlenmemiş kullanıcı girdisine gömülü herhangi bir <script> (veya onerror gibi bir nitelik) hemen çalıştırılır.

<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 ile src veya href

Kullanıcı dizesini URL taşıyan özniteliklere (href, src, xlink:href, formaction …) bağlamak, bağlantıya tıklandığında javascript:alert(1) gibi yüklerin çalışmasına olanak tanır.

<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 ile kullanıcı kontrolündeki işleyiciler

v-on, değerini new Function ile derler; eğer bu değer kullanıcıdan geliyorsa, onlara kod yürütme imkanı sunmuş olursunuz.

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

Dinamik nitelik / olay adları

Kullanıcı tarafından sağlanan adlar v-bind:[attr] veya v-on:[event] içinde, saldırganların herhangi bir nitelik veya olay işleyici oluşturmasına olanak tanır, statik analizi ve birçok CSP kuralını atlayarak.

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

Dinamik bileşen (<component :is>)

:is içinde kullanıcı dizelerine izin vermek, rastgele bileşenleri veya satır içi şablonları monte edebilir—tarayıcıda tehlikeli ve SSR'de felaket.

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

Güvenilmeyen şablonlar SSR'de

Sunucu tarafı render'ında, şablon sunucunuzda çalışır; kullanıcı HTML'sinin enjekte edilmesi, XSS'i tam Uzaktan Kod Çalıştırma (RCE) seviyesine yükseltebilir. vue-template-compiler'daki CVE'ler bu riski kanıtlamaktadır.

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

Filtreler / değerlendirme fonksiyonları

Kullanıcı verileri üzerinde render dizeleri oluşturan veya eval/new Function çağıran eski filtreler başka bir XSS vektörüdür—bunları hesaplanan özelliklerle değiştirin.

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

Vue Projelerinde Diğer Yaygın Güvenlik Açıkları

Eklentilerde Prototip Kirliliği

Bazı eklentilerdeki derin birleştirme yardımcıları (örneğin, vue-i18n), saldırganların Object.prototype'a yazmasına izin vermiştir.

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

Vue-router ile Açık Yönlendirmeler

Kontrolsüz kullanıcı URL'lerini router.push veya <router-link> ile geçirmek, javascript: URI'lerine veya phishing alanlarına yönlendirebilir.

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

Axios / fetch'te CSRF

SPA'lar hala sunucu tarafı CSRF token'larına ihtiyaç duyar; SameSite çerezleri tek başına otomatik olarak gönderilen çapraz kökenli POST'ları engelleyemez.

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

Click-jacking

Vue uygulamaları, hem X-Frame-Options: DENY hem de Content-Security-Policy: frame-ancestors 'none' göndermediğiniz sürece çerçevelenebilir.

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

Content-Security-Policy tuzakları

Tam Vue derlemesi unsafe-eval gerektirir; bu tehlikeli kaynağı bırakabilmek için çalışma zamanı derlemesine veya önceden derlenmiş şablonlara geçin.

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

Tedarik zinciri saldırıları (node-ipc – Mart 2022)

node-ipc'nin Vue CLI tarafından çekilmesi, geçişli bir bağımlılığın geliştirme makinelerinde rastgele kod çalıştırabileceğini gösterdi. Sürümleri sabitleyin ve sık sık denetim yapın.

npm ci --ignore-scripts   # safer install

Güçlendirme Kontrol Listesi

1. Her bir dizeyi v-html'ye ulaşmadan önce temizleyin (DOMPurify).
2. İzin verilen şemaları, öznitelikleri, bileşenleri ve olayları beyaz listeye alın.
3. eval'den ve dinamik şablonlardan tamamen kaçının.
4. Bağımlılıkları haftalık olarak güncelleyin ve bildirimleri izleyin.
5. Güçlü HTTP başlıkları gönderin (CSP, HSTS, XFO, CSRF).
6. Tedarik zincirinizi denetimlerle, kilit dosyalarıyla ve imzalı taahhütlerle güvence altına alın.

Referanslar

• 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