CSP, HSTS, X-Frame-Options : le guide complet pour sécuriser votre site

La majorité des sites web exposent des failles de sécurité évitables en quelques lignes de configuration. CSP, HSTS et X-Frame-Options sont les trois headers HTTP les plus importants — et pourtant absents sur la majorité des sites. Ce guide vous explique ce qu'ils font, pourquoi ils sont critiques, et comment les configurer.

Pourquoi les headers HTTP sont essentiels

Les headers HTTP sont des instructions que votre serveur envoie au navigateur de l'utilisateur avec chaque réponse. Ils contrôlent comment le navigateur interprète et affiche votre site — et surtout, comment il se protège contre les attaques.

Sans ces headers, votre site est vulnérable à des attaques bien documentées : injections de scripts malveillants (XSS), détournement de clics (clickjacking), interceptions du trafic (man-in-the-middle). Ces attaques sont automatisées et ciblent tous les sites, même les petits.

1. Content-Security-Policy (CSP)

La Content-Security-Policy est le header le plus puissant — et le plus complexe. Elle indique au navigateur d'où il est autorisé à charger des ressources : scripts, styles, images, fonts, etc.

Pourquoi c'est critique

Sans CSP, un attaquant qui réussit à injecter du code HTML dans votre page (via un formulaire, un commentaire, une URL) peut exécuter n'importe quel script dans le contexte de votre site. C'est une attaque XSS (Cross-Site Scripting).

Configuration minimale

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com

Configuration pour un site avec Google Fonts et Analytics

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  img-src 'self' data: https:;
  connect-src 'self' https://www.google-analytics.com;

Comment l'ajouter sur votre serveur

Apache (.htaccess)

Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"

Nginx

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'";

Node.js / Express

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy',
    "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
  );
  next();
});

2. HTTP Strict Transport Security (HSTS)

HSTS force le navigateur à n'accéder à votre site qu'en HTTPS — même si l'utilisateur tape http://. Sans HSTS, un attaquant sur le même réseau Wi-Fi peut intercepter la connexion initiale et rediriger vers une version HTTP non chiffrée.

Pourquoi c'est critique

Un site sans HSTS est vulnérable aux attaques de déclassement SSL (SSL stripping). Un outil comme sslstrip peut intercepter et modifier le trafic HTTP avant qu'il n'atteigne votre serveur HTTPS.

Configuration recommandée

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

• max-age=31536000 — le navigateur se souvient pendant 1 an
• includeSubDomains — s'applique aussi aux sous-domaines
• preload — permet d'être inclus dans la liste HSTS des navigateurs (recommandé)

Ajout sur votre serveur

# Apache
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

# Nginx
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";

# Express
res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');

3. X-Frame-Options

X-Frame-Options empêche votre site d'être chargé dans une iframe par un autre site. Sans cette protection, un attaquant peut superposer votre site invisible sous une interface trompeuse pour capturer des clics — c'est le clickjacking.

Pourquoi c'est critique

Le clickjacking peut être utilisé pour faire valider des transactions bancaires, changer des paramètres de compte, ou cliquer sur des boutons "Confirmer" sans que l'utilisateur ne le sache.

Configuration recommandée

X-Frame-Options: DENY

Ou si vous avez besoin d'iframes sur votre propre domaine :

X-Frame-Options: SAMEORIGIN

Récapitulatif : les headers essentiels

Configuration complète en une fois

Voici une configuration Express complète avec tous les headers essentiels :

app.use((req, res, next) => {
  // Protection XSS
  res.setHeader('Content-Security-Policy',
    "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;"
  );
  // HTTPS forcé
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
  // Anti-clickjacking
  res.setHeader('X-Frame-Options', 'DENY');
  // Anti-MIME sniffing
  res.setHeader('X-Content-Type-Options', 'nosniff');
  // Contrôle du referrer
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
  next();
});