Vue.js

Reading time: 5 minutes

XSS Sinks in Vue.js

v-html Directive

The v-html directive renders raw HTML, hivyo yoyote <script> (au sifa kama onerror) iliyowekwa katika pembejeo za mtumiaji zisizo safishwa inatekelezwa mara moja.

<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 na src au href

Kufunga mfuatano wa mtumiaji kwa sifa zenye URL (href, src, xlink:href, formaction …) kunaruhusu malipo kama javascript:alert(1) kutekelezwa wakati kiungo kinapofuatwa.

<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 na wakala wanaodhibitiwa na mtumiaji

v-on inakusanya thamani yake na new Function; ikiwa thamani hiyo inatoka kwa mtumiaji, unawapa utekelezaji wa msimbo kwenye sahani.

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

Majina ya sifa / matukio ya dinamik

Majina yanayotolewa na mtumiaji katika v-bind:[attr] au v-on:[event] yanawaruhusu washambuliaji kuunda sifa au mpangilio wa tukio wowote, wakiepuka uchambuzi wa statiki na sheria nyingi za CSP.

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

Dynamic component (<component :is>)

Kuruhusu nyuzi za mtumiaji katika :is kunaweza kuweka sehemu zisizo na mpangilio au templeti za ndani—hatari katika kivinjari na mbaya katika SSR.

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

Untrusted templates in SSR

Wakati wa uundaji wa upande wa seva, kiolezo kinakimbia katika seva yako; kuingiza HTML ya mtumiaji kunaweza kuongeza XSS hadi Utekelezaji wa Kanuni ya K remote (RCE). CVEs katika vue-template-compiler zinaonyesha hatari hiyo.

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

Filters / render functions that eval

Filters za zamani ambazo zinajenga nyuzi za uwasilishaji au kuita eval/new Function kwenye data za mtumiaji ni njia nyingine ya XSS—badilisha hizo na mali zilizohesabiwa.

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

Other Common Vulnerabilities in Vue Projects

Prototype pollution in plugins

Deep-merge helpers katika baadhi ya plugins (e.g., vue-i18n) zimewaruhusu washambuliaji kuandika kwenye Object.prototype.

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

Open redirects with vue-router

Kupitisha URLs za mtumiaji zisizokaguliwa kwa router.push au <router-link> kunaweza kuelekeza kwenye javascript: URIs au maeneo ya uvuvi.

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

CSRF katika Axios / fetch

SPAs bado zinahitaji token za CSRF za upande wa seva; kuki za SameSite pekee hazina uwezo wa kuzuia POSTs za kuvuka mipaka zinazowasilishwa kiotomatiki.

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

Click-jacking

Programu za Vue zinaweza kuwekwa kwenye fremu isipokuwa utume X-Frame-Options: DENY na Content-Security-Policy: frame-ancestors 'none'.

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

Content-Security-Policy pitfalls

Jenga kamili la Vue linahitaji unsafe-eval; badilisha kwenda kwenye jenga la wakati halisi au templeti zilizotangulia ili uweze kuondoa chanzo hicho hatari.

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

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

Uharibifu wa node-ipc—uliovutwa na Vue CLI—ulionyesha jinsi utegemezi wa mpito unaweza kuendesha msimbo usio na mipaka kwenye mashine za maendeleo. Weka toleo na fanya ukaguzi mara kwa mara.

npm ci --ignore-scripts   # safer install

Orodha ya Kuimarisha

1. Safisha kila mfuatano kabla haujafika v-html (DOMPurify).
2. Ruhusu mipango, sifa, vipengele, na matukio yaliyokubaliwa.
3. Epuka eval na templeti za dinamikali kabisa.
4. Sasisha utegemezi kila wiki na ufuatilie taarifa.
5. Tuma vichwa vya HTTP vya nguvu (CSP, HSTS, XFO, CSRF).
6. Funga mnyororo wako wa usambazaji kwa ukaguzi, faili za kufunga, na kujitolea kusainiwa.

Marejeleo

• 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