129 lines
4.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Vue.js
{{#include ../../banners/hacktricks-training.md}}
## 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 salama inatekelezwa mara moja.
```html
<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 payloads kama `javascript:alert(1)` kuendesha wakati kiungo kinapofuatwa.
```html
<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.
```html
<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.
```html
<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.
```html
<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.
```js
// 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.
```js
Vue.filter('run', code => eval(code)) // DANGER
```
---
## Other Common Vulnerabilities in Vue Projects
### Prototype pollution in plugins
Deep-merge helpers in some plugins (e.g., **vue-i18n**) wamewezesha washambuliaji kuandika kwenye `Object.prototype`.
```js
import merge from 'deepmerge'
merge({}, JSON.parse('{ "__proto__": { "polluted": true } }'))
```
### Open redirects with vue-router
Kupitisha URL za mtumiaji zisizokaguliwa kwa `router.push` au `<router-link>` kunaweza kuelekeza kwenye `javascript:` URIs au maeneo ya uvuvi.
```js
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.
```js
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'`.
```http
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.
```http
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 wowote kwenye mashine za maendeleo. Weka toleo na fanya ukaguzi mara kwa mara.
```shell
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 yaliyoruhusiwa.
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://www.stackhawk.com/blog/vue-xss-guide-examples-and-prevention/)
- [https://medium.com/@isaacwangethi30/vue-js-security-6e246a7613da](https://medium.com/@isaacwangethi30/vue-js-security-6e246a7613da)
- [https://vuejs.org/guide/best-practices/security](https://vuejs.org/guide/best-practices/security)
{{#include ../../banners/hacktricks-training.md}}