flawopen.com/XSS en JavaScript/Vue v-html
Risque XSS de Vue v-html
L’interpolation Vue {{ comment }} ressemble à un billet cité derrière une vitre : les chevrons restent du texte. v-html demande au navigateur d’interpréter le billet comme du HTML. Si le balisage est contrôlé par un utilisateur, le navigateur peut le traiter comme une structure ou un contenu actif et créer un risque XSS.
<p v-html="comment"></p>
// comment est interprété comme du balisage réel
<script setup>
import { computed } from 'vue'
import DOMPurify from 'dompurify'
const props = defineProps({ comment: String })
const safeComment = computed(() =>
DOMPurify.sanitize(props.comment ?? '', {
ALLOWED_TAGS: ['p', 'strong', 'em'],
ALLOWED_ATTR: []
})
)
</script>
<template>
<div v-html="safeComment"></div>
</template>
Assainir le HTML riche avant v-html
Préférez l’interpolation Vue {{ }} lorsque le contenu doit rester du texte. Si une fonctionnalité exige vraiment du HTML riche fourni par les utilisateurs, assainissez-le avec une bibliothèque maintenue comme DOMPurify et une liste d’autorisation réduite ; liez à v-html uniquement le résultat assaini. Maintenez l’assainisseur à jour et testez la politique de balisage autorisé. L’assainissement réduit le risque sans rendre n’importe quel HTML sûr dans tous les contextes ; utilisez un iframe isolé si le contenu doit rester non fiable et actif. Vue ne compile pas le contenu de v-html comme un template Vue.
Auditer v-html et suivre le flux des données
Recherchez toutes les liaisons v-html. Pour chacune, identifiez la source, l’assainisseur et sa configuration, ainsi que les personnes pouvant voir le contenu rendu. Signalez les entrées directes, commentaires stockés, champs CMS et réponses d’API ; vérifiez que le texte ordinaire utilise l’interpolation.
grep -rn "v-html" --include="*.vue" .Questions fréquentes
Les deux contournent l’échappement normal du texte par le framework et insèrent du HTML dans le DOM. Utilisez un assainisseur maintenu si du HTML riche est indispensable et ne considérez pas le résultat assaini comme sûr dans tous les contextes.
Références
- Vue.js — Sécurité : contenu HTML
- DOMPurify — documentation de l’assainisseur HTML
- OWASP — prévention du Cross-Site Scripting
- flawopen.com — XSS en JavaScript