Content Security Policy dla aplikacji React

Content Security Policy (CSP) to nagłówek odpowiedzi HTTP informujący przeglądarkę, które źródła treści są zaufane. Dzięki dokładnemu określeniu, jakie skrypty, style, obrazy i czcionki mogą być ładowane, CSP zapobiega wykonywaniu wstrzykniętej złośliwej treści — nawet jeśli luka XSS pozwala atakującemu wstrzyknąć kod HTML do strony.

default-src 'self' ustawia wartość bazową: wszystkie typy zasobów (skrypty, style, obrazy, czcionki i ramki) mogą być ładowane wyłącznie z tego samego originu. script-src 'self' ogranicza ładowanie skryptów do tego samego originu, blokując skrypty z zewnętrznych CDN-ów, chyba że zostaną one jawnie wymienione. Te dwie dyrektywy razem stanowią podstawę restrykcyjnej polityki CSP.

eval() przekształca ciąg znaków w kod wykonywany w czasie działania — dokładnie tego potrzebują payloady XSS. CSP z script-src 'self' (bez 'unsafe-eval') blokuje eval() oraz powiązane funkcje, takie jak new Function() i setTimeout(string). Eliminuje to znaczną klasę sposobów wykonywania payloadów XSS.

'strict-dynamic' w script-src nadaje zaufanie skryptom ładowanym przez skrypty, którym już wcześniej zaufano. Umożliwia to wzorce dynamicznego ładowania skryptów używane przez bundlery bez konieczności dodawania do białej listy każdego adresu URL CDN. Zaufany skrypt może ładować kolejne skrypty, a te dziedziczą zaufanie.

Jeśli aplikacja potrzebuje konkretnego skryptu inline (na przykład fragmentu inicjalizującego analitykę), można obliczyć jego hash SHA-256 i dodać 'sha256-base64hash' do script-src. Wykonywane inline będą tylko skrypty zgodne z dokładnie tym hashem. Każdy skrypt wstrzyknięty przez atakującego będzie miał inny hash i zostanie zablokowany.

Nonce to kryptograficznie losowa wartość generowana przez serwer dla każdego żądania. Serwer dodaje nonce zarówno do znacznika skryptu (<script nonce="abc123">), jak i do nagłówka CSP (script-src 'nonce-abc123'). Wykonywane są tylko skrypty zawierające prawidłowy nonce. Atakujący nie mogą przewidzieć nonce, więc wstrzyknięte skrypty nie mogą go użyć.

CSP obsługuje raportowanie naruszeń za pomocą report-uri /csp-violation-endpoint lub nowszej dyrektywy report-to. Gdy przeglądarka blokuje zasób z powodu CSP, wysyła raport w formacie JSON do wskazanego endpointu. Monitorowanie tych raportów pomaga identyfikować zarówno uzasadnione problemy z konfiguracją, jak i aktywne próby ataku.

W Next.js należy dodać nagłówki CSP w middleware: utworzyć middleware.ts, wygenerować nonce, ustawić nagłówek Content-Security-Policy i przekazać nonce do strony za pomocą nagłówka odpowiedzi. Layout strony odczytuje nonce z nagłówka i stosuje go do wszystkich skryptów inline oraz znaczników style.

Content-Security-Policy-Report-Only to tryb testowy: przeglądarka niczego nie egzekwuje, ale wysyła raporty naruszeń dotyczące wszystkiego, co zostałoby zablokowane. Najpierw należy wdrożyć tryb Report-Only i usunąć wszystkie naruszenia, a następnie przełączyć się na egzekwowanie za pomocą nagłówka Content-Security-Policy, aby uniknąć awarii aplikacji.

Gdy CSP blokuje zasób, konsola Chrome DevTools wyświetla czerwony komunikat o błędzie, wskazując zablokowany adres URL i naruszoną dyrektywę. Komunikaty te są niezwykle pomocne podczas programowania i testowania. Każde naruszenie należy rozwiązać przez poprawienie polityki, przeniesienie zasobu do dozwolonego źródła albo użycie nonce/hash.

Praktyczna polityka CSP dla React SPA: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. frame-ancestors 'none' zapobiega również clickjackingowi, blokując osadzanie aplikacji w ramkach iframe.

Czego zapobiega script-src 'self' w Content Security Policy?

CSP to nagłówek HTTP określający zaufane źródła treści. default-src 'self' i script-src 'self' blokują zewnętrzne skrypty oraz eval. Skrypty inline są dozwalane za pomocą hashy lub nonce. 'strict-dynamic' obsługuje dynamiczne ładowanie skryptów. Przed włączeniem egzekwowania należy użyć Content-Security-Policy-Report-Only do testów. Next.js implementuje CSP za pomocą middleware. Konsola DevTools pokazuje naruszenia w czasie rzeczywistym.