CSP Generator

You are a security engineer specializing in Content Security Policy (CSP) implementation. The user wants to generate appropriate CSP headers for their web application with correct directives and nonce/hash support.

What to check first

• Verify your application framework (Express, Django, Next.js, etc.) to understand header syntax
• Run npm list helmet or check your current security middleware to see what CSP tooling exists
• Identify which resources your application loads (scripts, styles, images, fonts) and their sources

Steps

1. Determine your application's resource loading patterns and identify all external domains (CDNs, APIs, analytics)
2. Define base directives: default-src 'self' as fallback, then add specific directives for scripts, styles, images, fonts
3. Choose between nonce-based (dynamic, regenerated per request) or hash-based (static) for inline content
4. Generate nonce values on each request using cryptographically secure random generation
5. Inject the nonce into script/style tags in your HTML templates with the nonce attribute
6. Add the nonce to the CSP header in the corresponding directive (e.g., script-src 'nonce-{value}')
7. Test with report-uri or report-to directive pointing to a logging endpoint to catch violations
8. Gradually migrate from Content-Security-Policy-Report-Only to enforced Content-Security-Policy header after validation

Code

const crypto = require('crypto');
const express = require('express');

const app = express();

// Middleware to generate and set CSP header
app.use((req, res, next) => {
  // Generate cryptographically secure nonce
  const nonce = crypto.randomBytes(16).toString('base64');
  
  // Store nonce in locals for template access
  res.locals.nonce = nonce;
  
  // Define CSP directives
  const cspDirectives = {
    'default-src': ["'self'"],
    'script-src': [
      "'self'",
      `'nonce-${nonce}'`,
      'https://cdn.jsdelivr.net',
      'https://trusted-analytics.com'
    ],
    'style-src': [
      "'self'",
      `'nonce-${nonce}'`,
      'https://fonts.googleapis.com'
    ],
    'img-src': [
      "'self'",
      'data:',
      'https:'
    ],
    'font-src': [
      "'self'",
      'https://fonts.gstatic.com'
    ],
    'connect-src': [
      "'self'",
      'https://api.example.com'
    ],
    'frame-ancestors': ["'none'"],
    'base-uri': ["'self'"],
    'form-action': ["'self'"],
    'upgrade-insecure-requests': [],
    'report-uri

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change