Zabezpečení frontendu: Prevence XSS a zásady Content Security Policy (CSP)

V dnešním prostředí webového vývoje je zabezpečení frontendu nanejvýš důležité. Jak se webové aplikace stávají stále složitějšími a interaktivnějšími, stávají se také zranitelnějšími vůči různým útokům, zejména Cross-Site Scripting (XSS). Tento článek poskytuje komplexního průvodce porozuměním a zmírňováním zranitelností XSS, jakož i implementací Content Security Policy (CSP) jako robustního obranného mechanismu.

Porozumění Cross-Site Scripting (XSS)

Co je XSS?

Cross-Site Scripting (XSS) je typ injekčního útoku, kdy jsou škodlivé skripty vloženy do jinak neškodných a důvěryhodných webových stránek. K útokům XSS dochází, když útočník používá webovou aplikaci k odeslání škodlivého kódu, obecně ve formě skriptu na straně prohlížeče, jinému koncovému uživateli. Chyby, které umožňují úspěšné provedení těchto útoků, jsou poměrně rozšířené a vyskytují se kdekoli, kde webová aplikace používá vstup od uživatele ve výstupu, který generuje, bez ověření nebo zakódování.

Představte si populární online fórum, kde uživatelé mohou zveřejňovat komentáře. Pokud fórum správně neošetřuje uživatelský vstup, útočník by mohl vložit škodlivý fragment JavaScriptu do komentáře. Když ostatní uživatelé zobrazí tento komentář, škodlivý skript se spustí v jejich prohlížečích a potenciálně ukradne jejich soubory cookie, přesměruje je na phishingové stránky nebo poškodí webové stránky.

Typy útoků XSS

• Reflected XSS: Škodlivý skript je vložen do jediné žádosti. Server přečte vložená data z požadavku HTTP a odešle je zpět uživateli, čímž spustí skript v jeho prohlížeči. Toho se často dosahuje prostřednictvím phishingových e-mailů obsahujících škodlivé odkazy.
• Stored XSS: Škodlivý skript je uložen na cílovém serveru (např. v databázi, příspěvku na fóru nebo v sekci komentářů). Když ostatní uživatelé přistupují k uloženým datům, skript se spustí v jejich prohlížečích. Tento typ XSS je obzvláště nebezpečný, protože může ovlivnit velké množství uživatelů.
• DOM-based XSS: Zranitelnost existuje v kódu JavaScriptu na straně klienta samotném. Útok manipuluje s DOM (Document Object Model) v prohlížeči oběti, což způsobí spuštění škodlivého skriptu. To často zahrnuje manipulaci s adresami URL nebo jinými daty na straně klienta.

Dopad XSS

Důsledky úspěšného útoku XSS mohou být závažné:

• Krádež souborů cookie: Útočníci mohou ukrást uživatelské soubory cookie a získat přístup k jejich účtům a citlivým informacím.
• Únos účtu: S ukradenými soubory cookie se útočníci mohou vydávat za uživatele a provádět akce jejich jménem.
• Poškození webových stránek: Útočníci mohou upravit vzhled webových stránek, šířit dezinformace nebo poškodit pověst značky.
• Přesměrování na phishingové stránky: Uživatelé mohou být přesměrováni na škodlivé webové stránky, které ukradnou jejich přihlašovací údaje nebo nainstalují malware.
• Exfiltrace dat: Citlivá data zobrazená na stránce mohou být ukradena a odeslána na server útočníka.

Techniky prevence XSS

Prevence útoků XSS vyžaduje vícevrstvý přístup, zaměřený na validaci vstupu i kódování výstupu.

Validace vstupu

Validace vstupu je proces ověřování, zda uživatelský vstup odpovídá očekávanému formátu a datovému typu. I když to není spolehlivá obrana proti XSS, pomáhá to snížit plochu útoku.

