CSRF: SameSite-cookies og tokens
Forstå, hvordan Cross-Site Request Forgery udnytter cookies, brug SameSite=Strict/Lax til at forhindre det, og tilføj synkroniseringstokens for ekstra beskyttelse.
CSRF: SameSite-cookies og tokens er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 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 CSRF?
Forfalskning af forespørgsler på tværs af websteder: En angriber narrer en godkendt brugers browser til at sende en forespørgsel til dit websted. Browseren vedhæfter brugerens cookies — serveren tror, at det er en legitim forespørgsel fra brugeren.
Klassisk CSRF-angreb
Brugeren er logget ind på bank.com. Vedkommende besøger evil.com. evil.com sender en skjult formular til bank.com/transfer med angriberens kontonummer. Browseren sender automatisk sessionscookien fra bank.com. Serveren overfører pengene.
Tillidsproblemet
CSRF virker, fordi browsere automatisk inkluderer cookies i forespørgsler på tværs af oprindelser. Serveren kan ikke se, at forespørgslen kom fra et skadeligt websted, uden ekstra beskyttelse.
SameSite-cookies – den moderne løsning
Cookieattributten SameSite styrer, hvornår cookies sendes med forespørgsler på tværs af oprindelser. Strict: sendes aldrig på tværs af oprindelser. Lax (standard i Chrome): sendes kun ved navigation på øverste niveau med GET. None: sendes altid (skal også være Secure).
Set-Cookie: session=abc; HttpOnly; Secure; SameSite=LaxSameSite=Lax som standard
Chrome bruger som standard Lax for alle cookies, hvis SameSite ikke er angivet. Det blokerer de fleste CSRF-angreb — men du bør stadig angive det eksplicit.
SameSite=Strict for maksimal sikkerhed
Brug Strict til de mest følsomme cookies (administratorsessioner, banktransaktioner). Ulempen er, at brugeren ser ud til at være logget ud, når vedkommende kommer via et link fra et andet websted.
CSRF-tokens (synkroniseringsmønster)
Brug CSRF-tokens for at understøtte ældre browsere eller opnå ekstra sikkerhed. Serveren genererer et tilfældigt token, indlejrer det på siden og kræver det i hver forespørgsel, der ændrer tilstanden.
// Server embeds token in HTML or sets it as a non-HttpOnly cookie:
<meta name="csrf-token" content="a1b2c3...">
// Client reads token and sends in header:
const token = document.querySelector('meta[name=csrf-token]').content;
fetch('/transfer', {
method: 'POST',
headers: { 'X-CSRF-Token': token },
body: JSON.stringify({ amount: 100 })
});
// Server verifies the X-CSRF-Token header matches the user's sessionCookie med dobbelt indsendelse
Serveren sætter en CSRF-cookie (uden HttpOnly, så JavaScript kan læse den). Klienten læser den og sender værdien i et headerfelt. Serveren kontrollerer, at cookien stemmer overens med headerfeltet. En angriber kan ikke læse cookien på tværs af oprindelser og kan derfor ikke genskabe headerfeltet.
Hvorfor det virker
Angriberens evil.com kan ikke læse cookies fra bank.com (Same-Origin-politikken). Derfor kan angriberen ikke angive headeren X-CSRF-Token. Forespørgslen mislykkes ved serverens kontrol af tokenet.
CSRF i SPA'er med Bearer-tokens
Hvis du godkender med Authorization: Bearer <jwt>, der er gemt i hukommelsen (ikke i en cookie), gælder CSRF ikke — browsere sender ikke automatisk headere. Afvejningen er, at løsningen er mere sårbar over for XSS, fordi tokens, som JavaScript kan tilgå, kan stjæles.
Tricket med en brugerdefineret header
For API'er, der kun accepterer JSON med en brugerdefineret header (f.eks. X-Requested-With), sender browsere en forhåndsanmodning med OPTIONS — og medtager ikke cookies i forhåndsanmodningen. Det blokerer i praksis formularbaseret CSRF.
Idempotente over for tilstandsændrende endepunkter
CSRF påvirker primært forespørgsler, der ændrer tilstanden (POST, PUT, DELETE). GET-endepunkter bør være idempotente — de må ikke have bivirkninger — så en forfalsket GET ikke kan gøre skade.
Hurtigt tjek
Hvilken SameSite-cookieværdi forhindrer som standard, at cookies sendes med de fleste forespørgsler på tværs af websteder i moderne browsere?
Opsummering: Forebyggelse af CSRF
Angiv SameSite=Lax (eller Strict) for sessionscookies — det blokerer de fleste CSRF-angreb. Tilføj HttpOnly + Secure. Brug CSRF-tokens (synkroniseringsmønster eller cookie med dobbelt indsendelse) for ekstra beskyttelse. Bearer-tokens i headere undgår CSRF, men øger XSS-risikoen. Tricket med en brugerdefineret header tvinger en forhåndsanmodning. Sørg for, at GET-forespørgsler er idempotente.
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
Ofte stillede spørgsmål
Er lektionen “CSRF: SameSite-cookies og tokens” gratis?
Ja — hele teksten til “CSRF: SameSite-cookies og tokens” 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 “CSRF: SameSite-cookies og tokens”?
Forstå, hvordan Cross-Site Request Forgery udnytter cookies, brug SameSite=Strict/Lax til at forhindre det, og tilføj synkroniseringstokens for ekstra beskyttelse. 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 2 af 4.
Hvor lang tid tager lektionen “CSRF: SameSite-cookies og tokens”?
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