flawopen.com/XSS in JavaScript/Vue v-html

XSS-Risiko durch Vue v-html

Referenzseite

Einfach erklärt

Vues Interpolation {{ comment }} ist wie ein Zettel hinter Glas: spitze Klammern bleiben sichtbarer Text. v-html weist den Browser an, den Zettel als HTML zu öffnen. Stammt das Markup vom Nutzer, kann der Browser es als Seitenstruktur oder aktiven Inhalt behandeln und dadurch ein XSS-Risiko schaffen.

VERWUNDBAR — rohes Nutzer-HTML

<p v-html="comment"></p>
// comment wird als echtes Markup interpretiert

BEHOBEN — bereinigtes Rich-HTML

<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>

Rich-HTML vor v-html bereinigen

Verwende Vues Interpolation {{ }}, wenn der Inhalt Text sein soll. Erfordert eine Funktion tatsächlich nutzergeschriebenes Rich-HTML, bereinige es mit einer gepflegten Bibliothek wie DOMPurify und einer engen Allowlist; binde an v-html nur das bereinigte Ergebnis. Halte den Sanitizer aktuell und teste die erlaubten Markup-Regeln. Bereinigung senkt das Risiko, macht beliebiges HTML aber nicht in jedem Kontext sicher. Nutze ein isoliertes iframe, wenn aktive Inhalte nicht vertrauenswürdig bleiben müssen. Vue kompiliert v-html-Inhalte nicht als Vue-Templates.

v-html prüfen und Datenfluss verfolgen

Suche nach allen v-html-Bindungen. Ermittle jeweils Quelle, Sanitizer und Konfiguration sowie alle Personen, die den gerenderten Inhalt sehen können. Markiere direkte Nutzereingaben, gespeicherte Kommentare, CMS-Felder und API-Antworten; prüfe, ob normaler Text interpoliert wird.

grep -rn "v-html" --include="*.vue" .

Häufige Fragen

Ist das dasselbe Risiko wie Reacts dangerouslySetInnerHTML?

Beide umgehen den normalen Text-Escaping-Pfad des Frameworks und fügen HTML ins DOM ein. Nutze für erforderliches Rich-HTML einen gepflegten Sanitizer und behandle dessen Ausgabe nicht als universell sicher.

Referenzen

Siehe auch Cross-Site-Scripting (XSS, CWE-79): Funktionsweise und Schutz in jeder Sprache — flawopen.com WKWebView: Nicht vertrauenswürdiges HTML? Reflected, Stored und DOM-basiertes XSS: Wo liegt der Unterschied? Sicherheitsrisiken von addJavascriptInterface unter Android Angular-XSS-Schutz: sichere Standards und Bypass-APIs XSS durch MIME-Sniffing: Content-Type und nosniff CSP und Output-Escaping: Brauchst du beides?