Vue Academy · Lektion

Forebyggelse af XSS i Vue

Vues automatiske escaping, farerne ved v-html, DOMPurify til sanitering og trusted types

Lektion 1 af 413 trin

Forebyggelse af XSS i Vue er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad er XSS

Cross-Site Scripting (XSS) er et angreb, hvor et skadeligt script indsættes på en side og kører i en anden brugers browser. Det kan stjæle cookies, tokens og data. Vue beskytter dig som standard, men nogle få mønstre åbner døren igen.

Vue HTML-escaper automatisk interpolation

Tekst i mustache-interpolation {{ }} HTML-escapes automatisk. En brugerstreng, der indeholder tags, gengives som harmløs tekst i stedet for at blive kørt.

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

Attributbinding er også sikker

Binding med v-bind / :attr HTML-escaper også værdier, så indsatte anførselstegn ikke kan bryde ud af en attribut og indsætte hændelseshandlere.

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

Faren ved v-html

v-html angiver innerHTML direkte. Det escaper ikke, så al markup – herunder scripts og hændelseshandlere – gengives som aktiv HTML.

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

Sådan udnyttes v-html

Selv uden et script-tag kan angriberens HTML køre kode via attributter til hændelseshandlere eller payloads som img onerror.

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

Regel: Brug aldrig v-html til brugerinput

Den enkleste regel er aldrig at sende indhold, du ikke har tillid til, til v-html. Brug almindelig interpolation, som HTML-escaper, når kilden styres af brugeren.

Når du skal gengive HTML

Nogle gange har du reelt brug for formateret HTML, f.eks. indhold fra et CMS eller markdown-output. I så fald skal du rense HTML'en, før du binder den.

Rensning med DOMPurify

DOMPurify fjerner farlige tags og attributter, samtidig med at sikker formatering bevares. Installér det, og rens indholdet før v-html.

npm install dompurify

Rens, og bind derefter

Kør værdien gennem DOMPurify.sanitize i en computed, og bind derefter det rensede resultat.

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

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

Konfiguration af tilladte tags

Du kan begrænse tilladelseslisten, så kun de tags, du forventer, overlever rensningen.

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

Andre kilder, du ikke må stole på

Du må heller ikke stole på URL'er: et javascript:-href i et bundet link kan køre kode. Valider eller rens href-attributter, og opbyg aldrig dynamiske <script>-kilder ud fra brugerdata.

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

Hurtigt tjek

Du skal gengive HTML, som en bruger har indsendt. Hvad er den sikre fremgangsmåde?

Besvar den i den interaktive lektion

Opsummering

Vue HTML-escaper {{ }}-interpolation og attributbindinger automatisk, hvilket neutraliserer de fleste XSS-angreb. Den farlige undtagelse er v-html, som gengiver rå HTML. Send aldrig brugerinput direkte til den; når du har brug for formateret HTML, skal du først rense den med DOMPurify og også være på vagt over for URL'er fra brugere.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Forebyggelse af XSS i Vue” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Forebyggelse af XSS i Vue”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Forebyggelse af XSS i Vue”?

Vues automatiske escaping, farerne ved v-html, DOMPurify til sanitering og trusted types Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Forebyggelse af XSS i Vue”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Vue Academy