Content Security Policy voor WordPress websites

Sinds de lancering van mijn nieuwe website maak ik gebruik van security headers om de beveiliging te verhogen. Hierover heb ik in het verleden al een blog over geschreven.

Een van de die beveiligingen is Content Security Policy of afgekort ook wel CSP genoemd. Hiermee geef je op met welke externe websites verbinding gemaakt mag worden. Je hebt generieke instellingen, maar je kan het ook tot op detailniveau instellen. Zo kan je opgeven dat er met website a alleen verbinding gemaakt mag worden voor afbeeldingen. Vanaf website b mogen alleen Javascript bestanden ingeladen worden.

Het is een hele goede beveiliging om misbruik op afstand te voorkomen. Enig nadeel is dat plugins of diensten van WordPress soms niet meer werken als je deze activeert. Dit komt door de CSP omdat er verbinding gemaakt wordt met een website die je niet opgegeven hebt. Kijken waarom er verbinding nodig is en de website toevoegen is zo gedaan. Echter dit is wel iets wat je niet moet vergeten.

Mijn CSP instellingen in .htaccess:

Header set Content-Security-Policy "default-src *.timdehoog.nl *.wp.com; frame-src *.timdehoog.nl googleads.g.doubleclick.net *.wp.com; script-src 'unsafe-inline' 'unsafe-eval' *.timdehoog.nl *.googleapis.com *.googlesyndication.com adservice.google.nl adservice.google.com *.wp.com; style-src 'unsafe-inline' *.timdehoog.nl *.googleapis.com *.wp.com *.bootstrapcdn.com; font-src data: *.timdehoog.nl fonts.gstatic.com *.wp.com wordpress.com *.bootstrapcdn.com; media-src *.timdehoog.nl; img-src data: *.timdehoog.nl *.w.org *.wp.com *.wordpress.com *.gravatar.com"
Header set X-Content-Security-Policy "default-src *.timdehoog.nl *.wp.com; frame-src *.timdehoog.nl googleads.g.doubleclick.net *.wp.com; script-src 'unsafe-inline' 'unsafe-eval' *.timdehoog.nl *.googleapis.com *.googlesyndication.com adservice.google.nl adservice.google.com *.wp.com; style-src 'unsafe-inline' *.timdehoog.nl *.googleapis.com *.wp.com *.bootstrapcdn.com; font-src data: *.timdehoog.nl fonts.gstatic.com *.wp.com wordpress.com *.bootstrapcdn.com; media-src *.timdehoog.nl; img-src data: *.timdehoog.nl *.w.org *.wp.com *.wordpress.com *.gravatar.com"

Om bovenstaande code te kunnen gebruik moet de Apache mod_headers module geïnstalleerd en geactiveerd zijn.

Toelichting:
Content-Security-Policy geldt voor Chrome / Safari / Firefox / Opera. X-Content-Security-Policy geldt voor IE 10 en IE 11. De inhoud van de headers zijn telkens verder hetzelfde. Je kan websites opgeven zoals www.timdehoog.nl of je kan gebruik maken van *.timdehoog.nl om alle subdomeinen toe te staan. Gebruik maken van een * scheelt instellen maar staat wel toe dat alle subdomeinen worden geaccepteerd door de website.

Elke instellingen zoals default-src of frame-src wordt afgesloten met een ; (puntkomma). Wil je snel klaar zijn dan geef je de domeinen op bij default-src. Dit betekent dat vrijwel alle bestanden van externe websites ingeladen kunnen worden. Dit verlaagt weer de beveiliging van de website. Ik heb *.timdehoog.nl opgegeven omdat ik mijn eigen website volledig vertrouw. Ik heb *.wp.com opgegeven omdat vanaf deze website veel verschillende bestanden werden ingeladen. Hier opgeven was handiger dan afzonderlijk per instelling.

Wil je alleen toestaan om Javascript bestanden in te laden dan geef je de website op bij script-src. Mogen alleen CSS bestanden ingeladen worden dan gebruik je de instelling style-src. Als je website lettertypes extern inlaad via bijvoorbeeld Google Fonts, dan moet je dit opgeven bij font-src. Websites met video/audio bestanden geef je op bij media-src. Afbeeldingen hebben hun eigen instelling genaamd img-src.

Naast de instellingen vind je ook nog de parameter unsafe-inline die inline code in de de eigen website toestaat. De parameter unsafe-eval staat alleen de uitvoering van Javascript van opgegeven websites toe.

Debuggen:
Om CSP in te stellen zorg je er eerst voor dat de headers worden verstuurd. Open vervolgens de web developer toolbar van de browser en klik op het tabje console. Bezoek nu een aantal pagina’s. Zie je CSP meldingen dan moet je de instellingen aanpassen. Chrome legt duidelijk uit welke website ontbreekt bij welke instelling.

CSP wel of niet doen:
Voor optimale beveilging zou ik het wel adviseren om te doen. Voor WordPress websites kan het wel behoorlijk wat instelwerk zijn omdat er vaak gebruik gemaakt wordt van plugins. Dit betekent dus niet dat je na een keer instellen klaar bent want na een update kan het anders zijn. Heb je een maatwerk website dan zal het instellen veel minder tijd kosten. Voor WordPress geldt overigens ook dat je CSP niet voor 100% in kan stellen tenzij je alles tot in detail op wil geven. Soms is het handiger om het * te gebruiken of de instelling default-src.