• Validace pomocí whitelistu: Definujte přísnou sadu povolených znaků a vzorů. Odmítněte jakýkoli vstup, který neodpovídá whitelistu. Pokud například očekáváte, že uživatel zadá jméno, povolte pouze písmena, mezery a případně pomlčky.
• Validace pomocí blacklistu: Identifikujte a blokujte známé škodlivé znaky nebo vzory. Blacklisty jsou však často neúplné a mohou být obejity chytrými útočníky. Validace pomocí whitelistu je obecně upřednostňována před validací pomocí blacklistu.
• Validace datového typu: Zajistěte, aby vstup odpovídal očekávanému datovému typu (např. celé číslo, e-mailová adresa, URL).
• Limity délky: Uložte maximální limity délky na vstupní pole, abyste zabránili zranitelnostem přetečení vyrovnávací paměti.

Příklad (PHP):

<?php $username = $_POST['username']; // Validace pomocí whitelistu: Povolte pouze alfanumerické znaky a podtržítka if (preg_match('/^[a-zA-Z0-9_]+$/', $username)) { // Platné uživatelské jméno echo "Platné uživatelské jméno: " . htmlspecialchars($username, ENT_QUOTES, 'UTF-8'); } else { // Neplatné uživatelské jméno echo "Neplatné uživatelské jméno. Povoleny jsou pouze alfanumerické znaky a podtržítka."; } ?>

Kódování výstupu (Escaping)

Kódování výstupu, známé také jako escaping, je proces převodu speciálních znaků na jejich entity HTML nebo ekvivalenty zakódované v URL. Tím se zabrání prohlížeči interpretovat znaky jako kód.

• Kódování HTML: Escapujte znaky, které mají zvláštní význam v HTML, jako jsou <, >, &, " a '. Použijte funkce jako htmlspecialchars() v PHP nebo ekvivalentní metody v jiných jazycích.
• Kódování URL: Escapujte znaky, které mají zvláštní význam v adresách URL, jako jsou mezery, lomítka a otazníky. Použijte funkce jako urlencode() v PHP nebo ekvivalentní metody v jiných jazycích.
• Kódování JavaScriptu: Escapujte znaky, které mají zvláštní význam v JavaScriptu, jako jsou jednoduché uvozovky, dvojité uvozovky a zpětná lomítka. Použijte funkce jako JSON.stringify() nebo knihovny jako ESAPI (Encoder).

Příklad (JavaScript - Kódování HTML):

function escapeHTML(str) { let div = document.createElement('div'); div.appendChild(document.createTextNode(str)); return div.innerHTML; } let userInput = '<script>alert("XSS");</script>'; let encodedInput = escapeHTML(userInput); // Výstup zakódovaného vstupu do DOM document.getElementById('output').innerHTML = encodedInput; // Output: &lt;script&gt;alert("XSS");&lt;/script&gt;

Příklad (Python - Kódování HTML):

import html user_input = '<script>alert("XSS");</script>' encoded_input = html.escape(user_input) print(encoded_input) # Output: &lt;script&gt;alert("XSS");&lt;/script&gt;

Kódování v závislosti na kontextu

Typ kódování, který použijete, závisí na kontextu, ve kterém se data zobrazují. Pokud například zobrazujete data v atributu HTML, musíte použít kódování atributu HTML. Pokud zobrazujete data v řetězci JavaScriptu, musíte použít kódování řetězce JavaScriptu.

Příklad:

<input type="text" value="<?php echo htmlspecialchars($_GET['name'], ENT_QUOTES, 'UTF-8'); ?>">

V tomto příkladu se hodnota parametru name z adresy URL zobrazuje v atributu value vstupního pole. Funkce htmlspecialchars() zajišťuje, že všechny speciální znaky v parametru name jsou správně zakódovány, což zabraňuje útokům XSS.

Použití šablonovacího stroje

Mnoho moderních webových frameworků a šablonovacích strojů (např. React, Angular, Vue.js, Twig, Jinja2) poskytuje mechanismy automatického kódování výstupu. Tyto stroje automaticky escapují proměnné, když jsou vykreslovány v šablonách, čímž snižují riziko zranitelností XSS. Vždy používejte vestavěné funkce escapování vašeho šablonovacího stroje.

