CSP hlavičky

Možná jste si udělali test vlastních stránek na rychlost pomocí https://www.webpagetest.org/ a ve výsledcích se, trochu překvapivě, objevilo Security score a obrovské červené F. Důvodem, proč se tak stalo, mohou být chybějící CSP (Content Security Policy) hlavičky.

CSP hlavičky nejsou žádnou novinkou. Jsou tu s námi někdy od roku 2016. Proč jsou tedy teď pro nás tak zajímavé? Asi proto, že jsou plně podporovány ve všech moderních prohlížečích.

Co to vlastně jsou ty hlavičky a proč ztrácet čas jejich nastavováním? Jak praví klasik prostřednictvím Murphyho počítačových zákonů: “Každý netriviální program obsahuje alespoň jednu chybu”. Nemusíte s tím souhlasit, ale chyb a tím pádem děr, kterými se dají napadnout právě vaše stránky, je prostě plno. Obzvlášť pokud použitý kód není váš, ale i kdyby byl tak nikdy nemáte 100% jistotu, že něco, co používáte, nejde zneužít.

Takže pojďme spolu snížit pravděpodobnost, že do vaší prezentace někdo zanese nějaký nechtěný obsah.

V následující tabulce jsou (v době psaní článku) aktuální hlavičky, které lze nastavit.

CSP hlavičky:

Pojďme se podívat, na webové nástroje, kterými lze snadno otestovat SCP hlavičky.

Jedním z nejpoužívanějších je securityheaders.com. Je to pěkný nástroj, ale testuje opravdu pouze CSP hlavičky.

K mým oblíbeným patří observatory.mozilla.org, který je poněkud upovídanější a občas i přetížený, ale poskytuje širší pohled na celý web.

Další pěkný nástroj je od snyk.io, ale konec konců, ten je součástí již zmiňovaného webpagetestu.

Tak si zkuste otestovat svůj web, nebo třeba nějaké zpravodajské weby. V době psaní článku na tom byl nejhůře web České noviny.

Předpokládám, že v tuhle chvíli už máte otevřené desítky panelů s různými weby a nestačíte se divit. Tak asi nastal čas na trošku praxe.

Syntaxe CSP hlaviček je následující: 

Content-Security-Policy "direktiva zdroj zdroj zdroj; direktiva zdroj zdroj; direktiva zdroj zdroj"

(direktivy jsou odděleny středníkem, jednotlivé zdroje mezerou a celé je to v uvozovkách – tedy až na IIS – viz níže).

Pokud máme na serveru Apache, tak stačí např. do souboru .htaccess přidat řádek:

Header set Content-Security-Policy "script-src 'self' https://cernalistina.eu https://www.cernalistina.eu; object-src 'self'"

Pro Nginx se stejný efekt dosáhne přidáním add_header do bloku server {}, např.

add_header Content-Security-Policy "script-src 'self' https://cernalistina.eu https://www.cernalistina.eu; object-src 'self'"

Pro IIS můžete přidat do souboru web.config

<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="script-src 'self' https://cernalistina.eu https://www.cernalistina.eu; object-src 'self" />
</customHeaders>
</httpProtocol>
</system.webServer>

V případě tohoto webu, pak není problém velmi snadno dosáhnout A+ (nenačítají se tam žádné cizí zdroje, jako např. fonty, reklamy, skripty pro analýzu návštěvnosti).

Doporučené zdroje k prostudování:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

https://owasp.org/www-project-secure-headers/

Pokud přidáváme nějaké cizí zdroje, doporučuji vždy zkontrolovat přes konzoli prohlížeče funkčnost. V konzoli se objeví např. něco takového:

Content Security Policy: Nastavení stránky zablokovalo načítání zdroje na https://www.googletagmanager.com/a?id=GTM-KSZKRZX&cv=3&v=3&t=t&pid=723&rv=ar0&e=gtm.dom&eid=7&u=C&ut=C&tc=2&tr=5gclidw.5lcl.5lcl.5cl.1html.5html&ti=1gclidw.1lcl.1lcl.1cl.1html.1html&z=0 („img-src“).

Takže je jasné, že musíme přidat pro img-src kromě ‘self’ ještě i https://www.googletagmanager.com.

Další možností je použít hlavičku, která zavolá skript s reportem, co a kde neprošlo. Příklad je najdete zde (ano, je to deprecated, ale za to je to aktuálně podporované ve všech prohlížečích)

Přeji hodně A+