Frontend Security Headers: Zvládnutí Content Security Policy (CSP)

V dnešním digitálním prostředí, kde jsou webové aplikace stále složitější a propojenější, je ochrana před bezpečnostními hrozbami nanejvýš důležitá. Zatímco backend security často dostává značnou pozornost, frontend security je stejně zásadní. Frontendové bezpečnostní hlavičky fungují jako první linie obrany a poskytují mechanismus, jak instruovat prohlížeč, jak se má chovat a chránit uživatele před různými útoky. Mezi těmito hlavičkami vyniká Content Security Policy (CSP) jako výkonný nástroj pro zmírnění široké škály rizik.

Co jsou Frontend Security Headers?

Frontendové bezpečnostní hlavičky jsou hlavičky HTTP odpovědí, které webový server odesílá prohlížeči. Tyto hlavičky obsahují pokyny, jak by měl prohlížeč zpracovávat obsah, který obdrží. Pomáhají předcházet běžným útokům, jako jsou:

• Cross-Site Scripting (XSS): Vkládání škodlivých skriptů do důvěryhodných webových stránek.
• Clickjacking: Oklamání uživatelů, aby klikli na něco jiného, než si myslí.
• Man-in-the-Middle Attacks: Odposlouchávání komunikace mezi uživatelem a serverem.

Mezi nejdůležitější frontendové bezpečnostní hlavičky patří:

• Content Security Policy (CSP): Definuje zdroje, ze kterých smí prohlížeč načítat zdroje.
• Strict-Transport-Security (HSTS): Nutí prohlížeč používat HTTPS pro veškerou komunikaci s webem.
• X-Frame-Options: Zabraňuje vložení webu do iframe, čímž zmírňuje útoky clickjacking.
• X-XSS-Protection: Povoluje vestavěný XSS filtr prohlížeče. (Poznámka: Často nahrazeno CSP, ale stále může poskytovat vrstvu ochrany).
• Referrer-Policy: Řídí množství informací o referrerovi odesílaných s požadavky.
• Feature-Policy (nyní Permissions-Policy): Umožňuje vývojářům selektivně povolovat a zakazovat funkce prohlížeče a rozhraní API.

Hluboký ponor do Content Security Policy (CSP)

Content Security Policy (CSP) je hlavička HTTP odpovědi, která řídí zdroje, které může uživatelský agent načíst pro danou stránku. V podstatě vytváří whitelist zdrojů schváleného obsahu, čímž výrazně snižuje riziko XSS útoků. Explicitním definováním původů, ze kterých lze načítat zdroje, jako jsou skripty, šablony stylů, obrázky a písma, CSP značně ztěžuje útočníkům vkládání škodlivého kódu do vašeho webu.

Jak CSP funguje

CSP funguje tak, že prohlížeči poskytuje seznam schválených zdrojů pro různé typy obsahu. Když prohlížeč narazí na zdroj, který porušuje CSP, zablokuje tento zdroj a nahlásí porušení. Tento blokovací mechanismus zabraňuje spuštění škodlivého kódu, i když se útočníkovi podaří jej vložit do HTML.

CSP Direktiva

CSP direktivy jsou základní komponenty CSP politiky. Určují povolené zdroje pro různé typy zdrojů. Mezi nejběžněji používané direktivy patří:

• default-src: Nastaví výchozí zdroj pro všechny typy zdrojů. Toto je fallback direktiva, která se použije, pokud nejsou definovány jiné specifičtější direktivy.
• script-src: Určuje povolené zdroje pro JavaScript.
• style-src: Určuje povolené zdroje pro CSS šablony stylů.
• img-src: Určuje povolené zdroje pro obrázky.
• font-src: Určuje povolené zdroje pro písma.
• media-src: Určuje povolené zdroje pro audio a video.
• object-src: Určuje povolené zdroje pro pluginy, jako je Flash. (Obecně je nejlepší se vyhýbat povolování pluginů, pokud je to možné).
• frame-src: Určuje povolené zdroje pro framy (iframy).
• connect-src: Určuje povolené zdroje pro síťové požadavky (AJAX, WebSockets).
• base-uri: Omezuje adresy URL, které lze použít v elementu <base>.
• form-action: Omezuje adresy URL, na které lze odesílat formuláře.
• frame-ancestors: Určuje platné rodiče, kteří mohou vložit stránku pomocí <frame>, <iframe>, <object>, <embed> nebo <applet>. Tato direktiva poskytuje ochranu proti Clickjackingu.
• upgrade-insecure-requests: Instruuje uživatelské agenty, aby se ke všem nezabezpečeným adresám URL webu (načteným přes HTTP) chovali, jako by byly nahrazeny zabezpečenými adresami URL (načtenými přes HTTPS). Tato direktiva je určena pro weby, které jsou v procesu migrace z HTTP na HTTPS.
• report-uri: Určuje adresu URL, na kterou by měl prohlížeč odesílat zprávy o porušeních CSP. Zastaralé ve prospěch `report-to`.
• report-to: Určuje název skupiny definovaný v hlavičce `Report-To`. To umožňuje jemnější kontrolu nad reportingem, včetně určení více koncových bodů pro reporting.