Content Security Policy (CSP)

Co je CSP?

Content Security Policy (CSP) je přidaná vrstva zabezpečení, která pomáhá detekovat a zmírňovat určité typy útoků, včetně Cross-Site Scripting (XSS) a útoků injekce dat. CSP funguje tak, že vám umožňuje definovat whitelist zdrojů, ze kterých může prohlížeč načítat zdroje. Tento whitelist může zahrnovat domény, protokoly a dokonce i konkrétní adresy URL.

Ve výchozím nastavení prohlížeče umožňují webovým stránkám načítat zdroje z libovolného zdroje. CSP mění toto výchozí chování omezením zdrojů, ze kterých lze zdroje načítat. Pokud se webová stránka pokusí načíst zdroj ze zdroje, který není na whitelistu, prohlížeč požadavek zablokuje.

Jak CSP funguje

CSP je implementována odesláním hlavičky HTTP odpovědi ze serveru do prohlížeče. Hlavička obsahuje seznam direktiv, z nichž každá specifikuje zásadu pro konkrétní typ zdroje.

Příklad hlavičky CSP:

Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; style-src 'self' https://cdn.example.com; img-src 'self' data:; font-src 'self';

Tato hlavička definuje následující zásady:

• default-src 'self': Umožňuje načítat zdroje pouze ze stejného původu (domény) jako webová stránka.
• script-src 'self' https://example.com: Umožňuje načítat JavaScript ze stejného původu a z https://example.com.
• style-src 'self' https://cdn.example.com: Umožňuje načítat CSS ze stejného původu a z https://cdn.example.com.
• img-src 'self' data:: Umožňuje načítat obrázky ze stejného původu a z datových URI (obrázky zakódované v base64).
• font-src 'self': Umožňuje načítat písma ze stejného původu.

Direktivy CSP

Zde jsou některé z nejčastěji používaných direktiv CSP:

• default-src: Nastavuje výchozí zásadu pro všechny typy zdrojů.
• script-src: Definuje zdroje, ze kterých lze načítat JavaScript.
• style-src: Definuje zdroje, ze kterých lze načítat CSS.
• img-src: Definuje zdroje, ze kterých lze načítat obrázky.
• font-src: Definuje zdroje, ze kterých lze načítat písma.
• connect-src: Definuje původy, ke kterým se klient může připojit (např. prostřednictvím WebSockets, XMLHttpRequest).
• media-src: Definuje zdroje, ze kterých lze načítat zvuk a video.
• object-src: Definuje zdroje, ze kterých lze načítat pluginy (např. Flash).
• frame-src: Definuje původy, které lze vložit jako rámy (<frame>, <iframe>).
• base-uri: Omezuje adresy URL, které lze použít v elementu <base> dokumentu.
• form-action: Omezuje adresy URL, na které lze odesílat formuláře.
• upgrade-insecure-requests: Instruuje prohlížeč, aby automaticky upgradoval nezabezpečené požadavky (HTTP) na zabezpečené požadavky (HTTPS).
• block-all-mixed-content: Zabraňuje prohlížeči načítat jakýkoli smíšený obsah (obsah HTTP načítaný přes HTTPS).
• report-uri: Určuje adresu URL, na kterou by měl prohlížeč odesílat zprávy o porušení zásad CSP.
• report-to: Určuje název skupiny definovaný v hlavičce `Report-To`, která obsahuje koncové body pro odesílání zpráv o porušení. Modernější a flexibilnější náhrada za `report-uri`.

Hodnoty seznamu zdrojů CSP

Každá direktiva CSP přijímá seznam hodnot zdrojů, které určují povolené původy nebo klíčová slova.

