01 What is CSP?
Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement for malware distribution.
A CSP is essentially an "allowlist" for your website resources. You tell the browser exactly which domains are allowed to load scripts, styles, images, and other content. If a resource isn't on the list, the browser blocks it.
02 Preventing XSS
XSS attacks rely on the browser's inability to distinguish between the script that's part of your application and a script that's been maliciously injected by a third party. When the browser downloads a malicious script, it executes it.
CSP solves this by restricting the sources of executable scripts. If you only allow scripts from self (your own domain) and https://trusted-analytics.com, an attacker trying to inject a script from http://evil.com will fail because the browser knows evil.com is not a trusted source.
03 Common Directives
A CSP is made up of a set of directives that control specific resource types:
default-src
The fallback for most other directives. If you don't specify a script-src, the browser uses default-src rules.
script-src
Controls which scripts can be loaded and executed. Critical for XSS prevention.
style-src
Controls the sources of stylesheets. Often needs 'unsafe-inline' for many modern frameworks (though best avoided).
img-src
Controls where images can be loaded from.
connect-src
Restricts the URLs which can be loaded using script interfaces (fetch, XHR, WebSockets).
04 How to Implement
You can deliver a CSP via a meta tag or, preferably, an HTTP response header.
The Header Method (Recommended)
Content-Security-Policy: default-src 'self'; img-src https://*; child-src 'none';The Meta Tag Method
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">Note: Report-only mode allows you to test your policy without breaking your site. The browser will report violations to a specified URL but will not block the resources.
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-violation-report-endpoint/05 Frequently Asked Questions
What happens if I break my CSP?
If a resource is blocked by CSP, it won't load, and an error will be logged to the console. This can break site functionality (e.g., analytics, fonts, scripts), so testing is crucial.
What is 'unsafe-inline'?
'unsafe-inline' allows the execution of inline scripts and styles. It is generally recommended to avoid this as it significantly weakens the protection CSP offers against XSS.
Can I use CSP to block specific domains?
CSP works as an allowlist, not a blocklist. You define what IS allowed. Anything not explicitly allowed is blocked by default.
Does CSP affect SEO?
Indirectly, yes. By improving security and preventing malicious redirects or content injection, you protect your site's reputation and ranking.
Is Your CSP Effective?
Our scanner can parse your CSP and identify potential weaknesses.
Check My CSP