MikeS159
MikeS159

Reputation: 1964

Content Security Policy Headers Blocking Allowed Domains

I am trying to get content security policies working correctly on my website, but I am getting content blocked even when it should be allowed. Using Google's CSP Evaluator on my site I can see the rules:

default-src 'self';
font-src 'self' fonts.gstatic.com;
img-src 'self' gstatic.com;
script-src 'self' google.com gstatic.com;
style-src 'self' google.com gstatic.com;
form-action 'self';
frame-ancestors 'self';

With CPS disabled I have various requests to google sites for fonts, styles and scripts (for ReCapture), but with it enabled none of those requests are loaded (looking in the network load graph for requests).

Looking at the CSP for securityheaders.io, it doesn't look like I have don't anything wrong with allowing some domains through.

default-src 'self';
script-src 'self' cdnjs.cloudflare.com;
img-src 'self';
style-src 'self' 'unsafe-inline' fonts.googleapis.com cdnjs.cloudflare.com;
font-src 'self' fonts.gstatic.com cdnjs.cloudflare.com;
form-action 'self';
report-uri https://scotthelme.report-uri.com/r/default/csp/enforce

What is weird is the other than lightboxes for displaying images in a pop out window not working, the site looks and behaves the same with CSP enabled or disabled. I have also checked Cloudflare's guide I don't appear to need anything else enabled with them as my CDN.

I am using a Wordpress plug-in to manage these headers, but I can see the headers from loading the site and they are definitely there.

I there something obviously wrong with my CSP header that would stop whitelisted sites from being loaded

Upvotes: 1

Views: 4285

Answers (2)

Stephen R
Stephen R

Reputation: 3897

If this is a problem with one of the Google scripts, I have found that their scripts often load other scripts, and this can trip up CSP. Check out the strict-dynamic policy. It basically says "allow this known script to load other, unknown scripts".

Upvotes: 2

Kalimula F
Kalimula F

Reputation: 56

This type of error you will get when you use inline scripting in your application and if you try to use CSP along with that. If you want to include CSP to reduce the XSS Attack, then you have remove the inline scripting in your application. Inline scripting means writing the script in html file itself within "script" tag.

Example:

<head>
   <script> console.log("Inline Scripting")</script>
</head>

Solution for the Issue: 1. You can place your scripting in separate js file and then referring it in the html file (or) 2. If you want to use script files from any other server/domain, you can specify the address in the CSP Meta tag and you can refer that script in your html. refer the below example:

<html>
<head>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://samplejs_website:8887/>
 <script src="https://samplejs_website:8887/index.js"></script>
</head>
<body>
</body>
</html>

Note: You can use 'unsafe-inline' in the CSP meta tag and can have inline scripting in your application. But it is not recommended.

Upvotes: 2

Related Questions