CSP Hodnoty zdrojů

Hodnoty zdrojů definují původy, ze kterých lze zdroje načítat. Některé běžné hodnoty zdrojů zahrnují:

• *: Povoluje obsah z libovolného zdroje (Vyvarujte se použití v produkci!).
• 'self': Povoluje obsah ze stejného původu (schéma, hostitel a port) jako chráněný dokument.
• 'none': Zakazuje obsah z jakéhokoli zdroje.
• 'unsafe-inline': Povoluje použití inline JavaScriptu a CSS (Vyvarujte se použití v produkci!).
• 'unsafe-eval': Povoluje použití dynamického vyhodnocování kódu (např. eval(), Function()) (Vyvarujte se použití v produkci!).
• 'strict-dynamic': Určuje, že důvěra explicitně udělená skriptu přítomnému v kódu, doprovázená nonce nebo hashem, se přenese na všechny skripty načtené tímto předkem.
• 'unsafe-hashes': Povoluje specifické inline event handlery. To se obecně nedoporučuje kvůli složitosti a omezenému přínosu.
• data:: Povoluje načítání zdrojů z data URL (např. vložené obrázky). Používejte s opatrností.
• mediastream:: Umožňuje použití `mediastream:` URI jako zdroje médií.
• blob:: Umožňuje použití `blob:` URI jako zdroje médií.
• filesystem:: Umožňuje načítání zdrojů ze systému souborů.
• https://example.com: Povoluje obsah z konkrétní domény a portu.
• *.example.com: Povoluje obsah z jakékoli subdomény example.com.
• nonce-{random-value}: Povoluje skripty nebo styly s odpovídajícím atributem nonce. To vyžaduje generování náhodné hodnoty nonce na straně serveru pro každý požadavek.
• sha256-{hash-value}: Povoluje skripty nebo styly s odpovídajícím SHA256, SHA384 nebo SHA512 hashem.

CSP Režimy: Vynucení vs. Pouze pro hlášení

CSP lze nasadit ve dvou režimech:

• Režim vynucení: V tomto režimu prohlížeč blokuje všechny zdroje, které porušují CSP. Toto je doporučený režim pro produkční prostředí. CSP se odesílá pomocí hlavičky `Content-Security-Policy`.
• Režim Pouze pro hlášení: V tomto režimu prohlížeč hlásí porušení CSP, ale neblokuje zdroje. To je užitečné pro testování a vyhodnocování CSP před jeho vynucením. CSP se odesílá pomocí hlavičky `Content-Security-Policy-Report-Only`.

Implementace CSP: Průvodce krok za krokem

Implementace CSP se může zdát skličující, ale dodržováním strukturovaného přístupu můžete efektivně zabezpečit svou webovou aplikaci.

1. Začněte s politikou Pouze pro hlášení

Začněte nasazením CSP v režimu pouze pro hlášení. To vám umožní sledovat porušení bez narušení funkčnosti vašeho webu. Nakonfigurujte direktivu report-uri nebo report-to pro odesílání zpráv o porušení na určený koncový bod.

Příklad hlavičky (Pouze pro hlášení): Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

2. Analyzujte zprávy o porušení

Pečlivě analyzujte zprávy o porušení, abyste zjistili, které zdroje jsou blokovány a proč. To vám pomůže pochopit závislosti zdrojů vašeho webu a identifikovat potenciální bezpečnostní zranitelnosti.

