Vue Academy · Lektion

XSS-Schutz in Vue

Vues automatische Maskierung, Gefahren von v-html, DOMPurify zur Bereinigung und Trusted Types

Lektion 1 von 413 Schritte

XSS-Schutz in Vue ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist XSS

Cross-Site-Scripting (XSS) ist ein Angriff, bei dem ein schädliches Skript in eine Seite eingeschleust wird und im Browser eines anderen Benutzers ausgeführt wird. Dadurch können Cookies, Token und Daten gestohlen werden. Vue schützt Sie standardmäßig, doch einige Vorgehensweisen öffnen diese Tür erneut.

Vue maskiert Interpolationen automatisch

Text innerhalb einer Mustache-Interpolation {{ }} wird automatisch HTML-maskiert. Eine Benutzerzeichenfolge, die Tags enthält, wird als harmloser Text dargestellt und nicht ausgeführt.

<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->

Auch das Binden von Attributen ist sicher

Auch beim Binden mit v-bind / :attr werden Werte maskiert. Eingeschleuste Anführungszeichen können daher nicht aus einem Attribut ausbrechen und Handler einschleusen.

<div :title="userInput">Hover me</div>

Die Gefahr von v-html

v-html setzt innerHTML direkt. Dabei findet keine Maskierung statt, sodass jedes Markup – einschließlich Skripten und Event-Handlern – als aktives HTML gerendert wird.

<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>

Wie v-html ausgenutzt wird

Auch ohne ein Script-Tag kann HTML eines Angreifers Code über Attribute für Event-Handler oder Payloads wie img onerror ausführen.

// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";

Regel: Niemals Benutzereingaben mit v-html rendern

Die einfachste Regel lautet, niemals nicht vertrauenswürdige Inhalte an v-html zu übergeben. Verwenden Sie stattdessen eine normale Interpolation, die maskiert, sobald die Quelle von einem Benutzer kontrolliert wird.

Wenn Sie HTML rendern müssen

Manchmal benötigen Sie tatsächlich umfangreiches HTML, etwa den Inhalt eines CMS oder eine Markdown-Ausgabe. In diesem Fall müssen Sie das HTML vor dem Binden bereinigen.

Mit DOMPurify bereinigen

DOMPurify entfernt gefährliche Tags und Attribute und behält dabei sichere Formatierungen bei. Installieren Sie es und bereinigen Sie die Inhalte vor der Verwendung von v-html.

npm install dompurify

Erst bereinigen, dann binden

Verarbeiten Sie den Wert in einem computed mit DOMPurify.sanitize und binden Sie anschließend das bereinigte Ergebnis.

import DOMPurify from "dompurify";
import { computed } from "vue";

const safeHtml = computed(() =>
  DOMPurify.sanitize(props.rawHtml)
);
// template: <div v-html="safeHtml"></div>

Erlaubte Tags konfigurieren

Sie können die Allowlist einschränken, sodass nur die erwarteten Tags die Bereinigung überstehen.

DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
  ALLOWED_ATTR: ["href"]
});

Weitere Quellen, denen Sie nicht vertrauen sollten

Misstrauen Sie auch URLs: Ein javascript:-href in einem gebundenen Link kann Code ausführen. Validieren oder bereinigen Sie hrefs und erstellen Sie niemals dynamische <script>-Quellen aus Benutzerdaten.

// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";

Kurzer Check

Sie müssen von Benutzern übermitteltes HTML rendern. Was ist der sichere Ansatz?

Beantworte es in der interaktiven Lektion

Zusammenfassung

Vue maskiert {{ }}-Interpolationen und Attributbindungen automatisch und neutralisiert dadurch die meisten XSS-Angriffe. Die gefährliche Ausnahme ist v-html, das rohes HTML rendert. Übergeben Sie niemals direkt Benutzereingaben daran. Wenn umfangreiches HTML erforderlich ist, bereinigen Sie es zuerst mit DOMPurify und behandeln Sie auch vom Benutzer bereitgestellte URLs als nicht vertrauenswürdig.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 42
Lektionen: 156

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „XSS-Schutz in Vue“ kostenlos?

Ja — der vollständige Text von „XSS-Schutz in Vue“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „XSS-Schutz in Vue“?

Vues automatische Maskierung, Gefahren von v-html, DOMPurify zur Bereinigung und Trusted Types Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „XSS-Schutz in Vue“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy