En trinn-for-trinn-guide for implementering av sikre HTTP-hoder på nettsteder drevet av Cloudflare ved hjelp av Cloudflare Workers.
Det er mange måter å implementere HTTP-svarhoder for å sikre nettsteder fra vanlige sårbarheter, for eksempel XSS, Clickjacking, MIMI-sniffing, injeksjon på tvers av nettsteder og mange flere. Det er vidt vedtatt praksis og anbefalt av OWASP.
Tidligere skrev jeg om implementering av overskrifter i en webserver som Apache, Nginx og IIS. Men hvis du bruker Cloudflare for å beskytte og overlade nettstedene dine, kan du dra nytte av det Cloudflare-arbeidere for å manipulere HTTP-svarhodene.
Cloudflare Workers er en serverløs plattform hvor du kan kjøre JavaScript, C, C++, Rust-kode. Det blir distribuert på hvert Cloudflare-datasenter, som er mer enn 200 over hele verden.
Implementeringen er veldig enkel og fleksibel. Det gir deg fleksibiliteten til å bruke overskriftene på hele nettstedet, inkludert underdomenet eller spesifikk URI med en matchende mønstern bruker Regex.
For denne demonstrasjonen vil jeg bruke kode av Scott Helme.
La oss sette i gang…👨💻
- Logg inn på Cloudflare og klikk på Workers (direkte kobling)
- Kopier worker.js-koden fra GitHub og lim inn i 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)));
Ikke lagre ennå; Det kan være lurt å justere følgende overskrifter for å oppfylle kravet.
Content-Security-Policy – hvis du trenger å bruke søknadspolicyen din, kan du gjøre det her.
Eks – hvis du trenger å hente innhold gjennom iFrame på flere nettadresser, kan du dra nytte av rammeforfedre som nedenfor.
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev tipsbilk.net.com",
Ovennevnte vil tillate lasting av innholdet fra gf.dev, tipsbilk.net.com og egen side.
X-Frame-Options – du kan endre til SAMEORIGIN hvis du har tenkt å vise nettstedets innhold på en side på samme side ved hjelp av iframe.
"X-Frame-Options": "SAMEORIGIN",
Server – du kan rense serveroverskriften her. Sett det du vil.
"Server" : "tipsbilk.net Server",
RemoveHeaders – trenger du å fjerne noen overskrifter for å skjule versjonene for å redusere sårbarheten for informasjonslekkasje?
Du kan gjøre det her.
let removeHeaders = [ "Public-Key-Pins", "X-Powered-By", "X-AspNet-Version", ]
Legge til nye overskrifter – hvis du trenger å sende noen tilpassede overskrifter til applikasjonene dine, kan du legge dem til under securityHeaders-delen som nedenfor.
let securityHeaders = {
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev tipsbilk.net.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 ferdig med å justere alle overskriftene du trenger, navngir du arbeideren og klikker på Lagre og distribuer.
Flott! arbeideren er klar, og deretter må vi legge dette til nettstedet der du vil bruke overskriftene. Jeg bruker dette på laboratoriesiden min.
- Gå til Cloudflare home/dashboard og velg nettstedet.
- Naviger til fanen Arbeidere >> Legg til rute.
- Skriv inn URL-en i Rute; du kan bruke Regex her.
- Velg de nyopprettede arbeiderne og Lagre
Det er alt; i løpet av et sekund vil du legge merke til at alle overskriftene er implementert på nettstedet.
Slik ser det ut fra Chrome Dev Tools. Du kan også teste overskriften gjennom et HTTP-hodeverktøy.
Jeg vet ikke hvorfor serveroverskriften ikke reflekteres. Jeg antar at Cloudflare overstyrer dette.
Du skjønner, den generelle implementeringen tar ~15 minutter, og ingen nedetid eller omstart er nødvendig som Apache eller Nginx. Hvis du planlegger å bruke dette på et produksjonssted, vil jeg foreslå at du først tester på et lavere miljø, eller ved hjelp av en rute kan du søke på testsidene for å verifisere resultatene. Når du er fornøyd, skyv dit du vil.
Dette er fantastisk!
Takk til Scott for koden.