Sicherheitsrichtlinien und CSPs

1) Warum wir Sicherheitspolitik brauchen

Das moderne Frontend und die API hängen von einer Vielzahl von Quellen ab (CDN, Analytics, PSP, 3DS, Chats). Ohne strenge Richtlinien steigen die Risiken von XSS, Clickjacking, Datenlecks und Sitzungsdiebstahl. Sicherheitsrichtlinien schränken ein, was standardmäßig erlaubt ist, indem sie den Browser in ein Modell „nur explizit erlaubt“ (allow-list) übersetzen.

2) Grundpfeiler

CSP (Content Security Policy) ist ein zentrales „Menü“ der erlaubten Quellen und des JS/CSS/Media-Verhaltens.
Trusted Types - Schutz vor DOM-XSS auf Typenebene.
SRI (Subresource Integrity) - Kontrolle der Integrität von Skripten/Stilen.
COOP/COEP/CORP - rigide Isolierung von Kontexten und Ressourcen zwischen Quellen.
Fetch Metadata ('Sec-Fetch-') ist eine Server-basierte Lösung zum Filtern von Cross-Site-Anfragen.
CORS - Richtlinie für domänenübergreifenden API-Zugriff.
Klassische Überschriften: HSTS, 'X-Frame-Options '/' frame-ancestors', 'Referrer-Policy', 'Permissions-Policy', SameSite-Cookies.

3) CSP: Grundlagen und Prinzipien

3. 1 Richtlinien (Schlüssel)

„default-src“ ist der Standardwert für die übrigen Richtlinien.
„script-src“ - Quellen JS, nonce/hash, „strict-dynamic“, „report-sample“.
„style-src“ - CSS-Quellen; Minimierung der „unsafe-inline“.
`img-src`, `font-src`, `media-src`, `object-src` (обычно `none`).
„connect-src“ - Netzwerkanfragen (XHR/fetch/WebSocket).
„frame-src “/„ child-src“ - Frames von Drittanbietern (PSP, 3DS).
'frame-ancestors' - wer kann unsere Website einbinden (Anti-Clickjacking).
„base-uri“ - Verbot der Substitution von „<base>“.
'form-action' - wo Sie Formulare submitieren dürfen.
'upgrade-insecure-requests', 'block-all-mixed-content' ist ein Kampf gegen den HTTP/HTTPS-Mix.
„report-uri “/„ report-to“ - wo Verstöße weitergeleitet werden.

3. 2 Nonce и hash

Nonce-Ansatz: Generieren Sie für jede HTTP-Antwort eine Krypto-Zufallsvariable' nonce', fügen Sie inline-Skripten'<script nonce =""...>' und in' script-src 'nonce-... "hinzu.
Hash-Ansatz: Ein fester Hash des Inline-Inhalts. Geeignet für statische HTML, unbequem in der Dynamik.
'strict-dynamic': Vertrauen Sie nur Skripten, die mit einem „vertrauenswürdigen“ Skript geladen wurden (mit nonce/hash). Entfernt die Notwendigkeit, Zieldomänen beim dynamischen Laden aufzulisten, erfordert jedoch moderne Browser.

3. 3 Verbot „unsafe-“

Vermeiden Sie' unsafe-inline', 'unsafe-eval'. Wenn das Framework eval erfordert (z.B. source-map in dev), nur in dev einschließen.
Für Stile - verwenden Sie' nonce' oder 'hash', wenn möglich ohne Inlines.

3. 4 Beispiel eines strengen CSP (Combat Benchmark)

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-sample

4) Trusted Types (DOM-XSS)

Aktivieren Sie die Direktive: "Content-Security-Policy: require-trusted-types-for" script "; trusted-types app default`.
Erstellen Sie eine einzige Richtlinie im Code ('window. trustedTypes. createPolicy('app', { createHTML() {... } })`).
Unsichere Zuordnungen verbieten ('element. innerHTML =...`) без Trusted Types.
Integration mit Frameworks (React/Angular/Vue): Verwenden Sie sichere Rendering-APIs, vermeiden Sie gefährliche dangerouslySetInnerHTML.

5) SRI (CDN-Integrität)

Für externe'<script> '/' <link>' verwenden Sie 'integrity =“ sha256- „... crossorigin =“ anonymous“.
SRI ergänzt und ersetzt CSP nicht. Wenn Sie eine CDN-Version aktualisieren, aktualisieren Sie den Hash.

6) Clickjacking und Frames

Der moderne Weg ist 'frame-ancestors' (ersetzt die veralteten 'X-Frame-Optionen').