What is Content Security Policy (CSP)?
Learn what Content Security Policy (CSP) is, how it blocks XSS attacks with an allowlist of trusted sources, and key directives.
Expected Interview Answer
Content Security Policy (CSP) is an HTTP response header that tells the browser which sources of scripts, styles, images, and other resources are allowed to load on a page, drastically reducing the risk of cross-site scripting (XSS) attacks.
CSP works by declaring an allowlist of trusted sources per resource type — for example script-src 'self' means only scripts from the page’s own origin may execute. The browser enforces this policy at load time, blocking and reporting any resource that violates it, such as an injected inline script from an attacker. Directives exist for scripts, styles, images, fonts, connections (fetch/XHR/WebSocket), and frames, and a report-uri or report-to directive can log violations without necessarily blocking them during rollout. CSP is a defense-in-depth layer, not a replacement for proper output encoding and input sanitization.
- Significantly reduces the impact of XSS by blocking unauthorized script execution
- Limits data exfiltration by restricting allowed connection targets
- Prevents clickjacking when combined with frame-ancestors
- Provides violation reporting to detect attacks or misconfigurations
AI Mentor Explanation
Content Security Policy is like a stadium’s accreditation system that only lets vendors from an approved list set up stalls inside the ground. Anyone without a badge matching the approved list is turned away at the gate, no matter how legitimate they look. Security also logs anyone who tried to sneak in without accreditation. That allowlist-plus-enforcement-plus-logging model is exactly how CSP restricts which script and resource sources a browser will load.
Step-by-Step Explanation
Step 1
Define the policy
List allowed sources per directive, e.g. script-src 'self' https://trusted-cdn.com.
Step 2
Ship it as a header
Send Content-Security-Policy in the HTTP response, or a meta tag as a fallback.
Step 3
Test in report-only mode
Use Content-Security-Policy-Report-Only to log violations without blocking during rollout.
Step 4
Enforce and monitor
Switch to enforcing mode and keep monitoring the report endpoint for violations.
What Interviewer Expects
- Clear explanation of CSP as an allowlist of trusted resource sources
- Mention of it as an XSS mitigation, not a full XSS fix
- Knowledge of key directives: script-src, style-src, connect-src, frame-ancestors
- Awareness of report-only mode for safe rollout
Common Mistakes
- Believing CSP alone eliminates the need for input sanitization
- Using overly permissive policies like script-src * that defeat the purpose
- Forgetting frame-ancestors, missing clickjacking protection
- Deploying directly in enforcing mode without testing in report-only first
Best Answer (HR Friendly)
“Content Security Policy is a security rule the server sends to the browser saying exactly which sources of scripts and other resources are trusted. If an attacker tries to sneak in malicious code from somewhere not on that list, the browser simply refuses to run it, which is a strong extra layer of protection against attacks like cross-site scripting.”
Code Example
app.use((req, res, next) => {
res.setHeader(
"Content-Security-Policy",
[
"default-src 'self'",
"script-src 'self' https://trusted-cdn.com",
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data: https:",
"connect-src 'self' https://api.example.com",
"frame-ancestors 'none'",
"report-uri /csp-violation-report",
].join("; ")
);
next();
});Follow-up Questions
- How does CSP help mitigate cross-site scripting attacks?
- What is the difference between enforcing mode and report-only mode?
- How does the frame-ancestors directive prevent clickjacking?
- What are nonces and hashes used for in a script-src directive?
MCQ Practice
1. What is the primary purpose of Content Security Policy?
CSP declares an allowlist of trusted sources for scripts, styles, images, and other resources.
2. Which directive would you use to block a page from being embedded in an iframe on another site?
frame-ancestors controls which origins may embed the page in a frame, preventing clickjacking.
3. What does Content-Security-Policy-Report-Only do?
Report-only mode lets teams observe what would be blocked before enforcing the policy.
Flash Cards
What is CSP? — An HTTP header that restricts which sources of scripts, styles, and other resources a page may load.
What attack does CSP primarily mitigate? — Cross-site scripting (XSS).
What does frame-ancestors control? — Which origins are allowed to embed the page in an iframe, preventing clickjacking.
How do you test a CSP safely before enforcing it? — Deploy it with the Content-Security-Policy-Report-Only header first.