• 'self': Umožňuje zdroje ze stejného původu jako webová stránka.
• 'none': Zakazuje zdroje ze všech původů.
• 'unsafe-inline': Umožňuje inline JavaScript a CSS. Tomu by se mělo pokud možno vyhnout, protože to oslabuje ochranu proti XSS.
• 'unsafe-eval': Umožňuje použití eval() a souvisejících funkcí. Tomu byste se také měli vyhnout, protože to může zavést bezpečnostní zranitelnosti.
• 'strict-dynamic': Určuje, že důvěra explicitně daná skriptu v kódu, prostřednictvím doprovodného nonce nebo hashe, se rozšíří na všechny skripty načtené tímto kořenovým skriptem.
• https://example.com: Umožňuje zdroje z konkrétní domény.
• *.example.com: Umožňuje zdroje z jakékoli subdomény konkrétní domény.
• data:: Umožňuje datové URI (obrázky zakódované v base64).
• mediastream:: Umožňuje `mediastream:` URI pro `media-src`.
• blob:: Umožňuje `blob:` URI (používané pro binární data uložená v paměti prohlížeče).
• filesystem:: Umožňuje `filesystem:` URI (používané pro přístup k souborům uloženým v sandboxovaném systému souborů prohlížeče).
• nonce-{random-value}: Umožňuje inline skripty nebo styly, které mají odpovídající atribut nonce.
• sha256-{hash-value}: Umožňuje inline skripty nebo styly, které mají odpovídající hash sha256.

Implementace CSP

Existuje několik způsobů, jak implementovat CSP:

• Hlavička HTTP: Nejběžnější způsob implementace CSP je nastavením hlavičky HTTP Content-Security-Policy v odpovědi serveru.
• Meta tag: CSP lze také definovat pomocí tagu <meta> v dokumentu HTML. Tato metoda je však méně flexibilní a má určitá omezení (např. nelze ji použít k definování direktivy frame-ancestors).

Příklad (Nastavení CSP prostřednictvím hlavičky HTTP - Apache):

Ve svém konfiguračním souboru Apache (např. .htaccess nebo httpd.conf) přidejte následující řádek:

Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://example.com; style-src 'self' https://cdn.example.com; img-src 'self' data:; font-src 'self';"

Příklad (Nastavení CSP prostřednictvím hlavičky HTTP - Nginx):

Ve svém konfiguračním souboru Nginx (např. nginx.conf) přidejte následující řádek do bloku server:

add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://example.com; style-src 'self' https://cdn.example.com; img-src 'self' data:; font-src 'self';";

Příklad (Nastavení CSP prostřednictvím Meta tagu):

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://example.com; style-src 'self' https://cdn.example.com; img-src 'self' data:; font-src 'self';">

Testování CSP

Je velmi důležité otestovat implementaci CSP, abyste se ujistili, že funguje podle očekávání. Můžete použít vývojářské nástroje prohlížeče ke kontrole hlavičky Content-Security-Policy a ke kontrole případných porušení.

Hlášení CSP

Použijte direktivy `report-uri` nebo `report-to` ke konfiguraci hlášení CSP. To umožní vašemu serveru přijímat zprávy, když je zásada CSP porušena. Tyto informace mohou být neocenitelné pro identifikaci a opravu bezpečnostních zranitelností.

Příklad (CSP s report-uri):

Content-Security-Policy: default-src 'self'; report-uri /csp-report-endpoint;

Příklad (CSP s report-to - modernější):

Report-To: {"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://your-domain.com/csp-report-endpoint"}]} Content-Security-Policy: default-src 'self'; report-to csp-endpoint;

Koncový bod na straně serveru (`/csp-report-endpoint` v těchto příkladech) by měl být nakonfigurován tak, aby přijímal a zpracovával tyto zprávy JSON a protokoloval je pro pozdější analýzu.

Osvědčené postupy CSP

