Content Security Policy (CSP)

What is a Content Security Policy?

A CSP is a browser-based web security standard that helps prevent cross-site scripting (XSS) and other client-side attacks, such as injected scripts running in the browser, mixed-content issues, fetch-hijacking, and malicious JavaScript. It works by restricting which content sources are allowed to load on a page.

CSP is delivered as a Content-Security-Policy HTTP response header, which browsers use to enforce these restrictions. It is widely used as an additional defense layer in modern web applications.

How does Content Security Policy work?

When a browser requests a page, the server can include a CSP header with the response. The browser reads this header and applies the listed directives before loading any resources or rendering the page.

Only resources that match the allowed sources in the policy are loaded, such as scripts or images from specific domains or from the same origin as the page. Other content, including injected scripts or resources from unlisted domains, is blocked.

CSP can also control whether a page is allowed to be framed by other sites, which helps reduce the risk of clickjacking.

Key components of Content Security Policy

A CSP is defined as a single policy containing one or more directives and their values. Directives describe what kind of behavior is being controlled, while their values define which sources or patterns are allowed.

Many deployments also use additional mechanisms such as numbers used once (nonces) and hashes for scripts. With these in place, the browser only runs scripts that include the correct nonce value or whose contents match the hash specified in the policy.

Reporting directives, such as report-to, tell the browser where to send CSP violation reports. These reports help identify misconfigurations or unexpected attempts to load content that the policy doesn’t allow.

Why is Content Security Policy important?

A well-configured CSP reduces the impact of common web vulnerabilities and improves overall web application security:

• Limiting the execution of injected scripts, as well as other active content, which makes many XSS and code-injection attacks harder to exploit.
• Constraining third-party resources, such as ads, analytics scripts, and embedded widgets, to trusted sources.
• Supporting privacy and compliance requirements, for example, by restricting third-party trackers and content scripts, reducing unintended data exposure, and helping align with data protection frameworks such as the General Data Protection Regulation (GDPR).
• Providing visibility through reporting; violation reports can reveal misconfigurations or unexpected changes in how resources are loaded.

Common Content Security Policy directives

Standard CSP directives include:

• default-src: Sets fallback rules for all content types.
• script-src: Defines allowed JavaScript sources.
• style-src: Controls stylesheet origins.
• img-src: Restricts image loading sources.
• frame-ancestors: Specifies which sites can embed the page.

These directives are combined into a single policy value and interpreted by the browser as part of CSP enforcement.

Common Content Security Policy challenges

CSPs can be difficult to configure and maintain. A strict policy might block essential content such as fonts, analytics scripts, or embedded videos, causing parts of a website to stop working until the policy is adjusted. Websites that depend on multiple third-party services may need frequent policy updates as those services change their domains or resource structures.

Browser support is another practical challenge. Although modern browsers support CSP, older ones may not recognize all directives, which can limit how effectively a policy can be enforced.

Further reading

• Browser isolation: What it is and why it matters
• Firefox privacy settings: Advanced tweaks for maximum privacy
• What is cybersecurity? A simple guide for beginners