Jak implementovat zabezpečené záhlaví pomocí Cloudflare Workers?

Podrobný průvodce implementací zabezpečených HTTP hlaviček na webech poháněných Cloudflare pomocí Cloudflare Workers.

Existuje mnoho způsobů, jak implementovat hlavičky odpovědí HTTP na zabezpečení webů před běžnými zranitelnostmi, jako je XSS, Clickjacking, MIMI sniffing, vkládání mezi weby a mnoho dalších. Jeho široce přijatá praxe a doporučená OWASP.

Dříve jsem psal o implementaci záhlaví na webovém serveru, jako je Apache, Nginx a IIS. Pokud však používáte Cloudflare k ochraně a nabití vašich stránek, můžete toho využít Pracovníci Cloudflare pro manipulaci s hlavičkami odpovědí HTTP.

Cloudflare Workers je platforma bez serveru, kde můžete spouštět kód JavaScript, C, C++, Rust. Nasazuje se v každém datovém centru Cloudflare, kterých je po celém světě více než 200.

Implementace je velmi přímočará a flexibilní. Poskytuje vám flexibilitu při použití záhlaví na celém webu, včetně subdomény nebo konkrétního URI s a odpovídající vzorn pomocí Regex.

Pro tuto ukázku použiji kód od Scotta Helma.

Pojďme do toho…👨‍💻

• Přihlaste se do Cloudflare a klikněte na Workers (přímý odkaz)

• Zkopírujte kód worker.js z GitHub a vložte 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ě neukládat; možná budete chtít upravit následující záhlaví, aby splňovaly požadavek.

Content-Security-Policy – ​​pokud potřebujete použít zásady vaší aplikace, můžete to udělat zde.

Příklad – pokud potřebujete zdrojový obsah přes iFrame na více adresách URL, můžete využít předchůdců rámců, jak je uvedeno níže.

"Content-Security-Policy" : "frame-ancestors 'self' gf.dev etechblog.cz.com",

Výše uvedené umožní načítání obsahu z gf.dev, etechblog.cz.com a vlastního webu.

X-Frame-Options – můžete změnit na SAMEORIGIN, pokud máte v úmyslu zobrazovat obsah vašeho webu na nějaké stránce v rámci stejného webu pomocí prvku iframe.

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

Server – zde můžete dezinfikovat hlavičku serveru. Dejte, co chcete.

"Server" : "etechblog.cz Server",

RemoveHeaders – potřebujete odstranit některá záhlaví, abyste skryli verze a zmírnili tak zranitelnost úniku informací?

Můžete to udělat zde.

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

Přidávání nových hlaviček – pokud potřebujete do aplikací předat nějaké vlastní hlavičky, můžete je přidat v sekci securityHeaders, jak je uvedeno níže.

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

Jakmile dokončíte úpravu všech požadovaných záhlaví, pojmenujte pracovníka a klikněte na Uložit a nasadit.

Skvělý! pracovník je připraven a dále to musíme přidat na web, kde chcete použít záhlaví. Použiji to na svou laboratoř.

• Přejděte na domovskou stránku/hlavní panel Cloudflare a vyberte web.
• Přejděte na kartu Pracovníci >> Přidat trasu.
• Zadejte URL do Route; zde můžete použít Regex.
• Vyberte nově vytvořené pracovníky a uložte

To je vše; během vteřiny si všimnete, že na webu jsou implementovány všechny hlavičky.

Takto to vypadá z Chrome Dev Tools. Záhlaví můžete také otestovat pomocí nástroje záhlaví HTTP.

Nevím, proč se neodráží hlavička serveru. Myslím, že Cloudflare to potlačuje.

Vidíte, že celková implementace trvá ~15 minut a nejsou vyžadovány žádné prostoje nebo restarty jako Apache nebo Nginx. Pokud to plánujete použít na produkční web, doporučil bych nejprve otestovat na nižším prostředí nebo pomocí trasy můžete použít na testovacích stránkách a ověřit výsledky. Jakmile budete spokojeni, zatlačte tam, kam chcete.

To je úžasné!

Díky Scott pro kód.