Hoe u een Content-Security-Policy instelt in WordPress

Content-Security-Policy (CSP) is een van de krachtigste beschikbare beveiligingskoptekst-en, maar het is ook een van de lastigste om correct in te stellen op WordPress. De reden is eenvoudig: WordPress-core, thema's en plug-ins maken graag gebruik van inline-scripts en -stijlen. Een strikt CSP blokkeert deze standaard, wat betekent dat uw site op onverwachte manieren kan stukgaan als u niet zorgvuldig plant. Deze gids leidt u door het hele proces, van begrijpen wat CSP doet tot het uitrollen van een productieklaar beleid.

Waarom CSP bijzonder uitdagend is op WordPress

De meeste WordPress-sites leunen sterk op patronen die CSP juist beoogt te beperken. Hier zijn de meest voorkomende problemen die u tegen zult komen:

• Inline-scripts: veel plug-ins injecteren JavaScript direct in de HTML via <script>-tags zonder src-attribuut. Paginabouwers als Elementor, WPBakery en Divi doen dit volop.
• Inline-stijlen: de WordPress-Customizer, Gutenberg-blokken en de meeste thema's voegen style-attributen of <style>-blokken aan de pagina toe. Een strikt CSP zonder 'unsafe-inline' voor stijlen breekt het visuele uiterlijk van uw site.
• eval()-gebruik: sommige plug-ins gebruiken JavaScripts eval()-functie of soortgelijke constructies, waarvoor de richtlijn 'unsafe-eval' nodig is.
• Externe bronnen: Google Analytics, Google Fonts, reCAPTCHA, ingebedde YouTube-video's, social-mediawidgets. Voor elk is een eigen CSP-vermelding nodig.

Vanwege dit alles dient u nooit een CSP van een andere website te kopiëren en in uw WordPress-configuratie te plakken. Elke WordPress-site heeft een unieke combinatie van plug-ins en thema's, dus elk CSP moet op maat worden gemaakt.

Begin met report-only-modus om te ontdekken wat zou breken

De veiligste manier om te beginnen is met de Content-Security-Policy-Report-Only-koptekst. Deze koptekst gedraagt zich precies als CSP, behalve dat hij niets daadwerkelijk blokkeert. In plaats daarvan worden overtredingen in de browserconsole gelogd, zodat u kunt zien wat uw beleid zou tegenhouden. Niets op uw site breekt, maar u krijgt volledig zicht.

Voeg dit toe aan uw .htaccess-bestand (Apache):

<IfModule mod_headers.c>
    Header set Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self';"
</IfModule>

Of voor Nginx:

add_header Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self';" always;

Laat dit ten minste enkele dagen draaien en doorblader alle belangrijke pagina's van uw site (home, blogartikelen, contactformulier, WooCommerce-checkout indien van toepassing). Elke pagina kan andere plug-ins en bronnen laden.

Hoe u CSP-overtredingen vindt in de browserconsole

Open na het inschakelen van de Report-Only-modus uw site in Chrome of Firefox en druk op F12 om DevTools te openen. Ga naar het tabblad Console. CSP-overtredingen verschijnen als waarschuwingsberichten die er zo uitzien:

[Report Only] Refused to load the script 'https://www.googletagmanager.com/gtag/js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'".

Elk overtredingsbericht vertelt u precies wat geblokkeerd werd en welke richtlijn dit veroorzaakte. Verzamel al deze berichten en gebruik ze om uw allowlist op te bouwen. Bezoek elke belangrijke pagina op uw site, inclusief pagina's met formulieren, sliders, kaarten en pagina's die unieke plug-ins laden.

De belangrijkste CSP-richtlijnen voor WordPress begrijpen

Hier zijn de richtlijnen die u waarschijnlijk moet configureren:

