DEV Community

🔒Securing Web: A Deep Dive into Content Security Policy (CSP)

vashnavichauhan18 on February 15, 2024

Content Security Policy (CSP) is like a bodyguard for your website. It tells the browser where to load resources, like scripts, styles, and images...

Read full post

Ravavyr • Feb 17

For anyone needing to create one, please remember this affects ALL scripts/videos/images/iframes etc external things that your website needs to load.
For example if you have youtube videos you need to add the youtube url to the media-src, if you have google analytics, you need to add that domain to the scripts source, any hubspot stuff will probably need iframe-src or style-src

Here's a great tool to help you create it:
report-uri.com/home/generate

Note, setup a page that can accept POST data to process the report-uri data and notify you when something on your site gets blocked, or you're bound to have broken things on your site at some point.

CSP is not horribly hard, but i'd say it's the hardest of the security headers to get right.

Hit me up if you're stuck on it, i do these often now :)

vashnavichauhan18 • Feb 18

Thanks for the heads-up! Remember, CSP affects all external content on your site. You can use report-uri.com/home/generate to create it. Setting up a notification system for blocked content is crucial. CSP can be tricky, but feel free to reach out if you need help! 😊🔒

Deborah O • Aug 1

I am so stuck on CSP - I am not sure how to overcome dynamic content. The static stuff is fine as I can use the hash, but what about stuff that changes. Is this where a nonce comes in? I am a little lost...

Ravavyr • Aug 20

You'd have to define "stuff that changes". Remember, it's just the domains that matter, not the exact file paths. So as long as you can cover all the domains for all the content types you can do this.