Vue Academy · leksjon

Forebygging av XSS i Vue

Vues automatiske escaping, farene ved v-html, DOMPurify for sanitering og Trusted Types.

Leksjon 1 av 413 trinn

Forebygging av XSS i Vue er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva er XSS

Cross-Site Scripting (XSS) er et angrep der et ondsinnet skript injiseres på en side og kjøres i en annen brukers nettleser. Det kan stjele cookies, tokens og data. Vue beskytter deg som standard, men noen få mønstre åpner døren igjen.

Vue gjør automatisk escaping av interpolasjon

Tekst i mustache-interpolasjon {{ }} blir automatisk HTML-escapet. En brukerstreng som inneholder tagger, gjengis som ufarlig tekst i stedet for å kjøres.

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

Attributtbinding er også trygt

Binding med v-bind / :attr escaper også verdier, slik at injiserte anførselstegn ikke kan bryte ut av et attributt og injisere hendelsesbehandlere.

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

Faren ved v-html

v-html angir innerHTML direkte. Det foretar ikke escaping, så all markering – inkludert skript og hendelsesbehandlere – gjengis som aktiv HTML.

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

Slik utnyttes v-html

Selv uten en script-tag kan angriperens HTML kjøre kode via attributter for hendelsesbehandlere eller img onerror-payloader.

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

Regel: Aldri v-html-inndata fra brukere

Den enkleste regelen er å aldri sende innhold du ikke stoler på til v-html. Bruk vanlig interpolasjon, som foretar escaping, når kilden er brukerstyrt.

Når HTML må vises

Noen ganger trenger du faktisk rik HTML (innhold fra et CMS eller Markdown-utdata). I så fall må du sanitere HTML-en før du binder den.

Sanitering med DOMPurify

DOMPurify fjerner farlige tagger og attributter, samtidig som trygg formatering beholdes. Installer det og saniter HTML-en før du bruker v-html.

npm install dompurify

Sanitér, og bind deretter

Kjør verdien gjennom DOMPurify.sanitize i en computed, og bind deretter det rensede resultatet.

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

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

Konfigurer tillatte tagger

Du kan begrense tillatelseslisten slik at bare taggene du forventer, overlever saniteringen.

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

Andre kilder du ikke kan stole på

Stol heller ikke på URL-er: en javascript:-href i en bundet lenke kan kjøre kode. Valider eller saniter href-er, og bygg aldri dynamiske <script>-kilder fra brukerdata.

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

Hurtigsjekk

Du må vise HTML sendt inn av brukere. Hva er den sikre fremgangsmåten?

Besvar den i den interaktive leksjonen

Oppsummering

Vue foretar automatisk escaping av {{ }}-interpolasjon og attributtbindinger, noe som nøytraliserer det meste av XSS. Det farlige unntaket er v-html, som gjengir rå HTML. Send aldri brukerdata direkte til den; når rik HTML er nødvendig, saniterer du den først med DOMPurify og behandler også brukerleverte URL-er som upålitelige.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Forebygging av XSS i Vue» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Forebygging av XSS i Vue», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Forebygging av XSS i Vue»?

Vues automatiske escaping, farene ved v-html, DOMPurify for sanitering og Trusted Types. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Forebygging av XSS i Vue»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Vue Academy