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 izin verir.

<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 öznitelik / olay adları

Kullanıcı tarafından sağlanan adlar v-bind:[attr] veya v-on:[event] içinde, saldırganların herhangi bir öznitelik 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ı dizgelerine izin vermek, rastgele bileşenlerin veya satır içi şablonların monte edilmesine olanak tanır—bu tarayıcıda tehlikeli ve SSR'de yıkıcıdır.

<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 eval/new Function çağıran veya render dizeleri oluşturan 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 oltalama alanlarına yönlendirebilir.

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

CSRF in Axios / fetch

SPA'lar hala sunucu tarafı CSRF token'larına ihtiyaç duyar; SameSite çerezleri 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. Beyaz liste ile izin verilen şemaları, öznitelikleri, bileşenleri ve olayları belirleyin.
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 denetimler, kilit dosyaları 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