htaccess Content-Security-Policy/CSP headers blocked

Question

I am trying to set the Content-Security-Policy/CSP headers in the .htaccess file. But, its getting blocked for some reason in both development and production environments.

The same thing is happening for the .css and other sources like images.

Header set X-XSS-Protection "1; mode=block"
Header add Content-Security-Policy "script-src 'self' http://*.google.com https://*.google.com https://*.googleapis.com"
...

I have already tried googling for the solution, but so far no luck.

Answer 1

The problem has been solved.

I had to define all the base urls and specific paths of the external resources with http and https protocol. Along with the self to allow all the files of the application and unsafe-inline for running the inline scripts written on the page.

<IfModule mod_headers.c>
  ...
  Header add Content-Security-Policy "\
    default-src 'self' 'unsafe-inline' https://translate.googleapis.com http://translate.googleapis.com ...; \
    style-src 'self' 'unsafe-inline' https://fonts.gstatic.com ...; \
    img-src 'self' 'unsafe-inline' https://www.google-analytics.com http://www.google-analytics.com ...; \
    font-src 'self' 'unsafe-inline' https://fonts.gstatic.com ...; \
    ...;"
</IfModule>

Please note:

1. Using unsafe-inline is considered a security threat.
2. Try to use the specific url(s) if you are not requesting the multiple files from the same source.

I hope this will help someone in need.