DEV Community

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

🔒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...
Collapse
 
ravavyr profile image
Ravavyr

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 :)

Collapse
 
vashnavichauhan18 profile image
vashnavichauhan18

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! 😊🔒

Collapse
 
deborah_orbit profile image
Deborah O

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...

Collapse
 
ravavyr profile image
Ravavyr

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.

Collapse
 
ricardogesteves profile image
Ricardo Esteves

Great article, thank for sharing it, definitely handy!

Collapse
 
vashnavichauhan18 profile image
vashnavichauhan18

Thank you! I'm delighted you found it handy! 😊👍

Collapse
 
kurealnum profile image
Oscar

Awesome article! This should help me with something I'm working on right now 😄

Collapse
 
vashnavichauhan18 profile image
vashnavichauhan18

I'm glad to hear that you found the article helpful.

Collapse
 
adamkpurdy profile image
Adam Purdy

Thank you so much for this post!

Collapse
 
vashnavichauhan18 profile image
vashnavichauhan18

Thank you! Glad you found it helpful! 😊🙌

Collapse
 
mkvillalobos profile image
Manrike Villalobos Báez

Amazing article!! Today I learn something new!! THANKS!!

Collapse
 
vashnavichauhan18 profile image
vashnavichauhan18

Keep learning and exploring! Thank you for your feedback!