Comprehensive Guide to Content Security Policy (CSP) Implementation

Comprehensive Guide to Content Security Policy (CSP) Implementation

Introduction to Content Security Policy (CSP)

Content Security Policy (CSP) is a security standard that helps prevent various types of attacks, such as Cross-Site Scripting (XSS) and data injection attacks. CSP allows you to define which resources are allowed to load and execute on a webpage, reducing the risk of vulnerabilities from unsafe content.

Importance of CSP

  1. Mitigates XSS Attacks: CSP prevents malicious scripts from running on your website by specifying trusted sources.
  2. Reduces Data Injection Attacks: CSP limits the sources from which scripts, styles, and other resources can be loaded, mitigating data injection risks.
  3. Enhances Security Posture: Implementing CSP as part of a broader security strategy enhances overall site security and builds trust with users.

Implementing CSP: A Step-by-Step Guide

Step 1: Adding CSP Headers

CSP rules are added as HTTP headers or within meta tags in your HTML documents.

Using HTTP Headers

Add the Content-Security-Policy header in your server configuration:


add_header Content-Security-Policy "default-src 'self';";


<IfModule mod_headers.c>
    Header set Content-Security-Policy "default-src 'self';"

Using Meta Tags

Include a meta tag in the head section of your HTML document:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

Step 2: Start with a Restrictive Policy

Begin by blocking all resources:

Content-Security-Policy: default-src 'none';

Step 3: Allow Essential Sources

Gradually allow content from trusted sources. For example, allow scripts from your domain:

Content-Security-Policy: default-src 'none'; script-src 'self';

Step 4: Add More Directives

Include additional directives to allow styles, images, and other resources:

Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self';

Step 5: Include Third-Party Resources

If your site uses third-party services (e.g., CDNs, analytics):

Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self';

Step 6: Use Nonces or Hashes for Inline Scripts

For inline scripts and styles, use nonces or hashes to allow specific instances.

Generating Nonces

Generate a unique nonce for each request. Example in PHP:

$nonce = base64_encode(random_bytes(16));
header("Content-Security-Policy: script-src 'self' 'nonce-$nonce'");
<script nonce="<?= $nonce ?>">
  // Your inline script here

Using Hashes

Calculate the hash of the inline content. Example using SHA-256:

echo -n "alert('Hello, world!');" | openssl dgst -sha256 -binary | openssl base64

Include the hash in your policy:

Content-Security-Policy: default-src 'none'; script-src 'self' 'sha256-Base64HashValue';

Monitoring and Adjusting CSP

  1. Report Violations: Use the report-uri or report-to directive to log CSP violations:
Content-Security-Policy: default-src 'none'; report-uri /csp-report-endpoint;
  1. Setup a Report Collector: Implement a server endpoint to collect CSP reports. Example in Node.js:
const express = require('express');
const app = express();
app.use(express.json());'/csp-report-endpoint', (req, res) => {
    console.log('CSP Violation:', req.body);

app.listen(3000, () => console.log('Server running on port 3000'));
  1. Monitor Reports: Regularly review CSP reports to identify necessary adjustments. Analyze the collected reports to determine which resources need to be allowed.

Example of CSP Policy in Real Scenario

  1. Initial Policy:
Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self';
  1. After Reviewing Reports:

Allow scripts from a trusted CDN:

Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self';
  1. Final Policy:
    default-src 'none'; 
    script-src 'self'; 
    style-src 'self'; 
    img-src 'self'; 
    connect-src 'self'; 
    font-src 'self';
    report-uri /csp-report-endpoint;

Best Practices

  • Start Restrictive: Begin with a highly restrictive policy and relax it as needed.
  • Use Nonces/Hashes: Prefer nonces or hashes for inline content to avoid allowing unsafe-inline.
  • Regular Updates: Keep the CSP updated with changes to your site and third-party dependencies.
  • Testing: Test the policy in report-only mode before enforcing it to avoid breaking functionality.


Implementing CSP effectively involves starting with a restrictive policy, allowing necessary resources, and continuously monitoring and adjusting based on actual usage and violations. This approach mitigates various web attacks and enhances the overall security of your website.