Podrobný návod: Implementace zabezpečených HTTP hlaviček pomocí Cloudflare Workers
Zabezpečení webových stránek je klíčové a existuje mnoho způsobů, jak toho dosáhnout. Jedním z efektivních postupů je implementace bezpečnostních HTTP hlaviček. Tyto hlavičky pomáhají chránit web před běžnými zranitelnostmi, jako jsou útoky XSS, clickjacking, sniffing MIME a další. Organizace OWASP tuto praxi široce doporučuje.
V minulosti jsem se věnoval implementaci těchto hlaviček na webových serverech, jako je Apache, Nginx a IIS. Pokud však k ochraně a urychlení vašich stránek používáte Cloudflare, můžete efektivně využít Cloudflare Workers. Tato platforma umožňuje manipulovat s HTTP hlavičkami odpovědí.
Cloudflare Workers je bezserverová platforma, kde lze spouštět kód napsaný v JavaScriptu, C, C++ a Rustu. Tato platforma je globálně distribuována ve více než 200 datových centrech Cloudflare.
Samotná implementace je poměrně jednoduchá a flexibilní. Umožňuje aplikovat hlavičky na celém webu, včetně subdomén, nebo jen na konkrétní URI pomocí shodných vzorů využívajících regulární výrazy (Regex).
V tomto příkladu použijeme kód od Scotta Helma.
Pojďme na to! 👨💻
- Přihlaste se do svého účtu Cloudflare a přejděte do sekce Workers (přímý odkaz).
- Zkopírujte kód z `worker.js` z GitHubu a vložte jej do editoru skriptů.
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)));
Ještě neskladujte. Zvažte úpravu následujících hlaviček podle vašich specifických potřeb:
Content-Security-Policy: Zde můžete nastavit pravidla pro zdroje obsahu vaší aplikace.
Příklad: Pokud potřebujete povolit načítání obsahu z více domén pomocí iframe, můžete definovat předky rámců takto:
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev etechblog.cz.com",
Tento příklad umožní načítání obsahu z domén `gf.dev`, `etechblog.cz.com` a z vašeho vlastního webu.
X-Frame-Options: Pokud plánujete zobrazovat obsah vašeho webu v rámci stejného webu prostřednictvím elementu iframe, můžete změnit hodnotu na `SAMEORIGIN`:
"X-Frame-Options": "SAMEORIGIN",
Server: Tuto hlavičku můžete použít k úpravě informací o serveru. Nastavte ji dle vašeho uvážení:
"Server" : "etechblog.cz Server",
RemoveHeaders: Potřebujete odstranit některá hlavičky, abyste skryli informace o verzi a omezili riziko úniku informací? Můžete to provést zde:
let removeHeaders = [
"Public-Key-Pins",
"X-Powered-By",
"X-AspNet-Version",
]
Přidání nových hlaviček: Pokud potřebujete přidat vlastní hlavičky do aplikací, můžete je uvést v sekci `securityHeaders`, jak ukazuje následující příklad:
let securityHeaders = {
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev etechblog.cz.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",
}
Po dokončení úprav všech potřebných hlaviček pojmenujte pracovníka a klikněte na „Uložit a nasadit“.
Výborně! Worker je připraven. Nyní jej musíme přidat na web, kde chcete hlavičky aplikovat. Já to udělám na mém testovacím prostředí.
- Přejděte na domovskou stránku/hlavní panel Cloudflare a vyberte web.
- Přejděte na kartu Workers >> Přidat trasu.
- Zadejte URL do pole „Trasa“; zde můžete použít Regex.
- Vyberte nově vytvořeného pracovníka a uložte změny.
Hotovo. Během chvilky by se měly všechny hlavičky na vašem webu implementovat.
Takto to vypadá v Chrome Dev Tools. Hlavičky můžete otestovat také pomocí nástroje na testování HTTP hlaviček.
Zdá se, že hlavička serveru se nezobrazuje. Mám podezření, že ji Cloudflare potlačuje.
Jak vidíte, celková implementace trvá asi 15 minut a nevyžaduje žádné výpadky ani restarty jako v případě Apache nebo Nginx. Pokud plánujete použít tuto metodu na produkčním webu, doporučuji nejprve provést testování na nižším prostředí, případně pomocí trasy, kterou můžete aplikovat na testovacích stránkách a ověřit výsledky. Až budete spokojeni, proveďte nasazení na produkční prostředí.
Je to skvělé!
Díky Scottovi za jeho kód.