Website beveiligen met Content Security Policy (CSP)
Let op: de content security policy is een krachtige methode om je website te beveiligen, echter kan dit ook veel problemen opleveren! Goed testen is dus erg belangrijk!
Magento gebruikers opgelet: sinds versie 2.3.5 wordt er in Magento standaard een Content Security Policy ingesteld. Hier kan je hem dus niet via de .htaccess afdwingen!
Wat is Content Security Policy (CSP)?
De Content Security Policy (CSP) is een erg krachtig hulpmiddel om diverse aanvallen tegen te gaan. De hele korte uitleg van wat het doet is dat je met een CSP kan aangeven vanaf welke domeinen er content geladen mag worden op jouw website, en met welke domeinen jouw bezoekers interacties mogen hebben.
Hiermee kan voorkomen worden dat kwaadaardige scripts of CSS-elementen worden geïnjecteerd of ingeladen, die bijvoorbeeld gebruikt worden om creditcardgegevens of andere persoonsgegevens te stelen, bezoekers te redirecten naar andere sites of (malafide) advertenties te tonen.
Ook is er een mogelijkheid tot rapportage, zodat je zicht kan houden op jouw policy en de overtredingen die plaatsvinden. Dit kan handig zijn om eventuele problemen te detecteren en op te lossen, en je website te veilig te houden.
Allereerst natuurlijk de vraag: hoe stellen we de policy in en bepalen waaruit de policy moet bestaan?
Voor we dat kunnen beantwoorden, moeten we weten hoe de website is opgebouwd. Een website bestaat onder andere uit:
- Scripts (Javascript);
- Styles (CSS);
- Images;
- Fonts;
- Websockets (externe verbindingen, denk bijvoorbeeld aan een chat-functie);
- Media (filmpjes);
- Objecten (embedded pagina’s, < object > en < applet >)
Deze kunnen we allemaal specificeren in de policy: we kunnen bijvoorbeeld instellen dat afbeeldingen alleen geladen worden vanaf het subdomein cdn.domeinnaam.nl, en filmpjes alleen vanaf YouTube.
Simpel voorbeeld:
Voor een simpele website, met één YouTube filmpje, kan een policy er als volgt uitzien:
<IfModule mod_headers.c>
header always set Content-Security-Policy “default-src ‘self’;\
font-src ‘self’ fonts.googleapis.com;\
media-src www.youtube.com”
</IfModule>
Als we alleen willen rapporteren, en gelijk willen blokkeren (bijvoorbeeld om te testen), dan kunnen we de naam iets aanpassen:
<IfModule mod_headers.c>
header always set Content-Security-Policy “default-src ‘self’;\
font-src ‘self’ fonts.googleapis.com;\
media-src www.youtube.com”
</IfModule>
Policy bepalen en configureren
Maar, hoe bepalen we nu wat er in de policy moet komen? Alle benodigde informatie voor de policy is terug te vinden in de developer tools van jouw browser. Deze kan je vinden door op de website te klikken met de rechtermuisknop, en vervolgens te kiezen voor inspecteren (Chrome) of element inspecteren (Firefox).
Voor beide browsers geldt nu dat er een nieuw (deel)venster opent met diverse tabbladen. Om een nieuwe policy te op te stellen kunnen we gebruik maken van het tabblad Netwerk. Nadat je deze hebt aangeklikt, moet je de pagina herladen. De browser toont wat er wordt ingeladen, en vanaf welk domein dit komt.
Je ziet dan de onderdelen die worden ingeladen van externe domeinen (dus buiten je eigen site), je kan dit invullen in onderstaande code snippet:
<IfModule mod_headers.c>
header always set Content-Security-Policy “default-src ‘self’;\
script-src ‘self’ NAAMVANDOMEIN;\
</IfModule>
De laatste kolom geeft aan wat het is: dit kan een font, script, stylesheet, image, of ander type zijn. Afhankelijk hiervan moet je het domein (kolom 3 in bovenstaande voorbeeld) bij de juiste source in jouw policy plaatsen. Het kan zijn dat één domein meerdere keren gebruikt wordt en dus meerdere keren in je policy moet worden opgenomen.
Bijvoorbeeld: https://report-uri.com/home/generate
Je moet hierbij nog wel handmatig de domeinen erbij zoeken. Deze tool zorgt ervoor dat de syntax klopt, en je eigenlijk vrij makkelijk je policy kan opbouwen.
Voorbeelden:
Om het allemaal wat makkelijker te maken, beschrijven we hieronder een aantal voorbeelden. Deze kan je gebruiken als basis voor jouw eigen policy.
Denk eraan dat je ze ook aan kan passen zodat er enkel gerapporteerd wordt, zoals we eerder in de handleiding beschreven hebben! Zo kan jij langzaamaan toewerken naar een veiligere website, zonder gelijk je bezoekers in de weg te zitten.
Voor Magento 2 kan je meer informatie vinden op: https://devdocs.magento.com/guides/v2.4/extension-dev-guide/security/content-security-policies.html
Voor WordPress met het standaard Twenty Twenty theme kan je deze policy gebruiken:
<IfModule headers.c>
Header set Content-Security-Policy “default-src ‘self’;\
script-src ‘self’ ‘unsafe-inline’;\
style-src ‘self’ ‘unsafe-inline’;\
font-src ‘self’ ‘unsafe-inline’ data:;”
</IfModule>
Toch nog vragen? Maak een ticket aan of mail naar support@elaxxl.nl
