Eine Schritt-für-Schritt-Anleitung zur Implementierung sicherer HTTP-Header auf Websites, die von Cloudflare mit Cloudflare Workers betrieben werden.
Es gibt viele Möglichkeiten, HTTP-Antwortheader zu implementieren, um Websites vor häufigen Schwachstellen wie XSS, Clickjacking, MIMI-Sniffing, Cross-Site-Injection und vielen mehr zu schützen. Seine weit verbreitete Praxis und empfohlen von OWASP.
Zuvor habe ich über die Implementierung von Headern in einem Webserver wie Apache, Nginx und IIS geschrieben. Wenn Sie jedoch Cloudflare verwenden, um Ihre Websites zu schützen und aufzuladen, können Sie davon profitieren Cloudflare-Arbeiter um die HTTP-Antwortheader zu manipulieren.
Cloudflare Workers ist eine serverlose Plattform, auf der Sie JavaScript-, C-, C++- und Rust-Code ausführen können. Es wird in jedem Rechenzentrum von Cloudflare bereitgestellt, das sind mehr als 200 weltweit.
Die Implementierung ist sehr einfach und flexibel. Es gibt Ihnen die Flexibilität, die Header auf der gesamten Website anzuwenden, einschließlich der Subdomain oder eines bestimmten URI mit a passendes Mustern mit Regex.
Für diese Demonstration verwende ich die Code von Scott Helme.
Fangen wir an…👨💻
- Melden Sie sich bei Cloudflare an und klicken Sie auf Workers (direkte Verbindung)
- Kopieren Sie den worker.js-Code aus 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)));
Speichern Sie noch nicht; Möglicherweise möchten Sie die folgenden Header anpassen, um die Anforderung zu erfüllen.
Content-Security-Policy – Wenn Sie Ihre Anwendungsrichtlinie anwenden müssen, können Sie dies hier tun.
Beispiel: Wenn Sie Inhalte über iFrame auf mehreren URLs beziehen müssen, können Sie die Frame-Vorfahren wie unten nutzen.
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev wdzwdz.com",
Das Obige ermöglicht das Laden des Inhalts von gf.dev, wdzwdz.com und der eigenen Website.
X-Frame-Optionen – Sie können zu SAMEORIGIN wechseln, wenn Sie beabsichtigen, den Inhalt Ihrer Website auf einer Seite innerhalb derselben Website mit iFrame anzuzeigen.
"X-Frame-Options": "SAMEORIGIN",
Server – Hier können Sie den Server-Header bereinigen. Setzen Sie, was Sie wollen.
"Server" : "wdzwdz Server",
RemoveHeaders – müssen Sie einige Header entfernen, um die Versionen zu verbergen, um 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 einige benutzerdefinierte Header an Ihre Anwendungen übergeben müssen, können Sie diese wie unten im Abschnitt „securityHeaders“ hinzufügen.
let securityHeaders = {
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev wdzwdz.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 benötigten Header angepasst haben, benennen Sie den Worker und klicken Sie auf Save and Deploy.
Groß! Der Worker ist fertig, 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 Laborseite anwenden.
- Gehen Sie zu Cloudflare Home/Dashboard und wählen Sie die Site aus.
- Navigieren Sie zur Registerkarte Arbeiter >> Route hinzufügen.
- Geben Sie die URL in Route ein; Sie können die Regex hier anwenden.
- Wählen Sie die neu erstellten Worker aus und speichern Sie
Das ist alles; Innerhalb einer Sekunde werden Sie feststellen, dass alle Header auf der Website implementiert sind.
So sieht es in den Chrome Dev Tools aus. Sie können den Header auch über ein HTTP-Header-Tool testen.
Ich weiß nicht, warum der Server-Header nicht wiedergegeben wird. Ich denke, Cloudflare überschreibt dies.
Sie sehen, die gesamte Implementierung dauert etwa 15 Minuten, und es sind keine Ausfallzeiten oder Neustarts wie bei Apache oder Nginx erforderlich. Wenn Sie vorhaben, dies auf einen Produktionsstandort anzuwenden, würde ich vorschlagen, zuerst auf einer niedrigeren Umgebung zu testen, oder mit Hilfe einer Route, Sie können sich auf den Testseiten bewerben, um die Ergebnisse zu überprüfen. Sobald Sie zufrieden sind, schieben Sie es dorthin, wo Sie möchten.
Das ist fantastisch!
Dank an Scott für den Code.