Vue.js

Reading time: 5 minutes

XSS Sinks in Vue.js

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 з src або href

Прив'язка рядка користувача до атрибутів, що містять URL (href, src, xlink:href, formaction …), дозволяє виконувати такі корисні навантаження, як 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>

Динамічні імена атрибутів / подій

Імена, надані користувачем, у v-bind:[attr] або v-on:[event] дозволяють зловмисникам створювати будь-який атрибут або обробник подій, обходячи статичний аналіз і багато правил CSP.

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

Динамічний компонент (<component :is>)

Дозволення рядків користувача в :is може монтувати довільні компоненти або вбудовані шаблони — небезпечно в браузері та катастрофічно в SSR.

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

Ненадійні шаблони в SSR

Під час рендерингу на стороні сервера шаблон виконується на вашому сервері; ін'єкція HTML користувача може підвищити XSS до повного віддаленого виконання коду (RCE). CVE в vue-template-compiler підтверджують ризик.

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

Фільтри / функції рендерингу, які eval

Спадкові фільтри, які створюють рядки рендерингу або викликають eval/new Function на даних користувача, є ще одним вектором XSS — замініть їх на обчислювальні властивості.

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

Інші загальні вразливості в проектах Vue

Забруднення прототипу в плагінах

Deep-merge допоміжні засоби в деяких плагінах (наприклад, vue-i18n) дозволили зловмисникам записувати в Object.prototype.

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

Відкриті редиректи з vue-router

Передача неперевірених URL-адрес користувачів до router.push або <router-link> може перенаправити на javascript: URI або фішингові домени.

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

CSRF в Axios / fetch

SPA все ще потребують токенів 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 недоліки

Повна збірка Vue потребує unsafe-eval; перейдіть на збірку runtime або попередньо скомпільовані шаблони, щоб ви могли відмовитися від цього небезпечного джерела.

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. Забезпечте свою ланцюг постачання за допомогою аудитів, lockfiles та підписаних комітів.

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