En trin-for-trin guide til implementering af sikre HTTP-headere på websteder, der drives af Cloudflare ved hjælp af Cloudflare Workers.
Der er mange måder at implementere HTTP-svarheaders på for at sikre websteder mod almindelige sårbarheder, såsom XSS, Clickjacking, MIMI sniffing, cross-site injection og mange flere. Det er bredt vedtaget praksis og anbefalet af OWASP.
Tidligere skrev jeg om implementering af headere i en webserver som Apache, Nginx og IIS. Men hvis du bruger Cloudflare til at beskytte og overlade dine websteder, kan du drage fordel af Cloudflare-arbejdere at manipulere HTTP-svarets headere.
Cloudflare Workers er en serverløs platform, hvor du kan køre JavaScript, C, C++, Rust-kode. Det bliver implementeret på alle Cloudflare-datacentre, som er mere end 200 på verdensplan.
Implementeringen er meget ligetil og fleksibel. Det giver dig fleksibiliteten til at anvende overskrifterne på hele webstedet, inklusive underdomænet eller den specifikke URI med en matchende mønstern ved hjælp af Regex.
Til denne demonstration vil jeg bruge kode af Scott Helme.
Lad os komme i gang…👨💻
- Log ind på Cloudflare og klik på Workers (direkte link)
- Kopiér worker.js-koden fra GitHub og indsæt til Script-editor
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)));
Gem ikke endnu; Det kan være en god idé at justere følgende overskrifter for at opfylde kravene.
Content-Security-Policy – hvis du har brug for at anvende din ansøgningspolitik, kan du gøre det her.
F.eks. – hvis du har brug for at hente indhold gennem iFrame på flere URL’er, så kan du drage fordel af frame-forfædre som nedenfor.
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev toadmin.dk.com",
Ovenstående vil tillade indlæsning af indholdet fra gf.dev, toadmin.dk.com og egen hjemmeside.
X-Frame-Options – du kan ændre til SAMEORIGIN, hvis du har til hensigt at vise dit websteds indhold på en side på samme websted ved hjælp af iframe.
"X-Frame-Options": "SAMEORIGIN",
Server – du kan rense serverheaderen her. Læg hvad du kan lide.
"Server" : "toadmin.dk Server",
RemoveHeaders – skal du fjerne nogle overskrifter for at skjule versionerne for at mindske sårbarheden i informationslækage?
Du kan gøre det her.
let removeHeaders = [ "Public-Key-Pins", "X-Powered-By", "X-AspNet-Version", ]
Tilføjelse af nye overskrifter – hvis du har brug for at sende nogle brugerdefinerede overskrifter til dine applikationer, kan du tilføje dem under securityHeaders-sektionen som nedenfor.
let securityHeaders = {
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev toadmin.dk.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",
}
Når du er færdig med at justere alle de overskrifter, du har brug for, skal du navngive arbejderen og klikke på Gem og implementer.
Store! arbejderen er klar, og derefter skal vi tilføje dette til det websted, hvor du vil anvende overskrifterne. Jeg vil anvende dette på mit laboratoriested.
- Gå til Cloudflare home/dashboard og vælg webstedet.
- Naviger til fanen Arbejdere >> Tilføj rute.
- Indtast URL’en i Rute; du kan anvende Regex her.
- Vælg de nyoprettede arbejdere og Gem
Det er alt; inden for et sekund vil du bemærke, at alle overskrifterne er implementeret på webstedet.
Sådan ser det ud fra Chrome Dev Tools. Du kan også teste headeren gennem et HTTP-headerværktøj.
Jeg ved ikke, hvorfor Server-headeren ikke afspejles. Jeg gætter på, at Cloudflare tilsidesætter dette.
Du kan se, den overordnede implementering tager ~15 minutter, og ingen nedetid eller genstart er påkrævet som Apache eller Nginx. Hvis du planlægger at anvende dette på et produktionssted, vil jeg foreslå, at du først tester på et lavere miljø, eller ved hjælp af en rute kan du anvende på testsiderne for at verificere resultaterne. Når du er tilfreds, skub til hvor du vil.
Det her er fedt!
Tak til Scott for koden.