CSP (Content Security Policy)

Content Security Policy (CSP) est un standard de sécurité web qui permet aux développeurs de définir précisément quelles sources de contenu sont autorisées à s'exécuter sur une page web. Implémenté via un en-tête HTTP ou une balise meta, CSP constitue une couche de défense essentielle contre les attaques par injection de code malveillant. En limitant l'origine des scripts, styles, images et autres ressources, CSP réduit drastiquement la surface d'attaque des applications web modernes.

Fondements

Politique déclarative définissant les sources autorisées pour chaque type de ressource (scripts, styles, images, fonts, connexions)
Transmission via en-tête HTTP Content-Security-Policy ou balise <meta> pour activation côté navigateur
Système de directives modulaires permettant un contrôle granulaire par type de contenu
Mode report-only disponible pour tester les politiques sans bloquer le contenu

Avantages

Protection robuste contre les attaques XSS (Cross-Site Scripting) en bloquant l'exécution de scripts non autorisés
Prévention des injections de contenu malveillant provenant de sources tierces compromises
Visibilité accrue via les rapports de violation permettant de détecter les tentatives d'attaque
Réduction des risques liés au clickjacking grâce aux directives frame-ancestors
Conformité renforcée aux standards de sécurité OWASP et exigences réglementaires (RGPD, PCI-DSS)

Exemple concret

next.config.ts

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;

Mise en œuvre

Analyser l'application pour identifier toutes les sources de ressources externes (CDN, APIs, services tiers)
Démarrer avec une politique restrictive en mode report-only (Content-Security-Policy-Report-Only) pour observer les violations
Définir les directives essentielles : default-src, script-src, style-src, img-src selon vos besoins
Configurer un endpoint de reporting pour collecter les violations CSP et analyser les tentatives d'attaque
Éliminer progressivement les directives 'unsafe-inline' et 'unsafe-eval' en refactorant le code
Utiliser des nonces ou hashes pour les scripts inline inévitables plutôt que 'unsafe-inline'
Passer en mode enforcement après validation complète de la politique
Monitorer continuellement les rapports et ajuster la politique selon l'évolution de l'application

Conseil Pro

Implémentez CSP progressivement en commençant par les nouvelles fonctionnalités plutôt que de tenter de sécuriser l'ensemble d'une application legacy d'un coup. Utilisez des outils comme CSP Evaluator de Google pour valider votre politique et détecter les configurations dangereuses. Pour les applications complexes, envisagez d'utiliser des bibliothèques comme helmet.js qui simplifient la gestion des en-têtes de sécurité.

Outils associés

CSP Evaluator - Validateur de politique CSP développé par Google
Report URI / Sentry - Services de collecte et analyse des rapports de violation CSP
Helmet.js - Middleware Express/Node.js pour configurer automatiquement les en-têtes de sécurité
CSP Hash Generator - Générateur de hash pour scripts inline
Observatory by Mozilla - Outil d'audit de sécurité web incluant l'analyse CSP
next-secure-headers - Package Next.js pour configuration avancée des en-têtes de sécurité

L'adoption de Content Security Policy représente un investissement stratégique dans la posture de sécurité de toute application web moderne. Au-delà de la protection technique contre les attaques XSS qui représentent l'une des vulnérabilités les plus exploitées, CSP démontre un engagement envers la sécurité qui renforce la confiance des utilisateurs et partenaires. Dans un contexte où les violations de données coûtent en moyenne des millions d'euros en amendes et perte de réputation, CSP constitue une assurance à faible coût offrant un ROI exceptionnel en matière de prévention des incidents de sécurité.