Les headers de sécurité HTTP expliqués : CSP, HSTS, X-Frame-Options

90 % des sites web de PME n'ont aucun header de sécurité HTTP configuré. C'est comme laisser les portes de votre boutique ouvertes la nuit. Les headers de sécurité sont la première ligne de défense de votre site web contre les attaques les plus courantes. Chez ConsilioWEB, agence web en Corrèze, nous les implémentons systématiquement sur chaque projet.

Pourquoi les headers de sécurité HTTP sont essentiels

Les headers HTTP sont des métadonnées envoyées par votre serveur avec chaque page web. Les headers de sécurité indiquent au navigateur comment se comporter pour protéger l'utilisateur. Sans eux, votre site est vulnérable aux attaques XSS, au clickjacking et à d'autres menaces courantes.

Les risques sans headers de sécurité

• Cross-Site Scripting (XSS) : un attaquant injecte du code malveillant dans vos pages
• Clickjacking : votre site est intégré dans un iframe piégé pour tromper les utilisateurs
• Man-in-the-middle : les données transitent en clair et peuvent être interceptées
• MIME sniffing : le navigateur interprète un fichier dangereux comme du contenu légitime
• Information disclosure : le serveur révèle sa technologie et sa version

Les 6 headers de sécurité indispensables

1. Content-Security-Policy (CSP)

Le CSP est le header le plus puissant. Il contrôle quelles ressources le navigateur est autorisé à charger sur votre page. Si un attaquant réussit à injecter du code JavaScript malveillant, le CSP l'empêchera de s'exécuter.

Un CSP bien configuré définit les sources autorisées pour les scripts, les styles, les images, les polices et les connexions. Tout ce qui ne provient pas d'une source autorisée est bloqué par le navigateur.

La mise en place d'un CSP strict demande du travail car il faut lister toutes les sources légitimes. Commencez par un mode « report-only » pour identifier les ressources bloquées avant d'activer le blocage réel.

2. Strict-Transport-Security (HSTS)

HSTS force le navigateur à utiliser HTTPS pour toutes les connexions futures avec votre site. Une fois activé, même si l'utilisateur tape « http:// », le navigateur convertit automatiquement en « https:// ».

C'est une protection essentielle contre les attaques man-in-the-middle. Sans HSTS, un attaquant sur un WiFi public pourrait intercepter la première connexion HTTP avant la redirection vers HTTPS.

Nous recommandons une durée de 1 an (31536000 secondes) avec les options `includeSubDomains` et `preload`.

3. X-Frame-Options

Ce header empêche votre site d'être intégré dans un iframe sur un autre site. C'est la protection contre le clickjacking : un attaquant qui afficherait votre site dans un cadre invisible pour capturer les clics de l'utilisateur.

L'option `DENY` bloque tout iframe. L'option `SAMEORIGIN` autorise uniquement les iframes du même domaine. Pour la plupart des sites, `DENY` est le bon choix.

4. X-Content-Type-Options

Ce header empêche le navigateur de « deviner » le type MIME d'un fichier. Sans lui, un navigateur pourrait interpréter un fichier texte malveillant comme du JavaScript et l'exécuter.

La configuration est simple : `X-Content-Type-Options: nosniff`. Il n'y a aucune raison de ne pas l'activer.

5. Referrer-Policy

Ce header contrôle quelle information de référent est envoyée quand un utilisateur quitte votre site en cliquant sur un lien. Par défaut, l'URL complète est envoyée, ce qui peut révéler des informations sensibles.

Nous recommandons `strict-origin-when-cross-origin` : l'URL complète est envoyée pour les liens internes, mais seul le domaine est envoyé pour les liens externes.

6. Permissions-Policy

Ce header contrôle quelles fonctionnalités du navigateur votre site peut utiliser : caméra, microphone, géolocalisation, accéléromètre. Désactivez tout ce dont vous n'avez pas besoin pour réduire la surface d'attaque.

Comment configurer les headers dans Next.js

Chez ConsilioWEB, nous utilisons Next.js pour tous nos projets. Les headers de sécurité se configurent soit dans le middleware, soit dans `next.config.js`.

La méthode middleware est la plus flexible. Elle permet d'appliquer les headers à toutes les requêtes et de les personnaliser par route. C'est l'approche que nous recommandons pour les projets développement web professionnels.

Comment vérifier vos headers de sécurité

Plusieurs outils gratuits vous permettent de vérifier les headers de votre site :

• SecurityHeaders.com : score de A+ à F avec recommandations détaillées
• Mozilla Observatory : analyse complète avec score et suggestions
• Chrome DevTools : onglet Network → cliquez sur une requête → Headers
• curl : en ligne de commande pour les développeurs

Notre site consilioweb.fr obtient un score A+ sur SecurityHeaders.com grâce à l'implémentation complète des 6 headers essentiels.

L'impact sur les performances

Les headers de sécurité n'ont aucun impact négatif sur les performances de votre site. Ils ajoutent quelques octets à chaque réponse HTTP, ce qui est négligeable. En revanche, un CSP bien configuré peut améliorer les performances en empêchant le chargement de ressources non autorisées.

Sécurité et SEO

Google favorise les sites sécurisés dans ses résultats de recherche. Un site avec HTTPS (obligatoire pour HSTS) et des headers de sécurité bien configurés envoie un signal de confiance à Google et aux utilisateurs. C'est un critère indirect mais réel pour le référencement SEO.

Conclusion : une protection simple et efficace

Les headers de sécurité HTTP sont la mesure de sécurité la plus simple et la plus efficace que vous puissiez mettre en place. Quelques lignes de configuration protègent votre site et vos utilisateurs contre les attaques les plus courantes.

Chez ConsilioWEB, la sécurité est intégrée dès la conception de chaque site internet. Nos sites sont protégés par défaut, sans surcoût pour le client.

Votre site est-il protégé ? Contactez-nous pour un audit de sécurité gratuit.