• default-src: de fallback voor alle resourcetypen die niet expliciet zijn vermeld. Stel deze in op 'self' als basislijn.
• script-src: bepaalt waar JavaScript vandaan kan worden geladen. U heeft op WordPress vrijwel zeker 'unsafe-inline' nodig. Gebruikt een plug-in eval(), dan heeft u ook 'unsafe-eval' nodig.
• style-src: bepaalt waar CSS vandaan kan worden geladen. WordPress vereist hier vrijwel altijd 'unsafe-inline'.
• img-src: bepaalt afbeeldingsbronnen. Gebruik 'self' data: https: om uw eigen afbeeldingen, data-URI's (gebruikt door veel plug-ins) en elke afbeelding via HTTPS toe te staan.
• font-src: bepaalt het laden van lettertypen. Gebruikt u Google Fonts, voeg dan https://fonts.gstatic.com toe.
• connect-src: bepaalt waar JavaScript netwerkverzoeken naartoe kan doen (AJAX, fetch, WebSocket). Het WordPress-beheergedeelte gebruikt dit zwaar voor de REST API en de Heartbeat API.
• frame-src: bepaalt welke domeinen in iframes kunnen worden geladen. Nodig voor YouTube-embeds (https://www.youtube.com), Google Maps (https://www.google.com) en reCAPTCHA (https://www.google.com).
• media-src: bepaalt audio- en videobronnen. Doorgaans is 'self' voldoende, tenzij u externe media insluit.
• object-src: bepaalt plug-ins zoals Flash. Stel in op 'none' aangezien Flash dood is en deze richtlijn vooral oudere aanvalsvectoren afweert.

Uw beleid stap voor stap opbouwen

Begin met een restrictieve basislijn en voeg uitzonderingen toe naarmate u overtredingen ontdekt:

1. Begin met een minimaal beleid: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self';
2. Voeg unsafe-inline toe voor scripts en stijlen: dit is op WordPress vrijwel altijd nodig. script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';
3. Voeg data:-URI's toe voor afbeeldingen en lettertypen: veel plug-ins gebruiken base64-gecodeerde afbeeldingen. img-src 'self' data: https:; font-src 'self' data:;
4. Whitelist uw CDN: gebruikt u een CDN zoals Cloudflare of BunnyCDN, voeg het domein dan toe aan script-src, style-src, img-src en font-src.
5. Voeg externe diensten één voor één toe: voeg voor elke CSP-overtreding in de console het specifieke domein toe aan de bijbehorende richtlijn.

Veelvoorkomende allowlist-vermeldingen voor WordPress-sites

Hier is een overzicht van domeinen die u mogelijk nodig heeft voor populaire WordPress-integraties:

• Google Fonts: style-src https://fonts.googleapis.com en font-src https://fonts.gstatic.com
• Google Analytics / GA4: script-src https://www.googletagmanager.com https://www.google-analytics.com en connect-src https://www.google-analytics.com https://analytics.google.com
• Google Maps: script-src https://maps.googleapis.com en frame-src https://www.google.com
• YouTube-embeds: frame-src https://www.youtube.com https://www.youtube-nocookie.com
• reCAPTCHA: script-src https://www.google.com https://www.gstatic.com en frame-src https://www.google.com
• Gravatar: img-src https://secure.gravatar.com https://www.gravatar.com
• WordPress.org: img-src https://s.w.org https://ps.w.org (voor plug-in-/themapictogrammen in het beheergedeelte)

Een compleet WordPress-CSP-voorbeeld

Hier is een realistisch CSP voor een WordPress-site die Google Analytics, Google Fonts, YouTube-embeds en Gravatar gebruikt. Pas het aan uw specifieke behoeften aan:

<IfModule mod_headers.c>
    Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://www.google-analytics.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https: https://secure.gravatar.com; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self' https://www.google-analytics.com https://analytics.google.com; frame-src https://www.youtube.com https://www.youtube-nocookie.com; object-src 'none'; base-uri 'self'; form-action 'self';"
</IfModule>

WordPress-plug-ins voor het beheren van CSP

Voelt het bewerken van serverconfiguratiebestanden ontmoedigend, dan kunnen deze plug-ins helpen:

• HTTP Headers: een gratis plug-in waarmee u alle beveiligingskoptekst-en vanuit het WordPress-beheergedeelte kunt definiëren. Het ondersteunt CSP met een gebruiksvriendelijke interface waar u per richtlijn bronnen kunt toevoegen.
• Really Simple SSL Pro: bevat een Content-Security-Policy-module met overtredingslogboek en oplossingen-met-één-klik voor veelvoorkomende problemen.
• De CSP-plug-in van Jeremykendall: een lichtgewicht optie die zich uitsluitend richt op CSP-beheer.

Houd in gedachten dat plug-in-gebaseerde CSP-koptekst-en alleen worden verstuurd voor pagina's die door WordPress worden verwerkt. Statische bronnen die direct door uw webserver worden geleverd, dragen de koptekst niet. Voor volledige bescherming heeft configuratie op serverniveau de voorkeur.

Overschakelen van Report-Only naar handhavende modus

Heeft u minimaal een week in Report-Only-modus gedraaid en alle overtredingen opgelost, dan bent u klaar om over te schakelen. Wijzig simpelweg de naam van de koptekst van Content-Security-Policy-Report-Only naar Content-Security-Policy. Houd de eerste paar uur uw browserconsole open en monitor op overtredingen die u mogelijk gemist heeft. Breekt er iets, dan kunt u altijd terugschakelen naar Report-Only terwijl u het oplost.

Verifieer uw CSP met InspectWP

Voer na het implementeren van uw Content-Security-Policy een nieuwe InspectWP-scan uit. De sectie beveiligingskoptekst-en in uw rapport toont of een CSP-koptekst aanwezig is en of deze in Report-Only- of handhavende modus staat. Gebruik dit als een snelle controle na elke wijziging om te bevestigen dat uw beleid nog steeds correct wordt verstuurd.