Zprávy o porušení se obvykle odesílají jako JSON payloady na nakonfigurovaný koncový bod report-uri nebo report-to. Tyto zprávy obsahují informace o porušení, jako je blokované URI, porušená direktiva a URI dokumentu.

3. Upřesněte CSP politiku

Na základě zpráv o porušení upřesněte svou CSP politiku tak, aby povolovala legitimní zdroje a zároveň si zachovávala silné zabezpečení. Přidejte specifické hodnoty zdrojů pro zdroje, které jsou blokovány. Zvažte použití nonces nebo hashů pro inline skripty a styly, abyste se vyhnuli použití 'unsafe-inline'.

4. Přechod do režimu vynucení

Jakmile si budete jisti, že vaše CSP politika neblokuje legitimní zdroje, přejděte do režimu vynucení. Tím se zablokují všechna zbývající porušení a poskytne se robustní vrstva zabezpečení proti XSS útokům.

Příklad hlavičky (Vynucení): Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report

5. Monitorujte a udržujte CSP politiku

CSP není řešení typu nastav a zapomeň. Je nezbytné neustále monitorovat vaši CSP politiku a aktualizovat ji, jak se váš web vyvíjí a objevují se nové bezpečnostní hrozby. Pravidelně kontrolujte zprávy o porušení a podle potřeby upravte politiku.

Praktické CSP příklady

Pojďme se podívat na některé praktické CSP příklady pro různé scénáře:

Příklad 1: Základní CSP pro jednoduchý web

Tato CSP povoluje obsah ze stejného původu a povoluje obrázky z jakéhokoli zdroje.

Content-Security-Policy: default-src 'self'; img-src *

Příklad 2: CSP se specifickými zdroji skriptů a stylů

Tato CSP povoluje skripty ze stejného původu a ze specifického CDN a styly ze stejného původu a inline styly.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'

Příklad 3: CSP s Nonces pro Inline Skripty

Tato CSP vyžaduje jedinečný nonce pro každý inline skript.

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-r4nd0mn0nc3'

HTML:

<script nonce="r4nd0mn0nc3">console.log('Hello, world!');</script>

Důležité: Hodnota nonce musí být dynamicky generována na serveru pro každý požadavek. To zabraňuje útočníkům v opětovném použití nonce.

Příklad 4: CSP Omezující Předky Frame, aby se zabránilo Clickjackingu

Tato CSP zabraňuje vložení stránky do iframe na jakékoli doméně kromě `https://example.com`.

Content-Security-Policy: frame-ancestors 'self' https://example.com

Příklad 5: Restriktivnější CSP používající 'strict-dynamic' a fallback na 'self'

Tato CSP využívá `strict-dynamic` pro moderní prohlížeče a zároveň podporuje starší prohlížeče, které jej nepodporují. Zahrnuje také `report-uri` pro monitorování porušení.

Content-Security-Policy: default-src 'self'; script-src 'strict-dynamic' 'nonce-{random-nonce}' 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report

Nezapomeňte nahradit `{random-nonce}` dynamicky generovanou hodnotou nonce na straně serveru.

CSP a Single-Page Aplikace (SPA)

Implementace CSP v SPA může být náročná kvůli dynamické povaze těchto aplikací. SPA se často silně spoléhají na JavaScript pro generování a manipulaci s DOM, což může vést k porušením CSP, pokud se s nimi nezachází opatrně.

Zde je několik tipů pro implementaci CSP v SPA:

• Vyvarujte se 'unsafe-inline' a 'unsafe-eval': Těmto direktivám byste se měli v SPA co nejvíce vyhýbat. Výrazně oslabují zabezpečení vaší aplikace.
• Použijte Nonces nebo Hashe: Použijte nonces nebo hashe pro inline skripty a styly. Toto je doporučený přístup pro SPA.
• Zvažte Trusted Types: Trusted Types je rozhraní API prohlížeče, které pomáhá předcházet zranitelnostem XSS založeným na DOM. Lze jej použít ve spojení s CSP k dalšímu zvýšení zabezpečení.
• Použijte framework kompatibilní s CSP: Některé frontendové frameworky (jako React se specifickými konfiguracemi, Angular a Vue.js) poskytují funkce, které vám pomohou snadněji implementovat CSP.

