Wie implementiere ich sichere Header mit Cloudflare Workern?

Eine Schritt-für-Schritt-Anleitung zum Implementieren sicherer HTTP-Header auf Websites, die von Cloudflare mit Cloudflare Workers unterstützt werden.

Es gibt viele Möglichkeiten, HTTP-Antwortheader zu implementieren, um Websites vor häufigen Sicherheitslücken wie XSS, Clickjacking, MIMI-Sniffing, standortübergreifender Injektion und vielem mehr zu schützen. Seine weit verbreitete Praxis und empfohlen von OWASP.

Zuvor habe ich darüber geschrieben Implementieren von Headern in einem Webserver wie Apache, Nginx und IIS. Wenn Sie jedoch verwenden Cloudflare Um Ihre Websites zu schützen und aufzuladen, können Sie diese nutzen Cloudflare-Mitarbeiter um die HTTP-Antwortheader zu manipulieren.

Cloudflare Workers ist ein serverlose Plattform Hier können Sie JavaScript-, C-, C ++ - und Rust-Code ausführen. Es wird in jedem Cloudflare-Rechenzentrum bereitgestellt, das weltweit mehr als 200 umfasst.

Die Implementierung ist sehr einfach und flexibel. Sie haben die Flexibilität, die Header auf die gesamte Site anzuwenden, einschließlich der Subdomain oder eines bestimmten URI mit einem passendes Geplappern mit regulärer Ausdruck.

Für diese Demonstration werde ich die verwenden Code von Scott Helme.

Fangen wir an… 👨‍💻

• Melden Sie sich bei Cloudflare an und klicken Sie auf Workers (direkte Link)

• Klicken Sie auf Worker erstellen

• Kopieren Sie die worker.js Code von GitHub und in den Skripteditor einfügen

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)));

Sparen Sie noch nicht. Möglicherweise möchten Sie die folgenden Überschriften anpassen, um die Anforderungen zu erfüllen.

Inhaltssicherheitsrichtlinie - Wenn Sie Ihre Anwendungsrichtlinie anwenden müssen, können Sie dies hier tun.

Beispiel: Wenn Sie Inhalte über iFrame unter mehreren URLs beziehen müssen, können Sie dies nutzen Rahmenvorfahren wie nachstehend.

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

Das Obige ermöglicht das Laden des Inhalts von gf.dev, geekflare.comund Selbstseite.

X-Frame-Optionen - Sie können zu SAMEORIGIN wechseln, wenn Sie den Inhalt Ihrer Site mithilfe von iframe auf einer Seite derselben Site anzeigen möchten.

"X-Frame-Options": "SAMEORIGIN",

Server - Hier können Sie den Server-Header bereinigen. Legen Sie, was Sie wollen.

"Server" : "Geekflare Server",

Header entfernen - Müssen Sie einige Header entfernen, um die Versionen auszublenden und die Sicherheitsanfälligkeit durch Informationslecks zu verringern?

Sie können es hier tun.

let removeHeaders = [
	"Public-Key-Pins",
	"X-Powered-By",
	"X-AspNet-Version",
]

Hinzufügen neuer Header - Wenn Sie Ihren Anwendungen einige benutzerdefinierte Header übergeben müssen, können Sie diese unter hinzufügen securityHeaders Abschnitt wie unten.

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",
}

Wenn Sie alle erforderlichen Header angepasst haben, benennen Sie den Worker und klicken Sie auf Speichern und bereitstellen.

Großartig! Der Worker ist bereit, und als Nächstes müssen wir dies der Site hinzufügen, auf der Sie die Header anwenden möchten. Ich werde dies auf meine Laborstelle anwenden.

• Gehen Sie zu Cloudflare Home / Dashboard und wählen Sie die Site aus.
• Navigieren Sie zur Registerkarte Workers >> Route hinzufügen.
• Geben Sie die URL in Route ein. Hier können Sie den Regex anwenden.
• Wählen Sie die neu erstellten Worker aus und speichern Sie sie

Das ist alles; Innerhalb einer Sekunde werden Sie feststellen, dass alle Header auf der Site implementiert sind.

So sieht es aus Chrome Dev-Tools. Sie können den Header auch über eine testen HTTP-Header-Tool.

Ich weiß nicht, warum der Server-Header nicht angezeigt wird. Ich denke, Cloudflare überschreibt dies.

Sie sehen, die Gesamtimplementierung dauert ca. 15 Minuten, und es sind keine Ausfallzeiten oder Neustarts wie bei Apache oder Nginx erforderlich. Wenn Sie dies auf einen Produktionsstandort anwenden möchten, würde ich empfehlen, zunächst in einer niedrigeren Umgebung zu testen oder mithilfe einer Route auf den Testseiten anzuwenden, um die Ergebnisse zu überprüfen. Sobald Sie zufrieden sind, drücken Sie, wohin Sie wollen.

Das ist fantastisch!

Dank an Scott für den Code.