Was ist Content Security Policy (CSP) und wie verhindert man XSS?
Meistern Sie CSP Level 3: Richtliniensyntax, strikte Nonce-Implementierung, Hash-Verifikation und Zero-Trust-Sicherheit.
Web Protocols & Security Architecture Research
Was ist Content Security Policy (CSP) und wie verhindert man XSS?
TL;DR — Wichtigste Entwicklungs-Erkenntnisse
- CSP ist ein HTTP-Header, der einschränkt, von welchen Quellen Skripte, Styles und Inhalte geladen werden dürfen.
- Es dient als primäre Verteidigungslinie gegen Cross-Site-Scripting (XSS) und böswillige Dateninjektionen.
- Modernes CSP Level 3 setzt auf kryptographische Nonces und Hashes statt unsicherer Domain-Allowlists.
frame-ancestors 'none'löst das veralteteX-Frame-Optionsgegen Clickjacking ab.- Mit
Content-Security-Policy-Report-Onlykönnen Richtlinien im Live-Betrieb gefahrlos geprüft werden.
Kernkonzepte & Architektur
default-src
DirectivesThe fundamental fallback directive governing all unspecified resource types (scripts, images, fonts, styles).
Cryptographic Nonces
NoncesSingle-use random tokens generated per-request and passed in both the CSP header and `<script nonce="...">` tags.
strict-dynamic
ModernCSPCSP Level 3 directive allowing a trusted script with a valid nonce to load subsequent child scripts without domain allowlists.
frame-ancestors
ClickjackingReplaces legacy `X-Frame-Options` by declaring which parent origins are allowed to embed the page in iframes.
report-to / report-uri
TelemetrySpecifies an endpoint where the browser dispatches JSON violation reports whenever a policy breach is detected.
Wie funktioniert Was ist Content Security Policy (CSP) und wie verhindert man XSS??
When the browser receives an HTTP response containing a `Content-Security-Policy` header, its security manager parses the directive list into a memory policy tree. As the HTML parser encounters external resources or inline scripts, it queries the policy engine. If an inline script lacks a matching cryptographic nonce or SHA-256 hash, or if an image originates from an unlisted host, the browser blocks execution immediately and posts a JSON violation report.
Server Generates Nonce
For every incoming HTTP request, backend generates a high-entropy random base64 string.
const nonce = crypto.randomBytes(16).toString("base64");Header Injection
Server sends CSP header binding the nonce to script-src and setting default restrictions.
Content-Security-Policy: default-src 'self'; script-src 'nonce-${nonce}' 'strict-dynamic';HTML Template Rendering
Server attaches the identical nonce attribute to authorized script tags in HTML markup.
<script nonce="${nonce}" src="/app.js"></script>Browser Evaluation
Browser compares script tag nonce against header value; matches proceed, mismatches trigger violations.
Match: Execute script. Mismatch or Missing: Drop & Log Violation.Violation Reporting
Browser transmits structured JSON report to configured report-to endpoint for observability.
POST /csp-reports {"csp-report": {"blocked-uri": "eval", "violated-directive": "script-src"}}Wie implementiert man Was ist Content Security Policy (CSP) und wie verhindert man XSS? in der Praxis?
Google-Recommended Strict Nonce-Based CSP (Level 3)
httpContent-Security-Policy:
default-src 'self';
script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' 'strict-dynamic' https: 'unsafe-inline';
style-src 'self' 'unsafe-inline';
object-src 'none';
base-uri 'self';
frame-ancestors 'none';Engineering-Details: The modern gold standard: `'strict-dynamic'` trusts scripts loaded by nonced scripts; `'unsafe-inline'` is ignored by modern browsers when a nonce is present, providing backwards compatibility for legacy browsers.
Express.js Implementation using Helmet Middleware
javascriptimport express from "express";
import helmet from "helmet";
import crypto from "crypto";
const app = express();
// Generate cryptographic nonce per-request
app.use((req, res, next) => {
res.locals.cspNonce = crypto.randomBytes(16).toString("base64");
next();
});
app.use((req, res, next) => {
helmet.contentSecurityPolicy({
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.cspNonce}'`, "'strict-dynamic'"],
objectSrc: ["'none'"],
baseUri: ["'self'"],
upgradeInsecureRequests: [],
},
})(req, res, next);
});Engineering-Details: Generates a unique 128-bit cryptographic nonce on every request and injects it into both Helmet CSP and template response locals.
Wo und warum wird Was ist Content Security Policy (CSP) und wie verhindert man XSS? in der Produktion eingesetzt?
Preventing malicious third-party tag managers or browser extensions from exfiltrating medical records.
Locking down `connect-src` and `form-action` strictly to internal API domains so stolen data cannot be transmitted to external servers.
Stopping e-skimming attacks where compromised third-party scripts steal checkout credit card details.
Using strict CSP `script-src` and `connect-src` restrictions to block unauthorized external script injection at checkout steps.
Was sind häufige Fehler und Missverständnisse bei Was ist Content Security Policy (CSP) und wie verhindert man XSS??
Auswirkung: Allows any injected `<script>evil()</script>` payload to run, rendering CSP almost entirely ineffective against XSS.
Empfohlene Behebung: Migrate inline JavaScript to external files or supply cryptographic nonces on all script tags.
Auswirkung: Enables attackers to inject malicious Flash, Java, or PDF plugin objects that bypass script execution filters.
Empfohlene Behebung: Always include `object-src 'none';` explicitly in every CSP policy.
Auswirkung: Inadvertently breaks legitimate analytics, payment gateways, or customer widgets, causing severe site outages.
Empfohlene Behebung: Deploy first using `Content-Security-Policy-Report-Only` for 1-2 weeks; analyze violation logs before enforcing.
Welche Sicherheitsrisiken und Implikationen hat Was ist Content Security Policy (CSP) und wie verhindert man XSS??
DOM-Based Cross-Site Scripting (DOM XSS)
OWASP Top 10 Injection / CWE-79Schwachstelle: Application passes untrusted input into execution sinks like `eval()`, `setTimeout(string)`, or `new Function()`.
Base Tag Hijacking (Base-URI Manipulation)
CWE-444 Inconsistent InterpretationSchwachstelle: Attacker injects `<base href="https://attacker.com">`, forcing all relative script URLs to load from the attacker’s domain.
Wie behebt man Fehler bei Was ist Content Security Policy (CSP) und wie verhindert man XSS??
Fehlersymptome & Anzeichen: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'"
- Inline script tags (`<script>...</script>`) present in HTML without nonce or hash
- HTML event handlers (`onclick="..."`) used in markup
Fehlersymptome & Anzeichen: Refused to connect to "https://analytics.vendor.com" because it violates directive: "default-src 'self'"
- `connect-src` is missing from CSP and fell back to `default-src 'self'`
Häufig gestellte Fragen zu Was ist Content Security Policy (CSP) und wie verhindert man XSS?
Q:What is the difference between CSP Nonce and CSP Hash?
Nonces require a dynamic backend server (Node, Go, Python) to generate fresh random values on each page load. Static sites (JAMstack, Astro static builds) use SHA-256 hashes (`'sha256-xyz'`) calculated from the script contents.
Q:Does Content Security Policy completely eliminate XSS?
CSP cannot prevent logic flaws or server-side template injection before HTML generation, but it stops the attacker’s payload from executing in the browser or contacting outside command-and-control servers.
Verwandte Entwickler-Werkzeuge
100% Client-seitige Ausführung
Glossar
References & Primary Sources
Every source below directly substantiates technical statements and protocol behaviors explained in Was ist Content Security Policy (CSP) und wie verhindert man XSS?. Curious-Techie prioritizes official Internet standards (IETF RFCs, W3C Recommendations, WHATWG specifications) and established security bodies (OWASP, NIST). Zero sponsored or secondary links.
- [1]W3CPrimary SpecificationW3C CSP Level 3 • Section 2 & 3Verified Primary SourceTechnical Claim Supported:
Normative specification for Content-Security-Policy HTTP headers, directive fallback inheritance from default-src, and cryptographic nonce/hash-based script execution.
“A server can specify a policy for a resource that the user agent will enforce, restricting the execution of scripts, stylesheets, and embedded frames.”Source URI: https://www.w3.org/TR/CSP3/ - [2]OWASPAuthoritative Security StandardOWASP Cheat Sheet Series • Strict CSP & XSS MitigationVerified Primary SourceTechnical Claim Supported:
Authoritative security guide for strict CSP deployment using per-request cryptographic nonces and strict-dynamic to neutralize Reflected and Stored XSS.
- [3]MDNDeveloper Authority (MDN)MDN Web Docs • CSP Directives ReferenceVerified Primary SourceTechnical Claim Supported:
Reference documentation for browser implementation of CSP directives including script-src, frame-ancestors, object-src, and report-to.
Zugehöriges technisches Ökosystem & nächste Schritte
Verwandte Entwickler-Werkzeuge
Verwandte Fachartikel
Verwandte technische Fragen
Entwickler-Spezifikationen & Referenzen
Weiterlernen
Content Security Policy (CSP) Hands-On Lab
Step into the interactive lab to defend a vulnerable DOM application with strict CSP nonces.