Vue.js

Reading time: 6 minutes

Sinks XSS dans Vue.js

Directive v-html

La directive v-html rend du HTML brut, donc tout <script> (ou un attribut comme onerror) intégré dans une entrée utilisateur non assainie s'exécute immédiatement.

<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 avec src ou href

Lier une chaîne utilisateur à des attributs contenant des URL (href, src, xlink:href, formaction …) permet à des charges utiles telles que javascript:alert(1) de s'exécuter lorsque le lien est suivi.

<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 avec des gestionnaires contrôlés par l'utilisateur

v-on compile sa valeur avec new Function; si cette valeur provient de l'utilisateur, vous lui offrez l'exécution de code sur un plateau.

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

Noms d'attributs / événements dynamiques

Les noms fournis par l'utilisateur dans v-bind:[attr] ou v-on:[event] permettent aux attaquants de créer n'importe quel attribut ou gestionnaire d'événements, contournant ainsi l'analyse statique et de nombreuses règles CSP.

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

Composant dynamique (<component :is>)

Autoriser les chaînes d'utilisateur dans :is peut monter des composants arbitraires ou des modèles en ligne—dangereux dans le navigateur et catastrophique dans SSR.

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

Modèles non fiables dans SSR

Lors du rendu côté serveur, le modèle s'exécute sur votre serveur ; l'injection de HTML utilisateur peut faire passer XSS à une exécution de code à distance complète (RCE). Les CVE dans vue-template-compiler prouvent le risque.

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

Filtres / fonctions de rendu qui évaluent

Les filtres hérités qui construisent des chaînes de rendu ou appellent eval/new Function sur des données utilisateur sont un autre vecteur XSS—remplacez-les par des propriétés calculées.

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

Autres vulnérabilités courantes dans les projets Vue

Pollution de prototype dans les plugins

Les helpers de fusion profonde dans certains plugins (par exemple, vue-i18n) ont permis aux attaquants d'écrire dans Object.prototype.

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

Redirections ouvertes avec vue-router

Passer des URL d'utilisateur non vérifiées à router.push ou <router-link> peut rediriger vers des URI javascript: ou des domaines de phishing.

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

CSRF dans Axios / fetch

Les SPAs ont toujours besoin de jetons CSRF côté serveur ; les cookies SameSite à eux seuls ne peuvent pas bloquer les POST cross-origin soumis automatiquement.

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

Click-jacking

Les applications Vue peuvent être intégrées dans des cadres à moins que vous n'envoyiez à la fois X-Frame-Options: DENY et Content-Security-Policy: frame-ancestors 'none'.

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

Content-Security-Policy pièges

La version complète de Vue nécessite unsafe-eval; passez à la version runtime ou aux templates précompilés afin de pouvoir supprimer cette source dangereuse.

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

Attaques de la chaîne d'approvisionnement (node-ipc – Mars 2022)

Le sabotage de node-ipc—tiré par Vue CLI—a montré comment une dépendance transitive peut exécuter du code arbitraire sur les machines de développement. Verrouillez les versions et auditez souvent.

npm ci --ignore-scripts   # safer install

Liste de vérification de durcissement

1. Assainir chaque chaîne avant qu'elle n'atteigne v-html (DOMPurify).
2. Liste blanche des schémas, attributs, composants et événements autorisés.
3. Éviter eval et les modèles dynamiques dans leur ensemble.
4. Mettre à jour les dépendances chaque semaine et surveiller les avis.
5. Envoyer des en-têtes HTTP forts (CSP, HSTS, XFO, CSRF).
6. Verrouiller votre chaîne d'approvisionnement avec des audits, des fichiers de verrouillage et des commits signés.

Références

• 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