Content-Security-Policy doesnt work on my site?

Question

i tried this CSP

    Header set Content-Security-Policy: "default-src 'self'; script-src 'self' https://www.google-analytics.com; style-src 'self' https://twemoji.maxcdn.com; img-src 'self' https://twemoji.maxcdn.com"

i expected that it loads my images and css from my domain and twemoji maxcdn, and script from my domain and google analytics.. but it doesnt work.. contents are showing, but no css!!! it looks like plain text site with images.. even images from tweemoji not appearing, only the images which hosted in my site are working.. even i tried script-src and style-src alone..! nothing seems to work.. i even tried wildcards too..! but when i take out the CSP header, my site loads properly..!

this is how my website looks when i activate csp with that setting..

what i am doing wrong here? and im trying to use CSP in http website.. and i am using thisin htaccess..!

and one more, how to allow inline css too?

Answer 1

I simulated your CSP headers on your site since you have it disabled at the time I checked. As oreoshake suspected, the issue is that you have inline scripts and inline styles in your code but your CSP does not allow these.

You can use 'unsafe-inline' for style-src to get past this. You may still run into issues as you'd need 'unsafe-inline' and 'unsafe-eval' for script-src; both of which are terrible and in all honesty, defeat the purpose of CSP.

Answer 2

It would be helpful if you can post the errors you are seeing or provide an example URL, but I'm going to guess the lack of 'unsafe-inline' in your style-src is the problem.

Do not worry about the implications of adding something "unsafe". For this case, the risk is next to nothing and I'd bet there isn't a single CSP out there that doesn't use style-src 'unsafe-inline' for any non-trivial site.