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 would allow my images and CSS from my domain and twemoji maxcdn, and script from my domain and Google Analytics. It doesnt work.

The content is 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.

I ever tried script-src and style-src alone. Nothing seems to work. I even tried wildcards too.

When I take out the CSP header, my site loads properly. This is how my website looks when I activate CSP:

What am I doing wrong here? I'm trying to use CSP in a HTTP website. I am adding the above code in .htaccess.

I'd like to get this working and also modify it to allow inline CSS too.

Answer 1

i'm 99% sure that you having specified a protocol (http[s]) in the value field is what is causing this. the CSP is protocol agnostic if i recall correctly.

so what i mean is try this :

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

just tried the above on a sandbox of mine and it works

edit: the reason is that protocol is a function of the web server's handling of data, and has little to do (in this case) with how a browser sandbox is asked to behave. layers of separation and all that - this does not, of course, preclude mixed protocol errors (http serving https and vise versa)