Frontend Academy · Lektion

Forebyggelse af XSS: output-encoding og CSP

Forstå reflekteret, gemt og DOM-baseret XSS, escap brugerbestemt output, undgå innerHTML med upålidelige data, og tilføj en Content Security Policy-header.

Lektion 1 af 414 trin

Forebyggelse af XSS: output-encoding og CSP er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er XSS?

Cross-Site Scripting opstår, når en angriber indsætter JavaScript, der kan køres, på din side. Browseren kører det med din oprindelses rettigheder — det kan stjæle cookies, kapre sessioner, ændre sidens udseende og omdirigere til malware.

Tre varianter af XSS

Lagret: Et skadeligt script gemmes i databasen og leveres til alle besøgende. Reflekteret: Input sendes tilbage i svaret (?q=<script>...). DOM-baseret: JavaScript på klientsiden skriver data, som ikke er til at stole på, ind i DOM'en.

Grundårsagen: innerHTML med data, der ikke er til at stole på

Brug af innerHTML (eller v-html og dangerouslySetInnerHTML) med brugerdefinerede strenge er den største XSS-angrebsvektor.

// BAD: user input rendered as HTML
el.innerHTML = userComment;  // attacker submits <img onerror=alert(1)>

// Vue equivalent:
<div v-html="userComment"></div>  // same bug

// React equivalent:
<div dangerouslySetInnerHTML={{ __html: userComment }} />  // same bug

Kodning af resultatet (det sikre standardvalg)

Behandl strenge, der ikke er til at stole på, som tekst, ikke som HTML. React, Vue, Angular og Svelte gør alle dette som standard i {value}-interpolation.

// SAFE: text content, not HTML
el.textContent = userComment;  // <script> shows as literal text

// React (auto-escaped):
<div>{userComment}</div>

// Vue (auto-escaped):
<div>{{ userComment }}</div>

Sanering, når du skal gengive HTML

Hvis du reelt har brug for at gengive bruger-HTML (editorer til formateret tekst), skal du sanere det med DOMPurify — skriv aldrig din egen sanering med regulære udtryk.

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(userHtml);
el.innerHTML = clean; // strips <script>, on* handlers, dangerous URLs

Validering af URL'er

Brugerdefinerede URL'er i href eller src kan udløse XSS via javascript:-skemaer.

// BAD:
<a href={userUrl}>Click</a>
// attacker submits: javascript:alert(1)

// GOOD: whitelist protocols:
function safeUrl(url) {
  if (!/^https?:\/\//.test(url) && !url.startsWith('/')) return '#';
  return url;
}

Content Security Policy (CSP)

CSP er en HTTP-svarheader, der fortæller browseren, hvilke kilder til scripts, typografier, billeder osv. der er tilladt. Selv hvis en angriber indsætter et script, nægter browseren at køre det.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.trusted.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:

Stram CSP med noncer

Brug en nonce pr. forespørgsel til inline-scripts, du selv kontrollerer. Scripts, som angriberen har indsat, har ikke den matchende nonce.

// Server generates a random nonce per request:
const nonce = crypto.randomBytes(16).toString('base64');
res.setHeader('Content-Security-Policy', `script-src 'nonce-${nonce}' 'strict-dynamic'`);

// Inject into the HTML:
<script nonce="abc123">/* trusted inline code */</script>

HttpOnly- og Secure-cookies

Indstil sessionscookies med HttpOnly, så JavaScript ikke kan læse dem — selv hvis der sker XSS, kan angriberen ikke hente sessionstokenet.

Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Strict

Subresource Integrity (SRI)

Når du indlæser scripts fra tredjeparter via en CDN, skal du bruge SRI til at verificere, at indholdet stemmer overens med en hash. En kompromitteret CDN kan ikke levere et skadeligt script uden at få hashkontrollen til at fejle.

<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"
></script>

Trusted Types (eksperimentel)

Trusted Types er en browserfunktion (Chromium-baseret), der tvinger farlige indsættelsespunkter (innerHTML) til at modtage et Trusted Type-objekt — og dermed forhindrer, at strenge overhovedet indsættes.

Test for XSS

Prøv at indsætte <img src=x onerror=alert(1)> i hvert tekstfelt, hvis input bliver gengivet igen. Hvis du ser en alarm, har du en XSS-fejl. Brug værktøjer som OWASP ZAP til automatiserede scanninger.

Hurtigt tjek

Hvorfor er Reacts {userInput} som standard sikkert, mens dangerouslySetInnerHTML ikke er det?

Besvar den i den interaktive lektion

Opsummering: Forebyggelse af XSS

Brug som standard tekstgengivelse (Reacts {x} og Vues {{ x }} er sikre). Rens med DOMPurify, når du gengiver HTML. Tillad kun URL-protokoller på en hvidliste. En CSP-header (med nonces eller 'strict-dynamic') blokerer indsprøjtede scripts. HttpOnly-cookies forhindrer tyveri via JavaScript. Brug SRI-hashes til CDN-scripts. Test input med klassiske angrebsdata.

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: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Forebyggelse af XSS: output-encoding og CSP” gratis?

Ja — hele teksten til “Forebyggelse af XSS: output-encoding og CSP” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Forebyggelse af XSS: output-encoding og CSP”?

Forstå reflekteret, gemt og DOM-baseret XSS, escap brugerbestemt output, undgå innerHTML med upålidelige data, og tilføj en Content Security Policy-header. Du øver dig i Frontend 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å Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend 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: output-encoding og CSP”?

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 Frontend Academy-lektion?

Ja. Alle Frontend 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

Forebyggelse af XSS: output-encoding og CSP
CSRF: SameSite-cookies og tokens
Content Security Policy: nonce og hash
OAuth-flows fra frontend

← Tilbage til Frontend Academy