What is CSP (Content Security Policy) and how does HTML interact with it?
Content Security Policy (CSP) in HTML
Content Security Policy (CSP) is a powerful security feature that helps prevent cross-site scripting (XSS), data injection, and other code-injection attacks. It works by telling the browser which resources (scripts, styles, images, etc.) are allowed to load and execute on a web page.
- 1
Defined via
<meta>or HTTP headers: You can declare a CSP inside the HTML<head>using<meta http-equiv="Content-Security-Policy">or more commonly via server-set HTTP headers. - 2
Restricts inline scripts/styles: By default, CSP blocks inline JavaScript (
<script>alert(1)</script>) and inline CSS unless explicitly allowed. - 3
Controls external resources: CSP can restrict which domains scripts, styles, fonts, images, and iframes can be loaded from.
- 4
Mitigates XSS: Even if an attacker injects malicious HTML/JS, a strict CSP prevents it from running by blocking inline code or unauthorized sources.
In short: CSP works alongside HTML by restricting what code and resources can run. It provides a strong defense against XSS and data injection attacks, but must be carefully configured to avoid breaking legitimate functionality.
Scenario Questions
0-2 years experience
- 1You need to add a CSP header to prevent inline scripts on a simple static page. How would you write the meta tag or HTTP header, and what changes would you make to the HTML?
- 2If a page you just built is blocked from loading an external stylesheet because of CSP, what steps would you take to fix it?
2-5 years experience
- 1Your team introduced a CSP that uses 'script-src' with a nonce, but a newly added third‑party widget stopped working. Walk me through how you'd debug the issue and what you might adjust.
- 2We have a mixed‑content page where some scripts are loaded via eval() and others via external URLs. The CSP is causing a failure. How would you decide which directives to modify, and what trade‑offs are involved?
5-8 years experience
- 1Our large SaaS product serves thousands of micro‑frontends, each with its own CSP requirements. How would you design a system to generate and enforce CSP headers consistently across services while allowing per‑team overrides?
- 2During a security audit you discover that CSP violation reports are overwhelming your logging pipeline. What architectural changes would you propose to make CSP reporting scalable and actionable?
8+ years experience
- 1The company is migrating a legacy monolith with dozens of inline event handlers to a strict CSP that disallows 'unsafe-inline'. How would you plan the migration across multiple squads, manage backward compatibility, and ensure minimal disruption?
- 2We need to support both CSP Level 2 and Level 3 browsers across a global product. What strategy would you use to maintain a single source of truth for policies while handling differing browser capabilities and future policy extensions?
Follow-up Questions
- Why is using a nonce generally safer than allowing 'unsafe-inline'?
- What impact does adding CSP have on page load performance and caching?
- How would you validate CSP changes before they reach production?