Opbouw van een website anno 2021

Websites zijn tegenwoordig een verzameling van honderden aparte bestanden zoals tekstdocumenten, afbeeldingen, scripts, stylesheets en lettertypen die allemaal naadloos moeten samenwerken om de complexe layout van de webpagina's op alle verschillende beeldformaten correct weer te geven en om alle functionaliteit zoals contactformulieren te laten werken.

Omdat het niet efficiënt is om het wiel opnieuw uit te vinden maken ontwikkelaars veel gebruik van hulpmiddelen en frameworks die door derde partijen zijn gecreëerd. Als je dus bijvoorbeeld naar www.nu.nl gaat worden er niet alleen bestanden vanuit www.nu.nl ingeladen, maar ook bestanden van onder andere dpgmmservices.nl, cookielaw.org, gigya.com, jquery.com, etc. - Je geeft dus andere websites toestemming om op jouw website bestanden te plaatsen.

Zoals je je misschien kunt voorstellen is het behoorlijk onveilig om zomaar iedereen toestemming te geven om bestanden op jouw openbare website te plaatsen, dit is waar een zogehete "Content Security Policy" (hierna CSP) heel goed van pas komt.

Wat is een CSP?

De CSP is een soort van toegangslijst met websites / servers die bestanden op jouw website mogen plaatsen, het idee is om deze lijst zo dicht mogelijk te timmeren en enkel (vertrouwde) derde partijen toe te laten als dit absoluut nodig is. Als je bijvoorbeeld een YouTube video op je website wil kunnen tonen zou je https://www.youtube.com als vertrouwde bron moeten toevoegen.

Hoe ziet zo'n CSP er nou uit? Zie hier een voorbeeld, in dit geval de CSP van één van onze websites:

default-src
	'none';
script-src
	'report-sample'
	'self'
	'unsafe-inline'
	'unsafe-eval'
	https://www.google.com
	https://www.gstatic.com
	https://www.googletagmanager.com
	https://www.google-analytics.com
	https://matomo.qteco.nl
	https://cdn.jsdelivr.net/npm/vue;
script-src-elem
	'self'
	'unsafe-inline'
	'unsafe-eval'
	https://www.google.com
	https://www.gstatic.com
	https://www.googletagmanager.com
	https://www.google-analytics.com
	https://matomo.qteco.nl
	https://cdn.jsdelivr.net/npm/vue;
style-src
	'report-sample'
	'self';
img-src
	'self'
	data:
	https://www.googletagmanager.com
	https://www.gstatic.com
	https://www.google-analytics.com;
font-src
	'self';
connect-src
	'self'
	https://www.google-analytics.com
	https://matomo.qteco.nl;
media-src
	'self';
object-src
	'none';
frame-src
	'self'
	https://www.google.com;
frame-ancestors
	'none';
form-action
	'self';
base-uri
	'none';
block-all-mixed-content

Legenda:

• "img-src": bron waar afbeeldingen vanaf mogen komen
• "script-src": bron waar scripts vanaf mogen komen
• "style-src": bron waar stylesheets vanaf mogen komen
• "font-src": bron waar lettertypes vanaf mogen komen
• "frame-src": bron waar iframes vanaf mogen komen
• "connect-src": bron waar verzoeken vanaf mogen komen
• "default-src": catch-all, als iets niet bij de bovenstaande items hoort wordt deze regel toegepast.

Zoals te zien is bijna overal "'self'" ingesteld, dit houdt in dat alleen lokale bestanden (van de website zelf) zijn toegestaan. De uitzonderingen zijn https://www.google.com, https://www.gstatic.com, https://consent.cookiebot.com, https://consentcdn.cookiebot.com, https://www.googletagmanager.com voor "script-src" en https://google.com en https://consentcdn.cookiebot.com voor "frame-src", deze verschillende websites van derde partijen zijn vereist om reCAPTCHA, Google Analytics en Cookiebot beveiliging te laten werken.

Dit is slechts een fractie van de inhoudsbronnen die je kunt beheren. Afhankelijk van de grootte en complexiteit van je website kan je CSP vele malen groter worden.

Naast het beheer over wie bestanden op je website mag plaatsen zijn er ook nog controles op het gebruik van "inline" scripts / stylesheets (deze worden op de webpagina zelf, zonder externe verzoeken uitgevoerd) en wordt het uitvoeren van bepaalde onveilige JavaScript methodes geblokkeerd.

Nuttige informatie:

Uitgebreide informatie over Content Security Policies:
https://infosec.mozilla.org/guidelines/web_security#content-security-policy

Hulpmiddel om het beveiligingsniveau van een website te testen:
https://observatory.mozilla.org