Frontend Academy · leksjon

Content Security Policy: nonce og hash

Skriv en streng CSP med noncer for innebygde skript, hasher for kjente kodeutdrag og report-uri for å overvåke brudd i produksjon.

Leksjon 3 av 414 trinn

Content Security Policy: nonce og hash er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Oppsummering av CSP

CSP er en HTTP-header som angir hva nettleseren har lov til å laste inn – skript, stiler, bilder, skrifter, rammer og tilkoblinger. Forsvar i dybden: Selv om XSS kommer forbi filtrene Deres, stopper CSP ofte payloaden.

CSP-headerens oppbygning

Hvert direktiv viser hvilke kilder som er tillatt. 'self' betyr samme opphav. Det er også mulig å tillate bestemte URL-er.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  font-src 'self' https://fonts.gstatic.com;
  frame-ancestors 'none';
  base-uri 'self';

Vanlige direktiver

default-src: reserveverdi for alt. script-src: JavaScript. style-src: CSS. img-src: bilder. connect-src: fetch/XHR/WebSocket. font-src: skrifter. frame-ancestors: hvem som kan bygge inn nettstedet i en iframe (beskyttelse mot clickjacking).

'unsafe-inline' – det vanlige sikkerhetshullet

Mange nettsteder legger til 'unsafe-inline' for å tillate innebygde <script>-tagger og onclick-attributter. Dette undergraver hovedformålet med CSP – XSS-payloads kan kjøres innebygd. Erstatt det med nonces eller hasher.

Nonces – en engangsallowlist

Generer en tilfeldig nonce for hver forespørsel. Merk legitime innebygde skript med noncen. Nettleseren tillater bare skript med samsvarende noncer.

// Server (Express middleware):
import crypto from 'crypto';

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('base64');
  res.setHeader('Content-Security-Policy',
    `script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`
  );
  next();
});

// Template:
<script nonce="<%= nonce %>">window.config = {...};</script>

'strict-dynamic'

Kombiner nonce med 'strict-dynamic': Betrodde skript (de som har noncen) kan laste inn flere skript. Da trenger De ikke å liste opp URL-en til hver enkelt skriptkilde. Dette er dagens anbefalte praksis for CSP.

Hasher – en statisk allowlist

For kjente, uendrede innebygde skript (for eksempel når bygget Deres alltid genererer det samme oppstartsutdraget) beregner De SHA-256-hashen og legger den til som en hashkilde. Det er ikke nødvendig med en nonce per forespørsel.

// Hash of: console.log('hi');
Content-Security-Policy: script-src 'sha256-XwCNuB+/RUgPlAACI+yHrUKqUsm4zlpGV/Q8tEUx0Q4='

Hasher for innebygde stiler

Det samme trikset fungerer for innebygde <style>-tagger – beregn hashen deres og legg den til i style-src. Dette er bedre enn 'unsafe-inline' for CSS.

CSP i rapportmodus

Bruk Content-Security-Policy-Report-Only for å teste en policy uten å håndheve den. Brudd rapporteres til endepunktet Deres, men blokkerer ingenting. Dette er svært nyttig når CSP skal innføres trinnvis.

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

// /csp-violations receives POSTs like:
{
  "csp-report": {
    "document-uri": "https://example.com/",
    "violated-directive": "script-src 'self'",
    "blocked-uri": "https://evil.com/x.js"
  }
}

report-to (moderne)

report-to + Reporting-Endpoints er den moderne erstatningen for report-uri. De inneholder de samme dataene, men er mer strukturerte.

Reporting-Endpoints: csp="/csp-reports"
Content-Security-Policy: script-src 'self'; report-to csp

Integrasjoner med rammeverk

Next.js: angi CSP via middleware.ts eller headere i next.config.js. Nuxt: bruk modulen nuxt-security. Vite: konfigurer headere for utviklingsserveren; i produksjon konfigureres de via verten Deres (Vercel eller Netlify).

// next.config.js
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Content-Security-Policy',
        value: "default-src 'self'; script-src 'self' 'strict-dynamic'"
      }]
    }];
  }
};

Testing av CSP

Åpne DevTools → Console: CSP-brudd logges der. Bruk https://csp-evaluator.withgoogle.com/ for å evaluere policyen Deres. Bruk rapportmodus i produksjon først, og håndhev policyen etter at alle brudd er rettet.

Hurtigsjekk

Hvorfor regnes 'unsafe-inline' i et script-src-direktiv som en svakhet ved CSP?

Besvar den i den interaktive leksjonen

Oppsummering: Anbefalt praksis for CSP

Angi Content-Security-Policy-headeren med direktiver for hver ressurstype. Unngå 'unsafe-inline' – bruk nonces + 'strict-dynamic' eller SHA-hasher. Angi frame-ancestors 'none' (eller 'self'). Test først i rapportmodus. Send brudd til /csp-violations (eller bruk den moderne report-to). Rammeverk støtter CSP via middleware eller konfigurasjonsheadere.

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Content Security Policy: nonce og hash» gratis?

Ja – hele teksten i «Content Security Policy: nonce og hash» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Content Security Policy: nonce og hash»?

Skriv en streng CSP med noncer for innebygde skript, hasher for kjente kodeutdrag og report-uri for å overvåke brudd i produksjon. Du øver på Frontend 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 Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend 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 3 av 4.

Hvor lang tid tar leksjonen «Content Security Policy: nonce og hash»?

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

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