CSP (Content Security Policy)

Content Security Policy (CSP) is a web security standard that enables developers to precisely define which content sources are allowed to execute on a web page. Implemented via an HTTP header or meta tag, CSP serves as an essential defense layer against malicious code injection attacks. By restricting the origin of scripts, styles, images, and other resources, CSP dramatically reduces the attack surface of modern web applications.

Fundamentals

• Declarative policy defining authorized sources for each resource type (scripts, styles, images, fonts, connections)
• Delivery via Content-Security-Policy HTTP header or <meta> tag for browser-side enforcement
• Modular directive system enabling granular control per content type
• Report-only mode available for testing policies without blocking content

Benefits

• Robust protection against XSS (Cross-Site Scripting) attacks by blocking unauthorized script execution
• Prevention of malicious content injection from compromised third-party sources
• Enhanced visibility through violation reports enabling detection of attack attempts
• Reduced clickjacking risks through frame-ancestors directives
• Strengthened compliance with OWASP security standards and regulatory requirements (GDPR, PCI-DSS)

Practical Example

import type { NextConfig } from 'next';

const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline' https://cdn.example.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  img-src 'self' blob: data: https://images.example.com;
  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;
`;

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
        ],
      },
    ];
  },
};

export default nextConfig;

Implementation

1. Analyze your application to identify all external resource sources (CDNs, APIs, third-party services)
2. Start with a restrictive policy in report-only mode (Content-Security-Policy-Report-Only) to observe violations
3. Define essential directives: default-src, script-src, style-src, img-src according to your needs
4. Configure a reporting endpoint to collect CSP violations and analyze attack attempts
5. Progressively eliminate 'unsafe-inline' and 'unsafe-eval' directives by refactoring code
6. Use nonces or hashes for unavoidable inline scripts rather than 'unsafe-inline'
7. Switch to enforcement mode after complete policy validation
8. Continuously monitor reports and adjust policy as the application evolves

Related Tools

• CSP Evaluator - CSP policy validator developed by Google
• Report URI / Sentry - CSP violation report collection and analysis services
• Helmet.js - Express/Node.js middleware for automatic security header configuration
• CSP Hash Generator - Hash generator for inline scripts
• Observatory by Mozilla - Web security audit tool including CSP analysis
• next-secure-headers - Next.js package for advanced security header configuration

Adopting Content Security Policy represents a strategic investment in the security posture of any modern web application. Beyond technical protection against XSS attacks—one of the most exploited vulnerabilities—CSP demonstrates a commitment to security that strengthens user and partner trust. In a context where data breaches cost an average of millions in fines and reputation loss, CSP constitutes a low-cost insurance offering exceptional ROI in security incident prevention.