Vue Academy · Lektion

Content Security Policy (CSP) med Vue

CSP-headers, skript med nonce, hashbaserade policyer och CSP-konfiguration i Vite.

Lektion 2 av 413 steg

Content Security Policy (CSP) med Vue är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad är CSP

Content Security Policy är ett HTTP-svarshuvud som talar om för webbläsaren vilka källor för skript, stilmallar, bilder och anslutningar som är tillåtna. Det är en stark andra försvarslinje mot XSS – även injicerade skript blockeras om deras källa inte är tillåten.

Headern

CSP levereras via svarshuvudet Content-Security-Policy. Varje direktiv listar tillåtna källor för en viss resurstyp.

Content-Security-Policy: default-src 'self'; script-src 'self';

Begränsa skriptkällor

Direktivet script-src styr var skript får laddas från. Om ni begränsar det till 'self' blockeras inline-skript och skript från tredje part som en angripare kan tänkas injicera.

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

Undvik unsafe-inline

'unsafe-inline' tillåter inline-skript och attribut för händelsehanterare – exakt det som XSS utnyttjar. En stark policy utelämnar det, så att injicerad inline-kod inte körs.

Undvik unsafe-eval

'unsafe-eval' tillåter eval och Function-konstruktorn. Vue 3:s runtime-version behöver det inte (mallar förkompileras), så ni kan och bör utelämna det.

Inline-skript med nonce

När ni verkligen behöver ett inline-skript ska ni ge det en slumpmässig nonce per svar och ange samma nonce i policyn. Endast skript som har rätt nonce körs.

<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // allowed because nonce matches
</script>

Varför nonce är bättre än unsafe-inline

En nonce är oförutsägbar och ändras för varje svar, så en angripare som injicerar ett skript kan inte gissa den. Det gör att inline-skript fungerar utan den generella risken med unsafe-inline.

CSP och Vue-stilar

Vue och många UI-bibliotek injicerar stilmallar vid körning. Tillåt dem antingen via style-src med en nonce eller hash, eller extrahera CSS till filer så att style-src 'self' räcker.

Content-Security-Policy: style-src 'self';

Vite CSP nonce-plugin för utveckling

Vites utvecklingsserver injicerar skript, vilket kan krocka med en strikt CSP. Ett CSP nonce-plugin lägger till en matchande nonce på taggar som Vite injicerar under utvecklingen.

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  html: {
    cspNonce: "DEV_NONCE"
  }
});

connect-src för API:er

Begränsa var appen får hämta data med connect-src, så att injicerad kod inte kan exfiltrera data till en domän som angriparen kontrollerar.

Content-Security-Policy: connect-src 'self' https://api.example.com;

Report-Only-läge

Inför CSP säkert med Content-Security-Policy-Report-Only, som rapporterar överträdelser utan att blockera dem. Då kan ni finjustera policyn innan den verkställs.

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

Snabb kontroll

Vilket värde för ett CSP-direktiv bör ni undvika för att hålla XSS-skyddet starkt?

Besvara frågan i den interaktiva lektionen

Sammanfattning

CSP är ett HTTP-huvud som begränsar tillåtna källor för skript, stilmallar och anslutningar, och blockerar injicerad kod även om XSS slinker igenom. Undvik unsafe-inline och unsafe-eval; använd nonce-värden per svar för nödvändiga inline-skript och ett Vite CSP nonce-plugin under utvecklingen. Börja i Report-Only-läge innan policyn verkställs.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Content Security Policy (CSP) med Vue” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Content Security Policy (CSP) med Vue”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Content Security Policy (CSP) med Vue”?

CSP-headers, skript med nonce, hashbaserade policyer och CSP-konfiguration i Vite. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Content Security Policy (CSP) med Vue”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vue Academy