Sikre HTTP-hoder med Cloudflare Workers: Trinn-for-trinn guide

Denne veiledningen viser hvordan du steg-for-steg kan implementere robuste HTTP-svarhoder på nettsteder som bruker Cloudflare, ved å utnytte kraften i Cloudflare Workers. Disse headerne er avgjørende for å beskytte nettstedet ditt mot vanlige sårbarheter.

Implementering av HTTP-hoder for å beskytte mot trusler som XSS, Clickjacking, MIME-sniffing og injeksjoner er en velkjent og sterkt anbefalt sikkerhetspraksis. Organisasjoner som OWASP understreker viktigheten av dette. Mens tradisjonelle webservere som Apache, Nginx og IIS har sine metoder for å håndtere dette, tilbyr Cloudflare-brukere en elegant løsning via Cloudflare Workers.

Cloudflare Workers er en serverløs plattform som lar deg kjøre kode (JavaScript, C, C++, Rust) på Cloudflares globale nettverk av datasentre, som strekker seg over mer enn 200 lokasjoner. Denne tilnærmingen gir stor fleksibilitet når det kommer til å tilpasse HTTP-hoder. Du kan bruke disse headerne på hele domenet, underdomener, eller til og med spesifikke URL-er ved hjelp av regex-baserte ruter.

I dette eksemplet benytter vi koden som er utviklet av Scott Helme, som er tilgjengelig på GitHub.

Kom i gang:

• Logg deg inn på Cloudflare-kontoen din og gå til «Workers»-seksjonen (direktelink).

• Kopier koden fra worker.js på GitHub og lim den inn i script-editoren.

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

Før du lagrer, bør du tilpasse headerne slik at de samsvarer med dine spesifikke behov:

• Content-Security-Policy: Her kan du konfigurere innholdssikkerhetspolicyen for applikasjonen din.
• X-Frame-Options: Endre til «SAMEORIGIN» hvis du skal vise innholdet i en iframe på samme domene.

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

• Content-Security-Policy Eksempel:

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

Dette eksemplet tillater iframes fra eget domene, gf.dev og tipsbilk.net.com.

• Server Header: Du kan endre server-overskriften, for eksempel:

"Server" : "tipsbilk.net Server",

• RemoveHeaders: Fjern uønskede headere for å skjule versjonsinformasjon og redusere risikoen for lekkasjer, f.eks:

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

• Legg til nye overskrifter: Du kan legge til egne headere i `securityHeaders`-delen:

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

Etter at du har gjort ønskede justeringer, gir du worker-en et navn og klikker «Lagre og distribuer».

Nå må du knytte worker-en til nettstedet ditt:

• I Cloudflare-dashbordet, velg nettstedet du vil bruke.
• Gå til fanen «Workers» og klikk «Legg til rute».
• Angi URL-mønsteret. Du kan bruke regex for mer avansert matching.
• Velg worker-en du nettopp opprettet og lagre.

Det er det! Endringene trer i kraft raskt. Du kan verifisere de implementerte headerne i nettleserens utviklerverktøy eller med et HTTP-hodeverktøy.

Merk at «Server»-headeren kanskje ikke oppdateres, sannsynligvis fordi Cloudflare overstyrer denne. Implementeringen tar omtrent 15 minutter og krever ikke nedetid eller omstart. Vi anbefaler å teste i et lavere miljø eller med spesifikke ruter før du implementerer i produksjon.

Dette er en effektiv og rask måte å forbedre sikkerheten til ditt nettsted!

Stor takk til Scott Helme for den verdifulle koden.