Vue.js

Reading time: 6 minutes

Vue.js में XSS Sinks

v-html निर्देश

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 with src or href

एक उपयोगकर्ता स्ट्रिंग को URL-bearing attributes (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>

Dynamic attribute / event names

उपयोगकर्ता द्वारा प्रदान किए गए नाम v-bind:[attr] या v-on:[event] में हमलावरों को किसी भी विशेषता या इवेंट हैंडलर को बनाने की अनुमति देते हैं, स्थिर विश्लेषण और कई CSP नियमों को बायपास करते हुए।

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

Dynamic component (<component :is>)

:is में उपयोगकर्ता स्ट्रिंग्स की अनुमति देना मनमाने घटकों या इनलाइन टेम्पलेट्स को माउंट कर सकता है—ब्राउज़र में खतरनाक और SSR में विनाशकारी।

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

Untrusted templates in SSR

सर्वर-साइड रेंडरिंग के दौरान, टेम्पलेट आपके सर्वर पर चलता है; उपयोगकर्ता HTML को इंजेक्ट करना XSS को पूर्ण रिमोट कोड निष्पादन (RCE) में बढ़ा सकता है। vue-template-compiler में CVEs जोखिम को साबित करते हैं।

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

Filters / render functions that eval

पुरानी फ़िल्टर जो रेंडर स्ट्रिंग बनाती हैं या उपयोगकर्ता डेटा पर eval/new Function को कॉल करती हैं, एक और XSS वेक्टर हैं—इन्हें संगणित गुणों से बदलें।

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

Other Common Vulnerabilities in Vue Projects

Prototype pollution in plugins

कुछ प्लगइन्स (जैसे, vue-i18n) में डीप-मर्ज हेल्पर्स ने हमलावरों को Object.prototype में लिखने की अनुमति दी है।

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

Open redirects with vue-router

Unchecked उपयोगकर्ता URLs को router.push या <router-link> में पास करना javascript: URIs या फ़िशिंग डोमेन पर रीडायरेक्ट कर सकता है।

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

CSRF in Axios / fetch

SPAs को अभी भी सर्वर-साइड CSRF टोकन की आवश्यकता होती है; केवल SameSite कुकीज़ स्वचालित रूप से प्रस्तुत किए गए क्रॉस-ओरिजिन POST को रोक नहीं सकती हैं।

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

Click-jacking

Vue ऐप्स फ्रेम करने योग्य होते हैं जब तक आप दोनों 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 की आवश्यकता होती है; आप रनटाइम निर्माण या पूर्व-निर्मित टेम्पलेट्स पर स्विच करें ताकि आप उस खतरनाक स्रोत को हटा सकें।

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

Supply-chain attacks (node-ipc – March 2022)

node-ipc का सबोटाज—जो Vue CLI द्वारा खींचा गया—ने दिखाया कि एक ट्रांजिटिव डिपेंडेंसी कैसे डेवलपमेंट मशीनों पर मनमाना कोड चला सकती है। संस्करणों को पिन करें और अक्सर ऑडिट करें।

npm ci --ignore-scripts   # safer install

Hardening Checklist

1. हर स्ट्रिंग को v-html पर पहुँचने से पहले साफ करें (DOMPurify)।
2. अनुमत स्कीम, विशेषताएँ, घटक, और घटनाओं की सफेद सूची बनाएं।
3. eval और गतिशील टेम्पलेट्स से पूरी तरह बचें।
4. साप्ताहिक रूप से निर्भरताओं को पैच करें और सलाहों की निगरानी करें।
5. मजबूत HTTP हेडर भेजें (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