Je hebt een mooie website gebouwd, HTTPS staat aan, alles werkt perfect. Maar wist je dat er nog een laag bescherming is die je gratis kunt toevoegen? Security headers. En nee, je hoeft geen developer te zijn om dit te snappen.
Webknecht.nl scoort een A+ op securityheaders.com. In dit artikel legt de webknecht uit wat dat betekent, welke headers er zijn, en waarom dit belangrijk is voor jouw website.
Wat zijn security headers eigenlijk?
Security headers zijn instructies die je webserver meestuurt naar de browser van je bezoeker. Ze zeggen dingen als “mag deze site in een iframe geladen worden?” of “welke scripts mag deze pagina draaien?”.
Denk aan security headers als de huisregels van je website. Je hebt al een slot op de deur (HTTPS), maar met deze headers installeer je ook een camera, een alarm, en een extra grendel.
Het mooie: je bezoeker merkt er niks van. De bescherming werkt volledig op de achtergrond.
De security headers van webknecht.nl (A+ score)
Laten we door de headers lopen die webknecht.nl gebruikt. Voor elke header leg ik uit wat die doet en waarom je hem wilt hebben.
1. Strict-Transport-Security (HSTS)
Wat doet het: Dwingt browsers om altijd HTTPS te gebruiken, zelfs als iemand per ongeluk http:// intypt.
Waarom belangrijk: Als een bezoeker “webknecht.nl” intypt (zonder https://), stuurt de browser eerst een HTTP request. Een aanvaller kan die onderscheppen. Met HSTS onthoudt de browser: “deze site is altijd HTTPS, ik probeer het niet eens via HTTP”.
Webknecht.nl instelling:
max-age=31536000; includeSubDomains; preload
Dit betekent: 1 jaar onthouden, ook voor subdomeinen, en op de HSTS preload lijst (browsers hebben dit ingebakken).
2. Content-Security-Policy (CSP)
Wat doet het: Bepaalt welke scripts, stylesheets en andere content je website mag laden.
Waarom belangrijk: Dit is je verdediging tegen XSS (cross-site scripting) aanvallen. Als een hacker een kwaadaardig script probeert te injecteren, blokkeert de CSP dat automatisch.
Webknecht.nl aanpak: We gebruiken een nonce-based CSP. Elk inline script krijgt een unieke code (nonce) die elke pageload verandert. Scripts zonder geldige nonce worden geblokkeerd.
Voorbeeld van onze CSP:
script-src 'self' 'nonce-abc123' https://www.googletagmanager.com
Dit betekent: alleen scripts van onze eigen server, scripts met de juiste nonce, en Google Analytics. Alles anders: geblokkeerd.
3. X-Frame-Options
Wat doet het: Voorkomt dat je website in een iframe op een andere site geladen kan worden.
Waarom belangrijk: Dit beschermt tegen clickjacking. Een aanvaller kan je site niet in een onzichtbaar iframe laden en je bezoekers misleiden om op dingen te klikken die ze niet zien.
Webknecht.nl instelling:
SAMEORIGIN – Alleen webknecht.nl zelf mag de site in een iframe laden.
4. X-Content-Type-Options
Wat doet het: Voorkomt dat browsers het bestandstype “raden”.
Waarom belangrijk: Soms probeert een browser slim te zijn en denkt “dit bestand zegt dat het een plaatje is, maar het ziet eruit als JavaScript, laat ik het als JavaScript uitvoeren”. Dat kan gevaarlijk zijn.
Webknecht.nl instelling:
nosniff – Browser, vertrouw gewoon op wat we zeggen dat het bestand is.
5. Referrer-Policy
Wat doet het: Bepaalt hoeveel informatie de browser deelt wanneer je naar een andere site klikt.
Waarom belangrijk: Privacy. Als iemand op webknecht.nl een link naar een externe site klikt, hoeft die externe site niet te weten op welke specifieke pagina je zat.
Webknecht.nl instelling:
strict-origin-when-cross-origin – Bij externe links sturen we alleen het domein (webknecht.nl), niet de volledige URL.
6. Permissions-Policy
Wat doet het: Schakelt onnodige browser features uit (camera, microfoon, geolocation).
Waarom belangrijk: Een tutorial website heeft geen camera of microfoon nodig. Door deze expliciet uit te zetten voorkom je dat kwaadaardige scripts hier misbruik van maken.
Webknecht.nl instelling:
Alles uit: geolocation=(), microphone=(), camera=(), payment=(), usb=()
7. X-XSS-Protection
Wat doet het: Een legacy header die oude browsers helpt tegen XSS-aanvallen.
Waarom belangrijk: Moderne browsers gebruiken CSP, maar oude browsers (Internet Explorer) hebben deze header nog nodig.
Webknecht.nl instelling:
1; mode=block – XSS-filter aan, blokkeer de pagina bij verdachte content.
Hoe kom je van een F naar een A+?
De meeste websites scoren een F op securityheaders.com. Niet omdat ze slecht beveiligd zijn, maar omdat ze geen enkele security header hebben ingesteld.
Stap 1: Basis headers (van F naar C)
Voeg HSTS en X-Frame-Options toe via je .htaccess of webserver config. Dit kost 5 minuten.
Stap 2: CSP toevoegen (van C naar B)
Begin met een simpele CSP: default-src 'self'. Test je site grondig.
Stap 3: CSP verfijnen (van B naar A)
Vervang 'unsafe-inline' door nonces. Dit is het lastigste deel, maar levert de meeste security op.
Stap 4: Permissions-Policy (van A naar A+)
Schakel onnodige browser features uit.
De CSP uitdaging: unsafe-inline verwijderen
De meeste websites blijven hangen op een B of C omdat ze 'unsafe-inline' in hun CSP hebben staan. Dat betekent: alle inline JavaScript mag draaien. Handig, maar niet veilig.
Webknecht.nl oplossing: nonce-based CSP
We genereren voor elke pageload een unieke nonce (random code). Elk inline script krijgt die nonce:
<script nonce="abc123xyz">
// Dit script mag draaien
</script>Scripts zonder de juiste nonce worden geblokkeerd. Zelfs als een hacker een script weet te injecteren, heeft die geen geldige nonce.
Implementatie op WordPress:
We hebben een nonce generator in functions.php die automatisch alle scripts voorziet van een nonce. Google Analytics, Table of Contents, alles krijgt een nonce via PHP.
Veelgemaakte fouten bij security headers
1. Te strikte CSP die je eigen site breekt
Begin ruim, maak het stap voor stap strenger. Test altijd grondig.
2. HSTS zonder test
Als je HSTS aanzet met max-age van 1 jaar, en je HTTPS werkt niet goed, zit je vast. Begin met max-age=300 (5 minuten) om te testen.
3. Vergeten external resources toe te staan
Google Analytics, fonts, embedded video’s – die moet je expliciet toestaan in je CSP.
4. X-Frame-Options vs frame-ancestors
X-Frame-Options is legacy. CSP’s frame-ancestors doet hetzelfde maar beter. Gebruik beide voor oude browsers.
Tools om je security headers te testen
1. securityheaders.com
De standaard. Voer je URL in, krijg een score van F tot A+. Inclusief uitleg wat er mist.
2. Browser DevTools
Open F12 → Network tab → klik op je eerste request → kijk bij Response Headers. Hier zie je alle headers die je server meestuurt.
3. observatory.mozilla.org
Meer gedetailleerde test, inclusief TLS/SSL configuratie en certificate chain.
4.CSP Evaluator (Google)
Test specifiek je Content-Security-Policy op zwakke plekken.
Is een A+ score echt nodig?
Eerlijk antwoord: hangt af van je site.
Je hebt een A+ nodig als:
- Je site heeft een login (user data opslaan)
- Je verwerkt betalingen of persoonlijke info
- Je site is een target (groot bedrijf, overheid)
- Je wilt op de HSTS preload lijst
Een B of C is prima als:
- Je hebt een simpele blog zonder login
- Je site is statisch (geen user input)
- Je hebt geen budget voor developer tijd
Voor webknecht.nl: We hebben geen login, maar als tutorial platform over website beveiliging willen we practise what we preach. Vandaar de A+.
Security headers voor verschillende platforms
WordPress (zoals webknecht.nl)
Voeg headers toe via functions.php met add_action('send_headers') voor dynamische nonces. Basis headers via .htaccess.
OnePage
OnePage regelt security headers automatisch. Je hoeft niks te doen, krijgt direct een goede score.
Webflow
Webflow heeft standaard HSTS en basis headers. CSP moet je via custom code toevoegen (beperkter dan WordPress).
Statische site (HTML)
Alles via .htaccess of webserver config. Geen dynamische nonces mogelijk, dus CSP met ‘unsafe-inline’ accepteren.
De toekomst: waar gaan security headers heen?
1. Permissions-Policy wordt strenger
Verwacht dat browsers standaard meer features uitschakelen. Expliciet toestemming vragen wordt de norm.
2. CSP Level 3
Nieuwe features zoals ‘strict-dynamic’ maken nonce-based CSP makkelijker te implementeren.
3. Reporting API
CSP violations sturen naar een endpoint zodat je kunt monitoren wat er geblokkeerd wordt.
4. HTTPS wordt vereist
Veel security headers werken alleen over HTTPS. Browsers gaan HTTP sites steeds harder straffen.
Conclusie: security headers zijn het laaghangend fruit
Een A+ score op securityheaders.com is geen doel op zich. Het is een bijproduct van een goed beveiligde website.
Begin met de basics: HSTS, X-Frame-Options, X-Content-Type-Options. Dat levert al een C of B op en beschermt tegen de meeste aanvallen.
Investeer in CSP: Dit is waar de echte bescherming zit. Begin simpel, verfijn later naar nonce-based.
Test grondig: Elke header kan je site breken als je het verkeerd configureert. Test in development, gebruik korte max-age waardes, monitor je error logs.
Webknecht.nl heeft een A+ omdat we stap voor stap security hebben toegevoegd. Nonce-based CSP, alle onnodige features uit, HSTS met preload. Het resultaat: een site die niet alleen veilig is, maar ook laat zien dat het kan.
Jouw site kan dit ook. Begin vandaag met één header. Morgen voeg je er een toe. Voor je het weet: A+.