Search code examples
nginxcloudflarecontent-security-policyrocket-loader

CSP, RocketLoader and Nginx?

So I'm trying to avoid using (another) page rule to disable Rocketloader for one of my subdomains, since we can't use a RegEx to select multiple specific subdomains under a single page rule, and only get 3 page rules for free accounts.

According to this page:

https://support.cloudflare.com/hc/en-us/articles/216537517-Using-Content-Security-Policy-CSP-with-Cloudflare

I can just add a header to the domain to allow scripts from CloudFlare:

add_header Content-Security-Policy "script-src 'self' ajax.cloudflare.com;";

I did so in the Nginx config for that subdomain (it's a Chronograph container actually), restarted Nginx, tested to make sure it "took", which it did:

image|690x320

But then when I try to load the domain, it won't load, and the inspector shows this:

image|690x50

Not being super familiar with this, does anyone know where I screwed it up?

Solution

  • where I screwed it up?

    First of all, here:

    I can just add a header to the domain to allow scripts from CloudFlare:
    add_header Content-Security-Policy "script-src 'self' ajax.cloudflare.com;";
    I did so in the Nginx config

    And secondly, you trusted the report-uri service, but it failed you.

    1. You have had an issue with ajax.cloudflare.com BEFORE adding CSP header into Nginx config (otherwise, why add it). This means that you already have a CSP published via an HTTP header or a meta tag <meta http-equiv= 'Content-Security-Policy'>.
      By adding the CSP header to the Nginx configuration, you have added a second policy to the pages.
      Multiple CSPs work as sequential filters - all sources must pass through both CSPs to be resolved. The second CSP allows ajax.cloudflare.com host-source, but the first one still prohibits it (that you are observe in the inspector).

    You have to figure out where the first CSP is published and to add ajax.cloudflare.com into it, instead of publish second CSP.

    1. No one know what is under the hood of the report-uri and how it will react if two CSP HTTP headers or an HTTP header paired with a meta tag are published simultaneously
      Have a look which CSP and how many of them the browser actually gets, the guide is here.
      In case of 2 CSP headers you will see something like that: enter image description here

    In case of CSP meta tag you can easily check the by inspecting the HTML code.

    I think the report-uri just did not expect such a situation.