Frontend Academy · Lekcja

Content Security Policy: nonce i hash

Napisze Pan/Pani ścisłą CSP z wartościami nonce dla skryptów wbudowanych, skrótami dla znanych fragmentów oraz report-uri do monitorowania naruszeń na produkcji.

Content Security Policy: nonce i hash to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Podsumowanie CSP

CSP to nagłówek HTTP określający, co przeglądarka może ładować — skrypty, style, obrazy, czcionki, ramki i połączenia. Jest to ochrona wielowarstwowa: nawet jeśli XSS przejdzie przez filtry, CSP często zatrzymuje payload.

Budowa nagłówka CSP

Każda dyrektywa zawiera listę dozwolonych źródeł. 'self' oznacza to samo źródło. Można również zezwolić na konkretne adresy URL.

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';

Typowe dyrektywy

default-src: wartość zastępcza dla wszystkiego. script-src: JavaScript. style-src: CSS. img-src: obrazy. connect-src: fetch/XHR/WebSocket. font-src: czcionki. frame-ancestors: określa, kto może osadzać Państwa witrynę w elemencie iframe (ochrona przed clickjackingiem).

'unsafe-inline' — częsta luka

Wiele witryn dodaje 'unsafe-inline', aby zezwolić na znaczniki <script> umieszczone bezpośrednio w kodzie oraz atrybuty onclick. Niweczy to główny cel CSP — payloady XSS mogą być wykonywane bezpośrednio. Należy zastąpić je nonce lub hashami.

Nonce — jednorazowa lista dozwolonych

Dla każdego żądania należy wygenerować losowy nonce. Legalne skrypty umieszczone bezpośrednio w kodzie należy oznaczyć tym nonce. Przeglądarka zezwala wyłącznie na skrypty z pasującymi nonce.

// 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'

Nonce należy połączyć z 'strict-dynamic': zaufane skrypty (te oznaczone nonce) mogą ładować dodatkowe skrypty. Eliminuje to potrzebę umieszczania na liście adresu URL każdego źródła skryptu. Jest to obecnie najlepsza praktyka dotycząca CSP.

Hashy — statyczna lista dozwolonych

W przypadku znanych, niezmiennych skryptów umieszczonych bezpośrednio w kodzie (np. gdy kompilacja zawsze generuje ten sam fragment inicjalizujący) należy obliczyć dla nich SHA-256 i dodać go jako źródło oparte na hash. Nie jest wtedy potrzebny nonce generowany dla każdego żądania.

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

Hashy stylów umieszczonych bezpośrednio w kodzie

Tę samą metodę można zastosować do znaczników <style> umieszczonych bezpośrednio w kodzie — należy obliczyć ich hash i dodać go do style-src. W przypadku CSS jest to lepsze rozwiązanie niż 'unsafe-inline'.

Tryb raportowania CSP

Do testowania zasad bez ich egzekwowania należy użyć Content-Security-Policy-Report-Only. Naruszenia są zgłaszane do Państwa endpointu, ale niczego nie blokują. To świetny sposób na stopniowe wdrażanie CSP.

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 (nowoczesne rozwiązanie)

report-to + Reporting-Endpoints to nowoczesny zamiennik report-uri. Przekazują te same dane, ale w bardziej uporządkowanej strukturze.

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

Integracja z frameworkami

Next.js: CSP można ustawić za pomocą middleware.ts lub nagłówków w next.config.js. Nuxt: moduł nuxt-security. Vite: należy skonfigurować nagłówki serwera deweloperskiego, a w środowisku produkcyjnym — nagłówki w konfiguracji hosta (Vercel, Netlify).

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

Testowanie CSP

Otwórz DevTools → Console: naruszenia CSP są tam rejestrowane. Do oceny zasad można użyć https://csp-evaluator.withgoogle.com/. Najpierw należy użyć trybu Report-Only w środowisku produkcyjnym, a egzekwowanie włączyć dopiero po naprawieniu wszystkich naruszeń.

Szybkie sprawdzenie

Dlaczego 'unsafe-inline' w dyrektywie script-src jest uznawane za słabość CSP?

Podsumowanie: najlepsze praktyki CSP

Należy ustawić nagłówek Content-Security-Policy z dyrektywami dla poszczególnych typów zasobów. Należy unikać 'unsafe-inline' — zamiast tego używać nonce + 'strict-dynamic' lub hashy SHA. Należy ustawić frame-ancestors 'none' (lub 'self'). Najpierw należy testować w trybie Report-Only. Naruszenia należy wysyłać do /csp-violations (lub użyć nowoczesnego report-to). Frameworki obsługują CSP za pomocą middleware lub nagłówków konfiguracyjnych.

Często zadawane pytania

Czy lekcja „Content Security Policy: nonce i hash” jest bezpłatna?

Tak — pełny tekst „Content Security Policy: nonce i hash” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Content Security Policy: nonce i hash”?

Napisze Pan/Pani ścisłą CSP z wartościami nonce dla skryptów wbudowanych, skrótami dla znanych fragmentów oraz report-uri do monitorowania naruszeń na produkcji. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Content Security Policy: nonce i hash”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Zapobieganie XSS: kodowanie danych wyjściowych i CSP
CSRF: pliki cookie SameSite i tokeny
Content Security Policy: nonce i hash
Przepływy OAuth po stronie frontendu

← Powrót do Frontend Academy