Content Security Policy (CSP) Header

What is a Content Security Policy (CSP) Header?

The Content Security Policy (CSP) Header is a security feature implemented in modern web browsers to prevent Cross-Site Scripting (XSS), Clickjacking, and other code injection attacks. It defines which resources (e.g., scripts, styles, images) a web page is allowed to load and execute, thereby reducing the risk of malicious content being injected into a website.

Why is CSP Important?

Prevents XSS Attacks: Restricts inline scripts and untrusted sources from executing on the website.
Mitigates Data Injection Risks: Blocks unauthorized scripts, fonts, and images from external domains.
Reduces Clickjacking Attempts: Prevents embedding of the website in iframes on unauthorized domains.
Strengthens Website Security: Ensures content is only loaded from trusted sources.

How to Fix Content Security Policy (CSP) Issues?

1. Implementing a Basic CSP Header

A basic CSP Header can be added via the web server configuration or in the meta tag of an HTML page.

a) Configuring CSP in Web Server

For Apache Web Server: Header set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'"

For Nginx Web Server: add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'" always;

b) Using HTML Meta Tag: <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'">

2. Understanding CSP Directives and Fixing Violations

A CSP directive is a rule that defines what resources can be loaded. Below are key directives and how to fix related issues:

Directive	Purpose	Example	Fixing Issues
`default-src`	Defines default policy for all resources	`default-src 'self';`	Restrict all content to the same domain.
`script-src`	Controls JavaScript execution	`script-src 'self' https://trustedscripts.com;`	Block untrusted scripts.
`style-src`	Controls external CSS sources	`style-src 'self' 'unsafe-inline';`	Avoid inline styles, use hashed styles instead.
`img-src`	Restricts image sources	`img-src 'self' https://cdn.trusted.com;`	Allow only images from trusted CDNs.
`frame-src`	Restricts embedded frames	`frame-src 'none';`	Disable iframes to prevent Clickjacking.

3. Testing CSP Implementation and Debugging Issues

Use Browser Developer Tools:
- Open Chrome DevTools (F12 or Ctrl + Shift + I).
- Go to the Console tab and check for CSP violations.
Enable CSP Report-Only Mode:
- Test without blocking resources: Header set Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self' https://trustedscripts.com; report-uri /csp-violation-report-endpoint/"
- This logs violations without breaking the sites
Use Online CSP Validators

4. Common CSP Issues and Fixes

Issue	Cause	Fix
Inline scripts blocked	`script-src` does not allow `'unsafe-inline'`	Use nonce or hashes for inline scripts.
Third-party scripts blocked	External scripts not whitelisted	Add trusted domains in `script-src`.
Images from CDN not loading	`img-src` is restricted	Add CDN domain to `img-src`.
Fonts not displaying	`font-src` is restrictive	Include font provider in `font-src`.
Iframes not working	`frame-src` set to `'none'`	Allow specific domains in `frame-src`.

5. Best Practices for CSP Implementation

Use a Report-Only Mode First: Avoid breaking your website by testing policies first.
Minimize 'unsafe-inline' and 'unsafe-eval': Use script hashing (sha256-hash) instead.
Regularly Review Allowed Domains: Remove unused external sources to reduce attack surface.
Enable CSP Logging: Monitor CSP reports to detect policy violations and refine the CSP policy.

Conclusion

The Content Security Policy (CSP) Header is an essential security feature that prevents attacks like XSS and Clickjacking. Implementing and maintaining a proper CSP policy requires careful testing and monitoring. Use CSP Report-Only Mode first, whitelist trusted sources, and regularly update your policies to ensure your website remains secure.