Polityka bezpieczeństwa i CSP
1) Dlaczego potrzebujemy polityki bezpieczeństwa
Nowoczesny frontend i API zależą od wielu źródeł (CDN, analityka, PSP, 3DS, czaty). Bez trudnych zasad zwiększa się ryzyko związane z XSS, kliknięciem, wyciekami danych i porwaniem sesji. Zasady zabezpieczeń ograniczają to, co jest domyślnie dozwolone, przenosząc przeglądarkę do modelu listy zezwoleń.
2) Filary podstawowe
CSP (Content Security Policy) jest scentralizowanym „menu” dozwolonych źródeł i zachowań JS/CSS/media.
Zaufane typy - Ochrona na poziomie typu przed DOM-XSS.
SRI (Subresource Integrity) - kontrola integralności skryptów/stylów.
COOP/COEP/CORP - sztywna izolacja kontekstów i zasobów między źródłami.
Fetch Metadane ('Sec-Fetch') jest rozwiązaniem serwera do filtrowania żądań cross-site.
CORS - zasady dostępu do interfejsów API w różnych domenach.
Tytuły klasyczne: HSTS, „X-Frame-Options ”/„ frame-ancestors”, „Referrer-Policy”, „Permissions-Policy”, „ Site-cookies”.
3) CSP: podstawy i zasady
3. 1 Dyrektywy (klucz)
"default-src' - domyślnie dla innych dyrektyw.
"script-src' - źródła JS, nonce/hash," strict-dynamic "," report-sample ".
"styl-src' - źródła CSS; zminimalizować 'unsafe-inline'.
"img-src'," font-src', "media-src", "object-src' (zwykle" bez ").
"connnect-src' - żądania sieciowe (XHR/fetch/WebSocket).
„frame-src'/” child-src' - ramy zewnętrzne (PSP, 3DS).
„frame-przodkowie” - kto może osadzić naszą stronę (anty-clickjacking).
„base-uri” - zakazać zastępowania „<base>”.
„forma działania” - w przypadku gdy zezwala się na składanie formularzy.
„upgrade-insecure-requests”, „block-all-mixed-content” - zwalczanie mieszanki HTTP/HTTPS.
„report-uri ”/„ raport-to” - gdzie wysyłać naruszenia.
3. 2 Nonce dla skryptu (hash)
Podejście Nonce: wygenerować krypto-losowe 'nonce' dla każdej odpowiedzi HTTP, dodać '<script nonce ='... '>' do skryptów inline i 'script-src' nonce-... "
Podejście hash: stałe hash zawartości inline. Nadaje się do statycznego HTML, niewygodne dla dynamiki.
'strict-dynamic': zaufać tylko skryptom załadowanym przez skrypt 'zaufany' (z nonce/hash). Usuwa potrzebę listy domen docelowych podczas dynamicznego uruchamiania, ale wymaga nowoczesnych przeglądarek.
3. 3 Zakaz „niebezpiecznych”
Unikać „niebezpiecznych inline”, „niebezpiecznych-eval”. Jeśli ramy wymagają eval (na przykład mapa źródłowa w dev), zawierają tylko na dev.
Dla stylów - użyj 'nonce' lub 'hash', jeśli to możliwe bez inline.
3. 4 Przykład ścisłej CSP (punkt bitwy)
Content-Security-Policy:
default-src 'none';
base-uri 'self';
object-src 'none';
script-src 'self' 'nonce-{RANDOM}' 'strict-dynamic' https://www. googletagmanager. com;
style-src 'self' 'nonce-{RANDOM}';
img-src 'self' data: https://images. example-cdn. com;
font-src 'self' https://fonts. gstatic. com;
connect-src 'self' https://api. example. com wss://ws. example. com;
frame-src https://3ds. psp. com https://pay. psp. com;
frame-ancestors 'none';
form-action 'self' https://pay. psp. com;
upgrade-insecure-requests;
report-to csp-endpoint; report-sample4) Zaufane typy (DOM-XSS)
włączenie dyrektywy: „Treść-polityka bezpieczeństwa: wymagać zaufanych typów” dla „skryptu”; domyślnie aplikacja typu zaufanego '.
Utwórz jedną politykę w kodzie ('window. zaufanych typów. • Polityka ('app', {, HTML () {...}) ').
Zakazać niepewnych zadań ('element. innerHTML =... ') mesh, „Trusted Types”.
Integracja ramowa (React/Angular/Vue): używać bezpiecznych API renderujących, unikać niebezpiecznego niebezpieczeństwa SetInnerHTML.
5) SRI (Integralność CDN)
Dla zewnętrznego '<script> '/' <link>' użyj 'integrity =' sha256-... „crossorigin =” anonim'.
Suplementy SRI, nie zastępuje, CSP. Podczas aktualizacji wersji CDN zaktualizuj hash.
6) Kliknięcie i ramki
Nowoczesnym sposobem jest 'frame-przodkowie' (zastępuje przestarzałe 'X-Frame-Options').