Kan ik gebruik maken van CSP (Content Security Policy)?

Gewijzigd op Tue, 25 Jul 2023 om 01:54 PM

Content Security Policy (CSP) is een belangrijk mechanisme voor webbeveiliging dat is ontworpen om aanvallen zoals cross-site scripting (XSS) en data-injectie te verminderen. Het is een extra beveiligingslaag die wordt toegevoegd aan moderne webapplicaties om de kans op het succesvol exploiteren van beveiligingslekken te verkleinen.

Het idee achter CSP is om de browser te instrueren over welke bronnen (zoals scripts, afbeeldingen, stijlbladen, lettertypen, enz.) mogen worden geladen en uitgevoerd op een webpagina. Hierdoor kan de browser alleen toegang geven tot die bronnen die zijn geautoriseerd door de CSP, waardoor potentiële aanvallers worden beperkt in hun mogelijkheden om schadelijke inhoud in te voegen.

Toepassing van Content Security Policy

De toepassing van CSP omvat enkele essentiële stappen om een effectieve beveiligingslaag voor uw webapplicatie te creëren:

1. Definieer de CSP-header

De eerste stap is om de CSP-header te definiëren en deze in te sluiten in de HTTP-respons van uw webserver. De CSP-header bevat de beveiligingsbeleidsregels die de browser zal volgen bij het laden van inhoud. De CSP-header kan worden ingesteld in de configuratie van de webserver of via de metatag <meta> in de HTML van uw pagina.

2. Bepaal de bronnen die zijn toegestaan

In de CSP-header specificeer uw welke bronnen zijn toegestaan om te worden geladen en uitgevoerd op uw website. Dit omvat domeinen voor scripts, afbeeldingen, stijlbladen, lettertypen en andere bronnen. Hier is een voorbeeld van hoe u verschillende bronnen kunt specificeren:

Content-Security-Policy: default-src 'self'; script-src 'self' www.example.com; style-src 'self' fonts.googleapis.com; img-src 'self' data:; font-src 'self' fonts.gstatic.com;

default-src: Stelt de standaardbron in voor alle bronnen als er geen specifieke beleidsregel is opgegeven.
script-src: Specificeert de bronnen die mogen worden gebruikt voor JavaScript-bestanden.
style-src: Geeft de bronnen aan die zijn toegestaan voor CSS-stijlbladen.
img-src: Beperkt de locaties waaruit afbeeldingen kunnen worden weergegeven.
font-src: Specificeert de domeinen waaruit lettertypen mogen worden gedownload.

Laten we een CSP instellen voor een WordPress site, let wel. Een correcte CSP kan afhangen van de plug-ins, thema's en functionaliteiten die uw website gebruikt. Hier is echter een basisvoorbeeld van een CSP die u als startpunt kunt gebruiken voor uw WordPress-website:

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' ajax.googleapis.com; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data:; font-src 'self' fonts.gstatic.com; connect-src 'self'; frame-src 'self';

Laten we elk van de CSP-beleidsregels in dit voorbeeld kort uitleggen:

default-src 'self': Stelt de standaardbron in voor alle soorten bronnen, en het is hier ingesteld als 'self', wat betekent dat alle bronnen vanaf dezelfde host als de website zijn toegestaan.
script-src 'self' 'unsafe-inline' 'unsafe-eval' ajax.googleapis.com: Hiermee worden scripts toegestaan vanaf dezelfde host ('self') en vanaf 'ajax.googleapis.com'. We hebben ook 'unsafe-inline' en 'unsafe-eval' toegevoegd om inline-scripts en eval()-functies mogelijk te maken. Dit is nodig omdat sommige thema's en plug-ins mogelijk inline-scripts gebruiken.
style-src 'self' 'unsafe-inline' fonts.googleapis.com: Hiermee worden stijlbladen toegestaan vanaf dezelfde host ('self') en vanaf 'fonts.googleapis.com'. Net als bij scripts staan we 'unsafe-inline' toe voor inline-stijlen.
img-src 'self' data:: Hiermee worden afbeeldingen toegestaan vanaf dezelfde host ('self') en ook data: URI-schema's voor inline-afbeeldingen.
font-src 'self' fonts.gstatic.com: Hiermee worden lettertypen toegestaan vanaf dezelfde host ('self') en vanaf 'fonts.gstatic.com'.
connect-src 'self': Hiermee worden verzoeken naar dezelfde host ('self') toegestaan, bijvoorbeeld voor AJAX-verzoeken.
frame-src 'self': Hiermee worden iframes toegestaan vanaf dezelfde host ('self').

Dit is slechts een deel van de mogelijkheden en een complexere (WordPress) site zal wellicht een net andere policy nodig hebben. Wilt u een uitgebreide Policy maken dan adviseren wij het gebruik van https://report-uri.com/home/generate/

3. Gebruik van nonce of hash

Om inline-scripts of inline-stijlen toe te staan, die anders als onveilig worden beschouwd vanwege XSS-risico's, kunt u een nonce (nummer voor eenmalig gebruik) of een hash gebruiken. Deze techniek stelt de browser in staat om inline-scripts en -stijlen te verifiëren en alleen uit te voeren als de juiste nonce of hash overeenkomt met de in de CSP-header opgegeven waarde.

4. Rapportage en fallback

CSP kan in rapportagemodus worden geplaatst om potentiële beveiligingsproblemen te identificeren voordat u een strikt beleid implementeert. Hierbij worden inbreuken gerapporteerd aan een door uw gespecificeerde URL. Op deze manier kunt u mogelijke problemen oplossen voordat u het beveiligingsbeleid aanscherpt.

Bovendien is het raadzaam om een fallback-strategie te implementeren voor oudere browsers die geen CSP ondersteunen. Op deze manier kunt u zorgen dat uw webapplicatie nog steeds correct werkt op deze browsers, terwijl u toch de beveiligingsvoordelen krijgt op moderne browsers die CSP ondersteunen.

5. Het instellen van CSP in het Plesk Adminpanel
We stellen het CSP bij voorkeur in als headers in de Apache configuratie van uw website;

Login op het Plesk Adminpanel
Klik op Hosting & DNS en daarna op Apache & nginx Settings
Scroll op de volgende pagina naar beneden en kopieer uw policy (in onderstaande screenshot gebruiken we de voorbeeld code) in beide velden
Klik vervolgens op OK om het toe te passen of apply in het geval u nog wijzigingen wilt toepassen.