Další důležité frontendové bezpečnostní hlavičky

Zatímco CSP je základním kamenem frontendové bezpečnosti, jiné hlavičky hrají zásadní roli při poskytování komplexní obranné strategie:

Strict-Transport-Security (HSTS)

Hlavička Strict-Transport-Security (HSTS) instruuje prohlížeč, aby se k webu vždy připojoval pomocí HTTPS. Tím se zabrání útokům man-in-the-middle, které se pokoušejí snížit úroveň připojení na HTTP.

Příklad hlavičky: Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

• max-age: Určuje dobu trvání (v sekundách), po kterou si má prohlížeč pamatovat, že má k webu přistupovat pouze přes HTTPS. Pro produkční prostředí se doporučuje hodnota 31536000 sekund (1 rok).
• includeSubDomains: Označuje, že se HSTS politika vztahuje na všechny subdomény domény.
• preload: Umožňuje zahrnout doménu do seznamu domén s povoleným HSTS, který je přednačten do prohlížečů. To vyžaduje odeslání vaší domény do seznamu přednačtení HSTS, který spravuje Google.

X-Frame-Options

Hlavička X-Frame-Options zabraňuje útokům clickjacking řízením, zda lze web vložit do iframe.

Příklad hlavičky: X-Frame-Options: DENY

Možné hodnoty:

• DENY: Zabraňuje zobrazení stránky v iframe, bez ohledu na původ.
• SAMEORIGIN: Povoluje zobrazení stránky v iframe pouze v případě, že se původ iframe shoduje s původem stránky.
• ALLOW-FROM uri: Povoluje zobrazení stránky v iframe pouze v případě, že se původ iframe shoduje se zadaným URI. Poznámka: Tato možnost je zastaralá a nemusí být podporována všemi prohlížeči.

Poznámka: Direktiva frame-ancestors v CSP poskytuje flexibilnější a výkonnější způsob, jak řídit framing, a obecně se upřednostňuje před X-Frame-Options.

X-XSS-Protection

Hlavička X-XSS-Protection povoluje vestavěný XSS filtr prohlížeče. Zatímco CSP je robustnější řešení pro prevenci XSS útoků, tato hlavička může poskytnout další vrstvu ochrany, zejména pro starší prohlížeče, které nemusí plně podporovat CSP.

Příklad hlavičky: X-XSS-Protection: 1; mode=block

• 1: Povoluje XSS filtr.
• 0: Zakazuje XSS filtr.
• mode=block: Instruuje prohlížeč, aby zablokoval stránku, pokud je detekován XSS útok.
• report=uri: Určuje adresu URL, na kterou by měl prohlížeč odeslat zprávu, pokud je detekován XSS útok.

Referrer-Policy

Hlavička Referrer-Policy řídí množství informací o referrerovi, které se odesílají s požadavky. Informace o referrerovi lze použít ke sledování uživatelů napříč weby, takže jejich kontrola může zlepšit soukromí uživatelů.

Příklad hlavičky: Referrer-Policy: strict-origin-when-cross-origin

Některé běžné hodnoty:

• no-referrer: Nikdy neodesílejte hlavičku Referer.
• no-referrer-when-downgrade: Neodesílejte hlavičku Referer na původy bez TLS (HTTPS).
• origin: Odesílejte v hlavičce Referer pouze původ (schéma, hostitel a port).
• origin-when-cross-origin: Odesílejte původ pro požadavky mezi původy a celou adresu URL pro požadavky se stejným původem.
• same-origin: Odesílejte hlavičku Referer pro požadavky se stejným původem, ale ne pro požadavky mezi původy.
• strict-origin: Odesílejte pouze původ, když úroveň zabezpečení protokolu zůstává stejná (HTTPS na HTTPS), ale neodesílejte žádnou hlavičku do méně zabezpečeného cíle (HTTPS na HTTP).
• strict-origin-when-cross-origin: Odesílejte původ při provádění požadavku se stejným původem. Pro požadavky mezi původy odesílejte původ pouze tehdy, když úroveň zabezpečení protokolu zůstává stejná (HTTPS na HTTPS), ale neodesílejte žádnou hlavičku do méně zabezpečeného cíle (HTTPS na HTTP).
• unsafe-url: Odesílejte v hlavičce Referer celou adresu URL, bez ohledu na původ. Používejte s extrémní opatrností, protože to může odhalit citlivé informace.

