Content Security Policy (CSP) -määritykset Seravolla

Content Security Policy (CSP) on HTTP-vastausotsake (header), jolla määritellään selaimelle sallitut sisällönlähteet, kuten mistä osoitteista skriptejä, tyylitiedostoja, kuvia ja fontteja saa ladata. Oikein määritelty CSP on tehokas suojamuuri, joka estää haitallisen koodin ajamisen selaimessa ja suojaa sivustoa erityisesti XSS-hyökkäyksiltä (Cross-Site Scripting) sekä sivuston luvattomalta upottamiselta (klikkauskaappaus eli Clickjacking).

Seravon nginx-palvelimilla on kaikilla sivustoilla oletuksena käytössä perustason CSP-määritys tiedostossa /data/wordpress/nginx/security.conf:

add_header Content-Security-Policy "upgrade-insecure-requests";

Tämä oletussääntö ohjaa selaimen lataamaan mahdolliset suojaamattomat (HTTP) resurssit automaattisesti salatun HTTPS-yhteyden yli. Tämä opas neuvoo, kuinka voit ottaa käyttöön laajemman ja tiukemman CSP-suojauksen turvallisesti ilman, että sivuston ulkoasu tai toiminnot rikkoutuvat.

Edellytykset

SSH-yhteys palvelimelle.
Ymmärrys sivuston käyttämistä ulkoisista resursseista (kuten Google Analytics, upotetut videot, chat-widgetit tai ulkoiset fontit).

Tärkeimmät direktiivit ja WordPress-erityishuomiot

Ennen sääntöjen käyttöönottoa on tärkeää ymmärtää yleisimmät CSP-direktiivit:

default-src: Oletussääntö kaikille resurssityypeille, joille ei ole määritelty omaa direktiiviä.
script-src: Sallitut JavaScript-lähteet.
style-src: Sallitut CSS-tyylitiedostot ja -lähteet.
img-src: Sallitut kuvalähteet.
font-src: Sallitut fonttilähteet (esim. Google Fonts).
frame-ancestors: Määrittää, mille sivustoille tämän sivuston saa upottaa kehyksenä (suojaa Clickjackingilta).

Huomioitavaa WordPress-ympäristöstä:

WordPressin ydin, monet lisäosat ja suositut sivunrakentajat (kuten Elementor ja Divi) käyttävät dynaamisesti luotuja sisäisiä skriptejä ja tyylejä (inline styles / scripts). Tämän vuoksi direktiiveissä script-src ja style-src on WordPress-sivustolla lähes poikkeuksetta oltava sallittuna määrite 'unsafe-inline', ja usein dynaamisia skriptejä varten myös 'unsafe-eval'. Ilman näitä sivuston hallintapaneeli tai ulkoasu saattaa lakata toimimasta.

CSP-sääntöjen turvallinen käyttöönotto vaiheittain

Koska liian tiukat säännöt estävät selainta lataamasta sivuston tarvitsemia tiedostoja, käyttöönotto tulee aina tehdä vaiheittain raportointitilaa hyödyntäen.

1. Määritä säännöt testitilassa (Report-Only)

Aloita käyttämällä Content-Security-Policy-Report-Only -otsaketta. Tässä tilassa selain ei vielä estä yhdenkään resurssin lataamista, vaan ainoastaan raportoi havaitut poikkeamat selaimen kehittäjäkonsoliin.

Yhdistä sivustolle SSH:lla ja avaa nginx-tietoturva-asetustiedosto:
```
nano /data/wordpress/nginx/security.conf
```

Korvaa tai täydennä olemassa oleva CSP-rivi testitilan säännöillä. Esimerkki kattavasta peruspohjasta:

add_header Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.google-analytics.com https://www.googletagmanager.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: https:; frame-ancestors 'self';";

Tallenna tiedosto (nanossa Ctrl + O, Enter ja poistu Ctrl + X).

2. Tarkista nginx-syntaksi ja käynnistä se uudelleen

Ennen nginx:n uudelleenkäynnistystä varmista aina, ettei konfiguraatioon jäänyt kirjoitusvirheitä:

wp-restart-nginx --test

Jos testi antaa ilmoituksen syntax is ok, käynnistä nginx uudelleen:

wp-restart-nginx

3. Seuraa ja korjaa virheet selaimen kehittäjätyökaluilla

Avaa sivusto selaimessa ja avaa kehittäjätyökalujen konsoli (paina F12 ja valitse Console).
Selaa läpi sivuston eri sivutyyppejä (etusivu, yhteydenottolomake, verkkokaupan kassa, WP-admin).
Etsi keltaisia tai punaisia CSP-varoituksia (esim. "Refused to load the script...").
Mikäli jokin sivuston tarvitsema luotettava ulkoinen palvelu (kuten YouTube-upotus tai chat-työkalu) aiheuttaa ilmoituksen, lisää kyseisen palvelun domain vastaavaan direktiiviin security.conf-tiedostossa ja käynnistä nginx uudelleen.

4. Aktivoi suojaus tuotantoon

Kun olet selannut sivustoa eikä konsoliin enää tulostu aiheettomia varoituksia, voit kytkeä suojauksen virallisesti päälle:

Avaa tiedosto uudelleen:

nano /data/wordpress/nginx/security.conf

Muuta otsakkeen nimi Content-Security-Policy-Report-Only muotoon Content-Security-Policy.
Tallenna tiedosto ja käynnistä Nginx:
```
wp-restart-nginx
```

Testaaminen ja vianmääritys

Miten tarkistan aktiivisen otsakkeen komentoriviltä?
Voit tarkistaa palvelimen palauttamat otsakkeet suoraan komennolla:
```
curl -I https://esimerkki.fi
```
Tarkista tulosteesta, että content-security-policy-otsake löytyy ja sisältää määrittämäsi säännöt.
Sivuston tyylit tai toiminnot rikkoutuivat heti käyttöönoton jälkeen?
Tämä johtuu useimmiten siitä, että jokin teeman skripti tai tyyli vaatii 'unsafe-inline' -määritteen tai sivustolle ladataan resursseja domainista, jota ei ole erikseen sallittu. Voit palauttaa otsakkeen nopeasti takaisin muotoon Content-Security-Policy-Report-Only ja ajaa komennon wp-restart-nginx, jolloin sivusto palautuu toimintaan ja voit jatkaa puuttuvien sääntöjen täydentämistä.

Katso myös

Content Security Policy on erittäin järeä suojausmenetelmä, mutta sen ylläpito vaatii tarkkaavaisuutta erityisesti silloin, kun sivustolle asennetaan uusia lisäosia tai ulkoisia seurantakoodeja. Hyödyntämällä raportointitilaa varmistat, että sivustosi pysyy täysin suojattuna ilman riskiä toimintakatkoista. Mikäli tarvitset apua monimutkaisten CSP-sääntöjen määrittelyssä, Seravon asiantuntijat auttavat mielellään osoitteessa [email protected].

Aiheeseen liittyvät artikkelit