Questions[content-security-policy](server)

I am attempting to create a strong and secure content-security-policy in nginx, running a wordpress based LEMP Server. I believe I am using the ngx_pagespeed.so module, and have implemented FastCGI on my server. I believe one of these features renders my jpeg images into webP images on the fly.

In my content-security-policy directive on Nginx, I am attempting to eliminate XSS attacks, while still embracing the use of webP images created by either the pagespeed module or FastCGI.

However, for the CSP to allow webP images, I need to put img-src 'self' data:; in my content security policy header directive like so:

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; img-src 'self' data:;";

The problem with this is that enabling the data: block makes my website vulnerable to XSS attacks, effectively rendering the content security policy pointless. So it seems as though I can either have a super secure but slow website using regular jpegs, or, I can have a super insecure but fast website using server rendered webP images.

My question is, is there a way to specify only webP images to be allowed in the CSP directive img-src 'self' data;";? Ideally, I want to tell nginx that webP images should be approved in the CSP, but any other images outside of my site or the webP format, should be blocked.

Is this possible? If not, it seems like a CSP is rather pointless for at least 50% of servers out there. If so, then could you help me figure this out and let me know how I can implement a directive that defines webP as an allowed format in my CSP?

Thanks for any help!

I am not getting any response to any way I try to phrase this question, so I keep trying. I feel I've got to be missing something, but I've searched and searched. Why isn't it obvious? Why is it so hard to get an answer?

We are told we should use a Content Security Policy (CSP) nonce on our websites for inline scripts. The nonce should be randomly generated on the server for each request, and picked up by the website, then included via variable in the script tag. This way, we can guard against hacking.

Great, but I can find no way to do that, and still cache the website! Is there a way? Anybody?

If not, why isn't THAT specifically stated in one of these articles about creating CSP nonces? We need answers!

Thank you for letting me rant a bit. But seriously, what's the answer?

I'm using nginx's expires directive; its etag directive as well as the Last-Modified header (if I understand correctly) are on by default.

In order to allow specific inline JavaScripts when using restrictive Content Security Policy (CSP) headers (i.e. no 'unsafe-inline' resource policy) I want to use nonces.

I've basically followed the article by Scott Helme on the matter, using nginx's $request_id in my trial to create the nonce as discussed on ServerFault (in order to try this quickly without having to build nginx from scratch).

When I tried this it seemed that caching no longer worked as I expected, however:
Nginx responded with the file and fresh Last-Modified and ETag headers each time, instead of the 304 Not Modified response I was hoping for.

Thinking about it, it makes sense: the nonce in the CSP header as well as in the source code changes with each request. However, nothing else changes. So, arguably, this is a change that a "weak validator" should ignore (and thus mark the requested resource as not changed).

Having said that, I know very little to nothing about server configuration, or caching headers, for that matter. Chances are the smattering of knowledge I have isn't helping, and that weak validators, for example, aren't supposed to work that way, anyway.

Additionally, there seems to be an issue that browsers get confused when they have a cached version of the file with the old nonce but get a 304 Not Modified header with a new nonce (although I haven't seen that myself in my trial).

My question is thus basically: is it possible to configure nginx so that caching works in a way where changes to the nonce only (i.e. changes that happen on the fly by text replacement) are ignored when nginx creates the Last-Modified and ETag headers (i.e. where it only looks at the file changes on disk) - effectively using what are probably weak validators?

And, assuming browser confusion is an issue, can you do something to stop it, like not return a CSP header when the server returns 304 (so as not to replace the "header" nonce the browser has by a new one that then doesn't match the "file" one)? (This is more an academic question; I suppose I could somehow try not to set the CSP header for a 304 response, maybe using the ngx_headers_more module.)

Do I effectively have the choice between using nonces or caching? Or should this work out of the box (and whatever I saw was down to something else)?

I have a static web site hosted in a bucket that I serve up via the Google Platform.

This site has been running with no problems for about 6 months but over the last month I have had intermittent problems with it not loading style sheets and scripts due to "Content Security" issues - this results in just the text of the main page appearing the browser with no style and no (Javascript based) functionality. By intermittent I mean it works OK for a couple of hours and then it fails for a couple of hours.

There is no "web server" for this service as such as I am just serving up static pages from a bucket - I understand that Google must have their own server that handles this though.

Checking the developer console in the browser I can see the following issues for all stylesheets, scripts and fonts that the web page uses:

Refused to load the stylesheet XXXXXXX because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback. 

I think I have got my Content Security settings correct:

   <meta http-equiv="Content-Security-Policy" content="
         default-src 'self'; 
         img-src 'self'
            https://syndication.twitter.com;
         font-src 'self'    
            https://use.fontawesome.com
            https://fonts.gstatic.com
            https://fonts.googleapis.com;
         script-src 'self' 'unsafe-inline'
            https://stackpath.bootstrapcdn.com 
            https://connect.facebook.net
            https://platform.twitter.com
            https://code.jquery.com
            https://cdnjs.cloudflare.com; 
         style-src 'self' 'unsafe-inline'
            https://stackpath.bootstrapcdn.com 
            https://use.fontawesome.com 
            https://fonts.googleapis.com;
         frame-src 'self'   
            https://www.facebook.com
            https://connect.facebook.net
            https://platform.twitter.com
            https://www.youtube.com;
   ">  

These are the links that fail, each 'external' one includes signing with the imports to ensure that the "real" thing is loaded.

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

    <!-- Custom fonts for this template -->
    <link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

Can anyone see what I am doing wrong or offer any advice on how to get this working consistently?

I'm trying to implement Content-Security-Policy headers for Wordpress but am having trouble identifying all the URL's it needs access to. Specifically, I have tried adding the header:

Header always set Content-Security-Policy "default-src 'self' https://blogname.com:*"

However, when I set this, the "edit/create Post" page in particular throws a bunch of errors which look to be related to:

• 3rd party fonts it needs to download
• Other AJAX requests for javascript (e.g. for the editor)
• Other stuff, probably related to plugins

How can I easily identify all the 3rd party URL's that are needed for Wordpress and all of its plugins, so that I can add them to the CSP header?