Permissions-Policy (dříve Feature-Policy)

Hlavička Permissions-Policy (dříve známá jako Feature-Policy) umožňuje vývojářům selektivně povolovat a zakazovat funkce prohlížeče a rozhraní API. To může pomoci snížit útočnou plochu vaší aplikace a zlepšit soukromí uživatelů.

Příklad hlavičky: Permissions-Policy: geolocation=()

Tento příklad zakáže rozhraní API pro geolokaci pro web.

Mezi další funkce, které lze ovládat pomocí Permissions-Policy, patří:

• camera
• microphone
• geolocation
• accelerometer
• gyroscope
• magnetometer
• usb
• midi
• payment
• fullscreen

Nastavení bezpečnostních hlaviček na různých platformách

Metoda nastavení bezpečnostních hlaviček se liší v závislosti na webovém serveru nebo platformě, kterou používáte. Zde je několik běžných příkladů:

Apache

Bezpečnostní hlavičky můžete nastavit v Apache přidáním do souboru .htaccess nebo do konfiguračního souboru serveru (httpd.conf).

Příklad konfigurace .htaccess:

<IfModule mod_headers.c>
 Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report"
 Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
 Header set X-Frame-Options "DENY"
 Header set X-XSS-Protection "1; mode=block"
 Header set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

Nginx

Bezpečnostní hlavičky můžete nastavit v Nginx přidáním do serverového bloku v konfiguračním souboru Nginx (nginx.conf).

Příklad konfigurace Nginx:

server {
 listen 443 ssl;
 server_name example.com;

 add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report";
 add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
 add_header X-Frame-Options "DENY";
 add_header X-XSS-Protection "1; mode=block";
 add_header Referrer-Policy "strict-origin-when-cross-origin";

 ...
}

Node.js (Express)

Bezpečnostní hlavičky můžete nastavit v Node.js pomocí middleware, jako je Helmet.

Příklad použití Helmet:

const express = require('express');
const helmet = require('helmet');

const app = express();

app.use(helmet());

// Přizpůsobte CSP, pokud je to potřeba
app.use(helmet.contentSecurityPolicy({
 directives: {
 defaultSrc: ["'self'"],
 scriptSrc: ["'self'", "https://cdn.example.com"],
 styleSrc: ["'self'", "'unsafe-inline'"],
 imgSrc: ["'self'", "data:"],
 reportUri: '/csp-report'
 },
}));

app.get('/', (req, res) => {
 res.send('Hello World!');
});

app.listen(3000, () => {
 console.log('Server listening on port 3000');
});

Cloudflare

Cloudflare vám umožňuje nastavit bezpečnostní hlavičky pomocí jejich Page Rules nebo Transform Rules.

Testování vašich bezpečnostních hlaviček

Po implementaci bezpečnostních hlaviček je důležité je otestovat, abyste se ujistili, že fungují správně. Několik online nástrojů vám může pomoci analyzovat bezpečnostní hlavičky vašeho webu:

• SecurityHeaders.com: Jednoduchý a efektivní nástroj pro analýzu bezpečnostních hlaviček.
• Mozilla Observatory: Komplexní nástroj pro testování zabezpečení webu, včetně bezpečnostních hlaviček.
• WebPageTest.org: Umožňuje zobrazit HTTP hlavičky v grafu vodopádu.

Závěr

Frontendové bezpečnostní hlavičky, zejména Content Security Policy (CSP), jsou nezbytné pro ochranu webových aplikací před různými útoky a zvýšení bezpečnosti uživatelů. Pečlivou implementací a údržbou těchto hlaviček můžete výrazně snížit riziko XSS, clickjackingu a dalších bezpečnostních zranitelností. Nezapomeňte začít s politikou pouze pro hlášení, analyzovat zprávy o porušení, upřesnit politiku a poté přejít do režimu vynucení. Pravidelně monitorujte a aktualizujte své bezpečnostní hlavičky, aby byl váš web zabezpečený, jak se vyvíjí a objevují se nové hrozby.

Přijetím proaktivního přístupu k frontendové bezpečnosti můžete vytvářet bezpečnější a důvěryhodnější webové aplikace, které chrání vaše uživatele a vaše podnikání.