Comment implémenter les frame-ancestors CSP dans Apache, Nginx et WordPress ?

Protégez votre site web contre les attaques par détournement de clics en mettant en œuvre l'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 construire la politique afin de mettre en œuvre la manière dont vous souhaitez exposer vos ressources web.

L'une des directives appelées 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 ancêtres de cadre 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 le 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: vous pouvez effectuer toutes les configurations dans le fichier httpd.conf ou dans tout autre fichier de configuration efficace que vous utilisez.

DENY à partir 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 qu'il prenne effet.

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

Autoriser à partir de soi mais DENY à partir des autres

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

Jeu d'en-tête Content-Security-Policy "frame-ancestors 'self' ;"

Autoriser les contenus provenant de votre propre domaine 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.

Jeu d'en-têtes Content-Security-Policy "frame-ancestors 'self' 'geekflare.com' 'gf.dev' 'geekflare.dev' ;"

Ce qui précède permettra au contenu d'être intégré à partir de self, geekflare.com, 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 façon 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' ;";

Refuser tout, mais pas soi-même

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, vous utilisez peut-être un serveur web tel qu'Apache ou Nginx. Si c'est le cas, vous pouvez suivre la procédure décrite 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, alors vous pouvez utiliser un plugin.

Pour mettre en œuvre le 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

La CSP est l'un des en-têtes sécurisés les plus puissants 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.