Un guide étape par étape pour mettre en œuvre des 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, injection intersite, et bien d'autres. Sa pratique largement adoptée et recommandée par OWASP.

Auparavant, j'ai écrit sur implémentation d'en-têtes dans un serveur Web comme Apache, Nginx et IIS. Cependant, si vous utilisez Cloudflare pour protéger et suralimenter vos sites, vous pouvez profiter de Travailleurs Cloudflare pour manipuler les en-têtes de réponse HTTP.

Cloudflare Workers est un plateforme sans serveur où 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 flexibilité d'appliquer les en-têtes sur l'ensemble du site, y compris le sous-domaine ou l'URI spécifique avec un bagout correspondantn en utilisant Regex.

Pour cette démonstration, j'utiliserai le code par Scott Helme.

Commençons ... 👨‍💻

  • Connectez-vous à Cloudflare et cliquez sur Travailleurs (lien direct)

  • Cliquez sur Créer un travailleur

  • Copiez le worker.js code 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 sauvez pas encore; vous souhaiterez peut-être ajuster les en-têtes suivants pour répondre à l'exigence.

Politique de sécurité du contenu - si vous devez appliquer votre politique de candidature, vous pouvez le faire ici.

Ex - si vous avez besoin de rechercher du contenu via iFrame sur plusieurs URL, vous pouvez profiter de cadre-ancêtres comme ci-dessous.

"Content-Security-Policy" : "frame-ancestors 'self' gf.dev geekflare.com",

Ce qui précède permettra de charger le contenu de gf.dev, geekflare.comet auto-site.

Options X-Frame - 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 nettoyer l'en-tête du serveur ici. Mettez ce que vous voulez.

"Server" : "Geekflare Server",

SupprimerHeaders - devez-vous 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 sous securityHeaders section comme ci-dessous.

let securityHeaders = {
	"Content-Security-Policy" : "frame-ancestors 'self' gf.dev geekflare.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 collaborateur et cliquez sur Enregistrer et déployer.

Génial! le worker 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 Travailleurs >> 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 de Outils de développement Chrome. 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, l'implémentation globale prend environ 15 minutes, et aucun temps d'arrêt ou redémarrage n'est requis comme Apache ou Nginx. Si vous envisagez de l'appliquer à un site de production, je vous suggère d'abord de tester 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, allez où vous le souhaitez.

C'est génial!

Grâce au Scott pour le code.