Maak Content-Security-Policy headers in .htaccess leesbaar

Vraag:

Ik heb Timdehoog.nl voorzien van diverse security headers om de beveiliging te verhogen. Een bekende daarvan is de Content-Security-Policy. Hiermee kan je aangeven welke interne en externe bronnen ingeladen mogen worden. Andere bronnen worden standaard geblokkeerd.

Met de Content-Security-Policy kan je dus voorkomen dat gevaarlijke JS bestanden ingeladen worden. Ik adviseer deze beveiliging in te stellen voor iedere website. Nadeel alleen is dat je alle bronnen moet specificeren. Voor een WordPress website zoals de mijne wordt dit al snel een lange lijst.

Hoe kan ik deze lijst beter leesbaar & onderhoudbaar maken?

Antwoord:

Standaard had ik alle bronnen op een regel staan:

Header set Content-Security-Policy "default-src 'self' tools.akismet.com *.wp.com csi.gstatic.com region1.google-analytics.com googleads.g.doubleclick.net www.google.com *.googlesyndication.com www.googletagmanager.com www.google-analytics.com www.googleapis.com pzz.to *.linkpizza.com pzz.events; frame-ancestors 'self' *.wp.com; script-src-elem 'unsafe-inline' 'self' pzz.io stats.wp.com www.google-analytics.com adservice.google.nl adservice.google.com *.googleadservices.com *.googlesyndication.com www.googletagmanager.com adservice.google.be ; script-src 'unsafe-inline' 'unsafe-eval' 'self' *.googleapis.com *.googlesyndication.com *.googleadservices.com www.googletagmanager.com adservice.google.nl adservice.google.com cdn.ampproject.org *.googletagservices.com www.google-analytics.com *.wp.com pzz.io cdn.jsdelivr.net; style-src 'unsafe-inline' 'self' *.googleapis.com *.wp.com secure.gravatar.com *.bootstrapcdn.com cdn.jsdelivr.net; font-src data: 'self' fonts.gstatic.com *.wp.com wordpress.com *.bootstrapcdn.com; media-src 'self'; img-src data: 'self' *.w.org *.wp.com *.wordpress.com *.gravatar.com *.googlesyndication.com region1.google-analytics.com www.google-analytics.com www.googletagmanager.com ajax.googleapis.com; report-uri https://www.timdehoog.nl/report_csp_errors.php "

Het resultaat is een string van 1304 tekens waardoor het lang en onleesbaar werd. Telkens moet je een eind naar rechts of links scrollen om bronnen toe te voegen of te verwijderen.

Maar je kan deze header ook opbreken door gebruik te maken van een \ (slash). Elk brontype heb ik op een nieuw regel gezet. Belangrijk om te weten is dat de laatste regel niet mag eindigen met een \ (slash) maar met ” (aanhalingsteken). De aanhalingsteken heb je ook aan het begin van de header gebruikt.

Vanaf nu staan de bronnen verdeeld over meerdere regels:

Header set Content-Security-Policy " \
default-src 'self' tools.akismet.com *.wp.com csi.gstatic.com region1.google-analytics.com googleads.g.doubleclick.net www.google.com *.googlesyndication.com www.googletagmanager.com www.google-analytics.com www.googleapis.com pzz.to *.linkpizza.com pzz.events; \
frame-ancestors 'self' *.wp.com; \
script-src-elem 'unsafe-inline' 'self' pzz.io stats.wp.com www.google-analytics.com adservice.google.nl adservice.google.com *.googleadservices.com *.googlesyndication.com www.googletagmanager.com adservice.google.be; \
script-src 'unsafe-inline' 'unsafe-eval' 'self' *.googleapis.com *.googlesyndication.com *.googleadservices.com www.googletagmanager.com adservice.google.nl adservice.google.com cdn.ampproject.org *.googletagservices.com www.google-analytics.com *.wp.com pzz.io cdn.jsdelivr.net; \
style-src 'unsafe-inline' 'self' *.googleapis.com *.wp.com secure.gravatar.com *.bootstrapcdn.com cdn.jsdelivr.net; \
font-src data: 'self' fonts.gstatic.com *.wp.com wordpress.com *.bootstrapcdn.com; media-src 'self'; \
img-src data: 'self' *.w.org *.wp.com *.wordpress.com *.gravatar.com *.googlesyndication.com region1.google-analytics.com www.google-analytics.com www.googletagmanager.com ajax.googleapis.com; \
report-uri https://www.timdehoog.nl/report_csp_errors.php "

Tip 1 – Test security headers na wijzigen

Vergeet na het wijzigen niet om de security headers te testen om te zien of deze nog juist werken. Dat kan je doen via Securityheaders.com en door jouw website te bezoeken met de web developer toolbar open. Maak je gebruik van Redis cache of een WordPress cache plugin? Wis of leeg deze dan eerst zodat je zeker weet dat je test met de laatste versie.

Tip 2 – Gebruik de report-uri

Automatisch op de hoogte zijn van bronnen die niet ingeladen kunnen worden maar misschien wel ingeladen moeten worden? Maak dan gebruik van de report-uri waarover je meer kan lezen in mijn andere blog Content-Security-Policy laten rapporteren als URL’s geblokkeerd worden.

Tip 3 – Begin eens met een lege Content-Security-Policy

Over het algemeen komen er door de maanden of jaren alleen maar URLs of instellingen bij. Soms kan het interessant zijn om met een lege lijst te beginnen. Zo weet je zeker dat er alleen bronnen in staan die nog nodig zijn. Nadeel hiervan is dat je wel de gehele website moet testen om zeker te zijn dat deze nog juist werkt. Een mogelijk voordeel is dat de lijst weer een stukje korter wordt.

Bron:

Tip voor het gebruiken van \ gedeeld door Kyllian Warmerdam.