Protégez votre site web contre les attaques par détournement de clics en mettant en place un en-tête CSP (Content Security Policy)

CSP est l’un des 10 meilleurs en-têtes sécurisés de l’OWASP et sa mise en œuvre est souvent recommandée par les experts en sécurité ou les outils. Il existe de nombreuses options pour élaborer la politique afin de mettre en œuvre la manière dont vous souhaitez exposer vos ressources web.

L’une des directives, appelée frame-ancestors, introduite dans la version 2 du CSP, offre plus de souplesse que l’en-tête X-Frame-Options. frame-ancestors fonctionne de la même manière que X-Frame-Options pour autoriser ou interdire l’intégration des ressources à l’aide des éléments iframe, frame, object, embed et applet.

Je pense que les options X-Frame seront obsolètes dans un avenir proche lorsque CSP sera entièrement compatible avec les principaux navigateurs. À l’heure où j’écris ces lignes, les frame-ancestors de CSP fonctionnent avec toutes les dernières versions des navigateurs, à l’exception d’IE.

Je ne sais pas quand Microsoft autorisera la prise en charge d’IE. Vous pouvez toujours vérifier la compatibilité des navigateurs sur le site Can I Use.

Examinons la procédure de mise en œuvre suivante.

Apache HTTP

mod_headers est un pré-requis pour injecter des en-têtes dans Apache. Cela dépend du système d’exploitation et de la version, mais si vous utilisez Ubuntu et Apache 2.4, vous pouvez utiliser a2enmod headers pour l’activer.

root@geekflare:/etc/apache2# a2enmod headers
Activation des en-têtes de module.
Pour activer la nouvelle configuration, vous devez exécuter :
  systemctl restart apache2
root@geekflare:/etc/apache2# systemctl restart apache2
root@geekflare:/etc/apache2#

Remarque: toutes les configurations peuvent être effectuées dans le fichier httpd.conf ou dans tout autre fichier de configuration efficace que vous utilisez.

DENY de ALL

Similaire à X-Frame-Options DENY. Si vous ne voulez pas qu’un site (y compris le vôtre) soit intégré, ajoutez ce qui suit.

Header set Content-Security-Policy "frame-ancestors 'none' ;"

Sauvegardez le fichier et redémarrez Apache HTTP pour que les modifications soient prises en compte.

J’ai essayé d’intégrer le site et, comme vous pouvez le voir, il a été bloqué.

Autoriser pour soi-même mais REFUSER pour les autres

Comme pour X-Frame-Options SAMEORIGIN, vous pouvez ajouter ce qui suit.

Header set Content-Security-Policy "frame-ancestors 'self' ;"

Autoriser à partir de soi et de plusieurs domaines

X-Frame-Options n’avait pas d’option permettant d’autoriser plusieurs domaines. Grâce à CSP, vous pouvez faire comme ci-dessous.

Header set Content-Security-Policy "frame-ancestors 'self' 'geekflare.com/fr' 'gf.dev' 'geekflare.dev' ;"

Ce qui précède permettra au contenu d’être intégré à partir de self, geekflare.com/fr, gf.dev, geekflare.dev. Remplacez ces domaines par les vôtres.

Nginx

Le concept et la directive sont les mêmes que ceux expliqués ci-dessus dans la section HTTP Apache, à l’exception de la manière dont vous ajoutez l’en-tête. Les en-têtes dans Nginx doivent être ajoutés sous le bloc serveur dans un fichier de configuration correspondant.

DENY tous

add_header Content-Security-Policy "frame-ancestors 'none' ;";

DENY tous mais pas soi

add_header Content-Security-Policy "frame-ancestors 'self' ;";

Autoriser à partir de plusieurs domaines

add_header Content-Security-Policy "frame-ancestors 'yoursite.com' 'example.com' ;";

L’exemple ci-dessus permettra d’intégrer du contenu sur yoursite.com et example.com. Après avoir effectué les modifications, n’oubliez pas de redémarrer le serveur Nginx pour tester la politique.

WordPress

Cela dépend de la manière dont vous hébergez WordPress.

S’il s’agit d’un auto-hébergement comme un cloud ou un VPS, alors vous pouvez utiliser un serveur web tel qu’Apache ou Nginx. Si c’est le cas, vous pouvez suivre les instructions mentionnées ci-dessus pour implémenter le serveur web au lieu de WordPress. Cependant, si vous êtes sur un hébergement partagé ou que vous n’avez pas accès à la modification des serveurs web, vous pouvez utiliser un plugin.

Pour mettre en œuvre la CSP dans WordPress, vous pouvez utiliser le plugin Content Security Policy Pro.

Vérification

Une fois la mise en œuvre terminée, vous pouvez utiliser les outils de développement intégrés au navigateur ou un outil de test des en-têtes sécurisés.

Conclusion

CSP est l’un des en-têtes puissants et sécurisés pour prévenir les vulnérabilités du web. J’espère que les instructions ci-dessus vous guideront dans l’implémentation des frame-ancestors dans Apache et Nginx.