What is Content Security Policy ?

Content Security Policy is a crucial security standard that helps protect your web applications from various types of attacks, including Cross-Site Scripting (XSS), clickjacking, and other code injection attacks. It works by allowing you to specify which resources (scripts, styles, images, etc.) your browser should be allowed to load.

How CSP Works

CSP is implemented through HTTP headers that tell browsers which resources are allowed to be loaded and executed. When a browser receives a CSP header, it enforces these rules and blocks any resources that don't comply with the policy.
  1. The client browser requests your website from the server
  2. When the browser attempts to load a resource (script, image, etc.)
  3. The browser checks if the resource is allowed by your CSP rules
  4. If allowed, the resource loads normally
  5. If not allowed, the browser blocks the resource and sends a violation report to your specified endpoint to notify you that your configuration is blocking something.
CSP Violation Flow

CSP reporting flow diagram

Scan Your Website Now

Instantly analyze your website's Content Security Policy. Get actionable insights and improve your security posture in minutes.

Scan Your Website

Enter your website URL to analyze its Content Security Policy configuration.

Get started now by providing your website URL and launch the scan!

Your website is not yet online?
Try our CSP Evaluator

Basic Example

Basic CSP configuration

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'report-sample';
  style-src 'self';
  img-src 'self';
  font-src 'self';
  object-src 'none';
  base-uri 'none';
  form-action 'none';
  frame-ancestors 'none';
  frame-src 'self';
  connect-src 'none';
  upgrade-insecure-requests;
  report-uri https://report.centralcsp.com/<myendpoint>;
This policy provides a solid foundation for CSP implementation, with each directive requiring customization for your specific needs:
  • default-src 'self': Restricts all resources to same origin by default
  • script-src 'self' 'report-sample': Only allows scripts from same origin and includes samples in violation reports
  • style-src 'self': Only allows stylesheets from same origin
  • img-src 'self': Only allows images from same origin
  • font-src 'self': Only allows fonts from same origin
  • object-src 'none': Blocks all plugins (Flash, Java, etc.)
  • base-uri 'none': Prevents attackers from changing the base URL for relative links
  • form-action 'none': Blocks form submissions (will need adjustment for functional forms)
  • frame-ancestors 'none': Prevents your site from being embedded in iframes (anti-clickjacking)
  • frame-src 'self': Only allows frames from same origin
  • connect-src 'none': Blocks all AJAX, WebSocket and fetch requests (will need adjustment for API calls)
  • upgrade-insecure-requests: Automatically upgrades HTTP requests to HTTPS
  • report-uri: Sends violation reports to your specified endpoint for monitoring

Key Benefits

  • Protects against XSS attacks by controlling script execution

  • Prevents clickjacking through frame-ancestors directive

  • Controls resource loading to prevent data exfiltration

  • Provides detailed reporting of policy violations

Common Use Cases

1. Policy with Third-Party Resources

CSP for a site using common third-party services

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net https://www.google-analytics.com;
  style-src 'self' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  img-src 'self' data: https: https://www.google-analytics.com;
  ...
  

2. Strict Policy with Nonces

Strict CSP using nonces for inline scripts and styles

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'nonce-random123';
  style-src 'self' 'nonce-random123';
  ...
  

Best Practice : For complex websites with many inline dependencies, using nonces is the most effective approach to implement a secure CSP. Nonces allow you to selectively enable specific inline scripts and styles while maintaining strong security protections against XSS attacks. Unlike hash-based approaches, nonces don't require recalculation when content changes, making them more maintainable for dynamic applications.

Learn more about nonces

CSP related documentation

Related headers

The Content-Security-Policy header is linked to other headers. You can find more information about them in the headers section

Related directives

The CSP policy is made of directives. You can find more information about them in the directives section

Values

The directives can have values. You can find more information about them in the values section

Reporting

CSP provides built-in reporting capabilities to help you monitor and debug policy violations. Reports are sent to specified endpoints when violations occur.

Basic Reporting Setup

CSP with reporting enabled

Content-Security-Policy: 
  default-src 'self'; 
  report-uri https://report.centralcsp.com/<YourEndpoint>
  ...
  

Understanding CSP Monitoring and Violations

CSP monitoring is a critical security practice that helps you identify and address potential vulnerabilities in your web application. By collecting and analyzing CSP violation reports, you can continuously improve your security posture.

How to collect CSP violation reports?

When a CSP violation occurs, the browser automatically sends a JSON report to the endpoint specified in your CSP configuration. This comprehensive monitoring system helps you identify and fix potential security issues.
  1. The client browser requests your website from the server
  2. Your server responds with the page and CSP policy
  3. When the browser attempts to load a resource (script, image, etc.)
  4. The browser checks if the resource is allowed by your CSP rules
  5. If not allowed, the browser blocks the resource and sends a violation report
  6. These reports are collected, stored, and made available through a dashboard
CSP Reporting System

Get Started with Central CSP

How to see the reports collected?

Once reports are collected, you can access them through a comprehensive dashboard that helps you analyze and respond to CSP violations effectively.
CSP Reporting Dashboard

Dashboard showing blocked origins that need CSP adjustments

The dashboard provides a detailed view of all blocked resources, allowing you to:
  • Identify which origins are being blocked by your CSP
  • Determine which blocked resources are legitimate and needed by your website
  • Make informed decisions about adjusting your CSP rules
  • Track violation patterns over time to improve your security posture

How to see more details about a violation?

Once reports are collected, you can access them through a comprehensive dashboard that provides detailed insights into CSP violations, helping you understand and respond to them effectively.
CSP Violation Details Dashboard

Detailed view of CSP violations showing frequency and location data

The detailed violation view helps you:
  • Count violations per blocked resource
  • See which pages have violations
  • Understand violation context
  • Identify patterns to prioritize fixes
  • Make data-driven CSP rule adjustments
  • Monitor security improvements over time

How to see all the policies used by your website?

Our platform provides a dedicated view to monitor and analyze all Content Security Policies implemented across your website, giving you complete visibility into your security configuration.
CSP Policies Dashboard

Dashboard showing all Content Security Policies implemented on your website

The policies dashboard gives you a clear view of your CSP setup, helping you:
  • View all active policies on your website
  • Identify gaps in your security coverage
  • Track policy changes over time
  • Understand which directives are being used
  • Make informed decisions about policy adjustments

Testing Your CSP Implementation

Before deploying CSP to production, it's crucial to test your policy implementation. You can use our CSP Scanner to:
  • Analyze your current CSP configuration
  • Identify potential security gaps
  • Get recommendations for improvement
  • Test policy effectiveness
CSP Policies Dashboard

Results of the CSP Scanner

  • Start with report-only mode to identify potential issues

  • Monitor violation reports to fine-tune your policy

  • Use the scanner to validate your implementation

Why Use Central CSP?

Central CSP provides a comprehensive solution for managing your Content Security Policy:
  • Easy Implementation: Simple setup with our intuitive interface
  • Real-time Monitoring: Track violations and policy effectiveness
  • Detailed Analytics: Understand your security posture
  • Automated Recommendations: Get suggestions for policy improvements
  • Multi-site Management: Manage CSP for multiple domains
  • Free Trial Available: Get started for free
  • CSP Scanner: Analyze and test your policies with our built-in scanner

Get Started with Central CSP for free

Implement and manage your Content Security Policy with ease

Get Started with a 14 days free trial

Additional Resources

External Articles

Related Documentation