5 exercises — CSP (Content-Security-Policy), HSTS (Strict-Transport-Security), X-Frame-Options / clickjacking, CORS preflight, and X-Content-Type-Options / MIME sniffing.
0 / 5 completed
1 / 5
What does Content-Security-Policy (CSP) do?
Content-Security-Policy (CSP) vocabulary:
CSP is an HTTP response header that tells the browser which content sources are trusted. The browser enforces these rules, blocking anything not explicitly allowed.
Why CSP matters — XSS prevention: Cross-Site Scripting (XSS) injects malicious scripts into a page. CSP mitigates XSS by: • Blocking inline scripts (<script>alert(1)</script>) unless a nonce or hash is used • Blocking scripts from unauthorized origins (e.g. an attacker's CDN) • Blocking eval() and similar dynamic code execution
Key CSP directives: • default-src — fallback for all resource types • script-src — allowed script sources • style-src — allowed stylesheet sources • img-src — allowed image sources • connect-src — allowed fetch/XHR/WebSocket targets • frame-ancestors — which origins can embed this page in an iframe (replaces X-Frame-Options)
Example header: Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123'; img-src *
Vocabulary: • nonce — a random per-request token added to allowed inline scripts: script-src 'nonce-xyz' • strict-dynamic — allows scripts loaded by a trusted script to run (useful for bundlers) • report-uri / report-to — endpoint that receives JSON reports of CSP violations • Content-Security-Policy-Report-Only — monitor mode: reports violations but does not block (for testing)
2 / 5
What does HSTS (Strict-Transport-Security) enforce?
HSTS (HTTP Strict Transport Security) vocabulary:
HSTS instructs the browser to never connect to this domain over plain HTTP — even if the user types http:// or follows an HTTP link. The browser silently upgrades to HTTPS internally (before making a network request).
Directives: • max-age — how long (seconds) the browser remembers to use HTTPS. Minimum 1 year (31536000) for preload. • includeSubDomains — applies to all subdomains too • preload — request inclusion in browser HSTS preload lists (Chrome, Firefox, Safari hardcode known HSTS domains — no first visit required)
Attack it prevents — SSL stripping: Without HSTS, an attacker between the user and server can intercept the initial HTTP request and downgrade the connection before HTTPS is established. HSTS prevents this because the browser never sends the HTTP request at all.
Vocabulary: • HSTS preload list — list of domains hardcoded in browsers as HTTPS-only; submitted at hstspreload.org • SSL stripping — MITM attack that downgrades HTTPS to HTTP • TOFU (Trust On First Use) — HSTS without preload only works after the first HTTPS visit; preload eliminates this vulnerability • 307 Internal Redirect — how Chrome signals HSTS enforcement in DevTools
3 / 5
What attack does X-Frame-Options: DENY prevent?
X-Frame-Options and clickjacking vocabulary:
Clickjacking attack: An attacker embeds your legitimate page in a transparent iframe over their own page. The user sees the attacker's page but clicks interact with your invisible page underneath — unknowingly triggering actions (transfers, settings changes, likes, purchases).
X-Frame-Options values: • DENY — the page cannot be embedded in any iframe, regardless of origin • SAMEORIGIN — the page can only be embedded by the same origin • ALLOW-FROM uri — deprecated; limited browser support
Modern replacement — CSP frame-ancestors: Content-Security-Policy: frame-ancestors 'none' (equivalent to DENY) Content-Security-Policy: frame-ancestors 'self' (equivalent to SAMEORIGIN) frame-ancestors is more flexible (multiple origins, wildcards) and is preferred in modern security headers.
Vocabulary: • clickjacking — UI redressing attack using iframes • iframe sandboxing — <iframe sandbox> attribute restricts what the embedded page can do • frame-ancestors — CSP directive that supersedes X-Frame-Options • opacity: 0 — classic clickjacking technique: transparent iframe positioned over bait content
4 / 5
What is a CORS preflight request?
CORS (Cross-Origin Resource Sharing) vocabulary:
Same-origin policy: Browsers block JavaScript from making requests to a different origin (protocol + host + port). CORS is the mechanism that allows servers to opt in to cross-origin requests.
Simple vs. non-simple requests: • Simple request — GET/POST with basic headers; browser sends it directly with an Origin header • Non-simple (preflighted) request — uses PUT/DELETE/PATCH, custom headers, or non-simple Content-Type; browser sends a preflight first
Preflight flow: 1. Browser sends OPTIONS request with Access-Control-Request-Method and Access-Control-Request-Headers 2. Server responds with Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 3. If allowed, browser sends the actual request
Key CORS headers: • Access-Control-Allow-Origin — which origins may access the resource (* or specific origin) • Access-Control-Allow-Credentials — whether cookies/auth headers may be sent (true; requires specific origin, not *) • Access-Control-Max-Age — how long the browser can cache the preflight result • Access-Control-Expose-Headers — which response headers JavaScript may access
Vocabulary: • origin — scheme + host + port (e.g. https://example.com:443) • CORS error — browser blocked the response because the server did not include the right CORS headers • wildcard origin — * allows any origin but cannot be combined with credentials
5 / 5
What does nosniff in X-Content-Type-Options: nosniff do?
X-Content-Type-Options vocabulary:
MIME sniffing (content sniffing): Browsers historically tried to "guess" the content type of a response if the Content-Type header was absent or seemed wrong. This was intended to fix misconfigured servers, but created a security vulnerability.
The attack — MIME confusion: If a user can upload a file that will be served as text/plain but the browser sniffs it as text/html or application/javascript, an attacker can upload a script disguised as an image or text file, and the browser will execute it.
X-Content-Type-Options: nosniff tells the browser: • For scripts: only execute if Content-Type is a JavaScript MIME type • For stylesheets: only apply if Content-Type is a CSS MIME type • Do NOT try to sniff/guess the type
Example scenario prevented: Attacker uploads evil.jpg containing <script>steal()</script>. Without nosniff, the browser might execute it. With nosniff, the browser refuses to execute a resource served as image/jpeg as a script.
Vocabulary: • MIME type — media type identifier: text/html, application/javascript, image/png • content sniffing — browser examining response body to guess its type • MIME confusion attack — exploiting MIME sniffing to execute content as a different type • nosniff — the only valid value for this header