Un guide étape par étape pour la mise en œuvre d’en-têtes HTTP sécurisés sur des sites Web alimentés par Cloudflare à l’aide de Cloudflare Workers.
Il existe de nombreuses façons d’implémenter des en-têtes de réponse HTTP pour sécuriser les sites contre les vulnérabilités courantes, telles que XSS, Clickjacking, MIMI sniffing, cross-site injection, et bien d’autres. Sa pratique largement adoptée et recommandée par OWASP.
Auparavant, j’ai écrit sur l’implémentation d’en-têtes dans un serveur Web comme Apache, Nginx et IIS. Cependant, si vous utilisez Cloudflare pour protéger et optimiser vos sites, vous pouvez profiter de Travailleurs Cloudflare pour manipuler les en-têtes de réponse HTTP.
Cloudflare Workers est une plate-forme sans serveur sur laquelle vous pouvez exécuter du code JavaScript, C, C++, Rust. Il est déployé sur chaque centre de données Cloudflare, soit plus de 200 dans le monde.
La mise en œuvre est très simple et flexible. Il vous donne la possibilité d’appliquer les en-têtes sur l’ensemble du site, y compris le sous-domaine ou l’URI spécifique avec un motif correspondantn en utilisant Regex.
Pour cette démonstration, j’utiliserai le code par Scott Helme.
Commençons…👨💻
- Connectez-vous à Cloudflare et cliquez sur Workers (lien direct)
- Copiez le code worker.js à partir de GitHub et coller dans l’éditeur de script
const securityHeaders = {
"Content-Security-Policy": "upgrade-insecure-requests",
"Strict-Transport-Security": "max-age=1000",
"X-Xss-Protection": "1; mode=block",
"X-Frame-Options": "DENY",
"X-Content-Type-Options": "nosniff",
"Referrer-Policy": "strict-origin-when-cross-origin"
},
sanitiseHeaders = {
Server: ""
},
removeHeaders = [
"Public-Key-Pins",
"X-Powered-By",
"X-AspNet-Version"
];
async function addHeaders(req) {
const response = await fetch(req),
newHeaders = new Headers(response.headers),
setHeaders = Object.assign({}, securityHeaders, sanitiseHeaders);
if (newHeaders.has("Content-Type") && !newHeaders.get("Content-Type").includes("text/html")) {
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders
});
}
Object.keys(setHeaders).forEach(name => newHeaders.set(name, setHeaders[name]));
removeHeaders.forEach(name => newHeaders.delete(name));
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders
});
}
addEventListener("fetch", event => event.respondWith(addHeaders(event.request)));Ne sauvegardez pas encore ; vous souhaiterez peut-être ajuster les en-têtes suivants pour répondre à l’exigence.
Content-Security-Policy – si vous devez appliquer votre politique d’application, vous pouvez le faire ici.
Ex – si vous avez besoin de sourcer du contenu via iFrame sur plusieurs URL, vous pouvez tirer parti des ancêtres de cadre comme ci-dessous.
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev toptips.fr.com",
Ce qui précède permettra de charger le contenu de gf.dev, toptips.fr.com et du site personnel.
X-Frame-Options – vous pouvez passer à SAMEORIGIN si vous avez l’intention d’afficher le contenu de votre site sur une page du même site en utilisant iframe.
"X-Frame-Options": "SAMEORIGIN",
Serveur – vous pouvez désinfecter l’en-tête du serveur ici. Mettez ce que vous voulez.
"Server" : "toptips.fr Server",
RemoveHeaders – avez-vous besoin de supprimer certains en-têtes pour masquer les versions afin d’atténuer la vulnérabilité de fuite d’informations ?
Vous pouvez le faire ici.
let removeHeaders = [ "Public-Key-Pins", "X-Powered-By", "X-AspNet-Version", ]
Ajout de nouveaux en-têtes – si vous devez transmettre des en-têtes personnalisés à vos applications, vous pouvez les ajouter dans la section securityHeaders comme ci-dessous.
let securityHeaders = {
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev toptips.fr.com",
"Strict-Transport-Security" : "max-age=1000",
"X-Xss-Protection" : "1; mode=block",
"X-Frame-Options" : "SAMEORIGIN",
"X-Content-Type-Options" : "nosniff",
"Referrer-Policy" : "strict-origin-when-cross-origin",
"Custom-Header" : "Success",
}Une fois que vous avez terminé d’ajuster tous les en-têtes dont vous avez besoin, nommez le travailleur et cliquez sur Enregistrer et déployer.
Super! le travailleur est prêt, et ensuite, nous devons l’ajouter au site où vous souhaitez appliquer les en-têtes. Je vais l’appliquer à mon site de laboratoire.
- Accédez à la page d’accueil/tableau de bord Cloudflare et sélectionnez le site.
- Accédez à l’onglet Ouvriers >> Ajouter un itinéraire.
- Entrez l’URL dans Route ; vous pouvez appliquer le Regex ici.
- Sélectionnez les travailleurs nouvellement créés et enregistrez
C’est tout; en une seconde, vous remarquerez que tous les en-têtes sont implémentés sur le site.
Voici à quoi cela ressemble dans Chrome Dev Tools. Vous pouvez également tester l’en-tête via un outil d’en-tête HTTP.
Je ne sais pas pourquoi l’en-tête du serveur n’est pas reflété. Je suppose que Cloudflare remplace cela.
Vous voyez, la mise en œuvre globale prend environ 15 minutes, et aucun temps d’arrêt ou redémarrage n’est requis comme Apache ou Nginx. Si vous envisagez d’appliquer cela à un site de production, je suggérerais de tester d’abord sur un environnement inférieur, ou à l’aide d’un itinéraire, vous pouvez postuler sur les pages de test pour vérifier les résultats. Une fois satisfait, poussez où vous voulez.
C’est génial!
Grâce à Scott pour le code.