Vue.js

Vue.js में XSS Sinks

v-html Directive

v-html directive कच्चा 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>

डायनामिक एट्रिब्यूट / इवेंट नाम

User-supplied names in v-bind:[attr] or v-on:[event] attackers को किसी भी एट्रिब्यूट या इवेंट हैंडलर बनाने की अनुमति देते हैं, जो स्थिर विश्लेषण और कई 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

Server-side rendering के दौरान, टेम्पलेट आपके सर्वर पर चलता है; उपयोगकर्ता HTML को इंजेक्ट करना XSS को पूर्ण Remote Code Execution (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

Vue प्रोजेक्ट्स में अन्य सामान्य कमजोरियाँ

प्लगइन्स में प्रोटोटाइप प्रदूषण

कुछ प्लगइन्स (जैसे, 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