Decloak is an AI-powered web security intelligence platform that scans a site's HTTP/TLS posture, JavaScript, and third-party scripts to produce a report anyone can read. This guide is part of Decloak's library of practical, source-backed security guidance.
In this guide
- Key takeaways
- What does “CSP in Chrome” actually mean?
- Why should I care about CSP in Chrome?
- How do I add a basic CSP header to my site?
- How can I test a CSP policy without breaking my site?
- What are the most common CSP directives and how should I use them?
- How do I allow safe inline scripts without using `unsafe-inline`?
- How do I view CSP violations in Chrome?
- When should I upgrade my CSP version?
- How does CSP interact with other security headers?
- How can Decloak help me verify my CSP?
Key takeaways
- CSP is a response header that tells Chrome which sources are allowed for scripts, styles, images, fonts, and more.
- Chrome enforces the policy by blocking anything that doesn't match the allow - list.
- Use
Content-Security-Policy-Report-Onlyto test policies without breaking users. - Common directives include
script-src,style-src,img-src, anddefault-src. - Nonces or hashes let you safely allow specific inline scripts or styles.
What does “CSP in Chrome” actually mean?
CSP in Chrome is the Content Security Policy implementation built into the browser. Chrome reads the Content-Security-Policy HTTP header (or a <meta http-equiv> tag) and blocks any resource that does not match the declared allow - list.
Why should I care about CSP in Chrome?
CSP helps prevent cross - site scripting (XSS) and other code - injection attacks by disallowing inline scripts, eval(), and untrusted origins unless you explicitly permit them. When a violation occurs Chrome can also send a report, giving you visibility into attacks that would otherwise go unnoticed.
How do I add a basic CSP header to my site?
- Decide which sources you need for each content type.
- Create a header string using directives like
default-src,script-src, andstyle-src. - Configure your web server to send the header. Example for Apache:
Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://apis.example.com; style-src 'self' 'unsafe-inline'"
- Reload the server and verify the header appears with
curl -I https://yourdomain.com.
How can I test a CSP policy without breaking my site?
Use the Report - Only mode. Chrome will log violations to the console and optionally send them to a URL you provide, but it will not block the content.
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' https://apis.example.com; report-uri /csp-violation-report
Monitor the reports, adjust the policy, then switch to the enforcing header.
What are the most common CSP directives and how should I use them?
| Directive | Purpose | Typical value |
|---|---|---|
default-src | Fallback for any resource type not covered by a more specific directive | 'self' |
script-src | Controls where JavaScript can be loaded from | 'self' https://cdn.example.com |
style-src | Controls where CSS can be loaded from | 'self' 'unsafe-inline' |
img-src | Controls allowed image origins | 'self' data: |
connect-src | Controls allowed AJAX/WebSocket endpoints | 'self' https://api.example.com |
font-src | Controls allowed font sources | 'self' https://fonts.gstatic.com |
object-src | Controls <object>, <embed>, <applet> sources (usually set to 'none') | 'none' |
base-uri | Restricts the <base> tag URL | 'self' |
frame-ancestors | Defines who can embed the page in a frame | 'none' |
How do I allow safe inline scripts without using unsafe-inline?
Use a nonce or a hash. Generate a random nonce for each response, add it to the header, and attach the same nonce to any <script> tag you need to run:
Content-Security-Policy: script-src 'self' 'nonce-2726c7f26c'
<script nonce="2726c7f26c">// safe inline code</script>
Alternatively, compute a SHA - 256 hash of the script content and include it in the header.
How do I view CSP violations in Chrome?
- Open DevTools (F12).
- Go to the Console tab - CSP violations appear as messages like
Refused to load the script .... - In the Network tab, filter by csp-report to see any POST requests sent to your
report-uriendpoint.
When should I upgrade my CSP version?
Chrome supports CSP Level 2 since version 40 and newer levels automatically as they are released. Newer levels add directives such as worker-src and manifest-src. If you need those features, update the header to include the new directives - Chrome will ignore unknown directives without breaking the policy.
How does CSP interact with other security headers?
CSP works alongside headers like X-Content-Type-Options: nosniff, X-Frame-Options, and Referrer-Policy. Together they provide defense - in - depth. For example, nosniff stops MIME - type confusion, while CSP blocks script execution from disallowed origins.
How can Decloak help me verify my CSP?
Decloak’s free scan runs core checks, including static HTML analysis and JavaScript pattern detection, which can surface CSP - related issues such as missing script-src restrictions or unsafe inline code. The report grades your CSP effectiveness and shows any violations it observed during the scan.
This article is intended for solo developers and security - conscious teams who want a practical, code - focused guide to CSP in Chrome.
Related guides
How to Fix a Missing Content - Security - Policy Header
Learn concrete steps to add, test, and harden a Content - Security - Policy header, from server configuration to iterative reporting and verification.
Is HTTP 1.1 a security risk?
HTTP 1.1 is not a direct vulnerability, but its plain - text design and parsing ambiguities can create attack surfaces that need mitigation, especially when not used over TLS.
Is JavaScript a security risk?
JavaScript can be a major attack surface because injected scripts run with the same privileges as the page, but proper sanitization, CSP, and safe frameworks eliminate most risks.