• Začněte s přísnou zásadou: Začněte s restriktivní zásadou, která povoluje pouze zdroje ze stejného původu (default-src 'self'). Postupně uvolňujte zásadu podle potřeby a přidávejte konkrétní zdroje podle potřeby.
• Vyhněte se 'unsafe-inline' a 'unsafe-eval': Tyto direktivy významně oslabují ochranu proti XSS. Snažte se jim vyhnout, kdykoli je to možné. Používejte nonces nebo hashe pro inline skripty a styly a vyhněte se používání eval().
• Používejte nonces nebo hashe pro inline skripty a styly: Pokud musíte použít inline skripty nebo styly, použijte nonces nebo hashe k jejich whitelistu.
• Používejte hlášení CSP: Nakonfigurujte hlášení CSP pro příjem oznámení, když je zásada porušena. To vám pomůže identifikovat a opravit bezpečnostní zranitelnosti.
• Důkladně otestujte implementaci CSP: Použijte vývojářské nástroje prohlížeče ke kontrole hlavičky Content-Security-Policy a ke kontrole případných porušení.
• Použijte generátor CSP: Několik online nástrojů vám může pomoci vygenerovat hlavičky CSP na základě vašich konkrétních požadavků.
• Monitorujte zprávy CSP: Pravidelně kontrolujte zprávy CSP, abyste identifikovali potenciální bezpečnostní problémy a vylepšili svou zásadu.
• Udržujte CSP aktuální: Jak se vaše webová stránka vyvíjí, ujistěte se, že aktualizujete CSP, aby odrážela jakékoli změny v závislostech zdrojů.
• Zvažte použití linteru Content Security Policy (CSP): Nástroje jako `csp-html-webpack-plugin` nebo rozšíření prohlížeče mohou pomoci ověřit a optimalizovat konfiguraci CSP.
• Postupně vynucujte CSP (režim pouze pro hlášení): Zpočátku nasaďte CSP v režimu "pouze pro hlášení" pomocí hlavičky `Content-Security-Policy-Report-Only`. To vám umožní sledovat potenciální porušení zásad, aniž byste ve skutečnosti blokovali zdroje. Analyzujte zprávy a dolaďte CSP před jeho vynucením.

Příklad (Implementace Nonce):

Strana serveru (Generování Nonce):

<?php $nonce = base64_encode(random_bytes(16)); ?>

HTML:

<script nonce="<?php echo $nonce; ?>"> // Váš inline skript zde console.log('Inline script s nonce'); </script>

Hlavička CSP:

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-<?php echo $nonce; ?>';

CSP a knihovny třetích stran

Při používání knihoven třetích stran nebo CDN se ujistěte, že zahrnujete jejich domény do své zásady CSP. Pokud například používáte jQuery z CDN, budete muset přidat doménu CDN do direktivy script-src.

Slepé whitelisting celé CDN však může zavést bezpečnostní rizika. Zvažte použití Subresource Integrity (SRI) k ověření integrity souborů načtených z CDN.

Subresource Integrity (SRI)

SRI je bezpečnostní funkce, která prohlížečům umožňuje ověřit, zda soubory načtené z CDN nebo jiných zdrojů třetích stran nebyly pozměněny. SRI funguje tak, že porovnává kryptografický hash načteného souboru se známým hashem. Pokud se hashe neshodují, prohlížeč zablokuje načtení souboru.

Příklad:

<script src="https://example.com/jquery.min.js" integrity="sha384-example-hash" crossorigin="anonymous"></script>

Atribut integrity obsahuje kryptografický hash souboru jquery.min.js. Atribut crossorigin je vyžadován, aby SRI fungoval se soubory obsluhovanými z různých původů.

Závěr

Zabezpečení frontendu je kritickým aspektem webového vývoje. Pochopením a implementací technik prevence XSS a Content Security Policy (CSP) můžete výrazně snížit riziko útoků a chránit data svých uživatelů. Nezapomeňte přijmout vícevrstvý přístup, který kombinuje validaci vstupu, kódování výstupu, CSP a další osvědčené postupy zabezpečení. Neustále se učte a buďte informováni o nejnovějších bezpečnostních hrozbách a technikách zmírňování, abyste mohli vytvářet bezpečné a robustní webové aplikace.

Tento průvodce poskytuje základní pochopení prevence XSS a CSP. Pamatujte, že zabezpečení je neustálý proces a neustálé učení je nezbytné pro udržení si náskoku před potenciálními hrozbami. Implementací těchto osvědčených postupů můžete pro své uživatele vytvořit bezpečnější a důvěryhodnější webový zážitek.