Strange CSP error

Hi,

Our SPA is hosted with Cloudflare pages and in order for us to add a nonce (to be used for some JS frameworks) - we have a _middleware file that looks like:

class ElementHandler {
    constructor(value) {
        this.value = value;
    }

    element(element) {
        element.append(`<meta property="csp-nonce" content="${this.value}" />`, { html: true });
    }
}


export const onRequest: PagesFunction = async ({ request, next }) => {
    const response = await next();
    let nonce = crypto.randomUUID();

    const content_security_policy = [
        "default-src 'self';",
        "connect-src 'self' blabla ;",
        "img-src 'self' data: blabla ;",
        `script-src 'self' 'nonce-${nonce}' 'wasm-unsafe-eval' blabla ;`,
        `style-src 'self' 'nonce-${nonce}' 'sha256-blabla' ;`,
        "font-src 'self' blabla ;",
        "frame-src 'self'blabla ;",
        "object-src 'none' ;",
        "media-src 'none' ;",
    ].join(" ")
    response.headers.set('Content-Security-Policy', content_security_policy);
    return new HTMLRewriter().on("head", new ElementHandler(nonce)).transform(response)

};

It works fine most of the time however for some page loads Chrome reports:

[Report Only] Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

index.ts:213 [Report Only] Refused to create a worker from 'blabla.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

7937 @ index.ts:213
s @ bootstrap:19
(anonymous) @ startup:4
s.O @ chunk loaded:25
(anonymous) @ startup:5
(anonymous) @ app.sd23.js:1
main.ts:49 [bugsnag] Loaded!
13[Report Only] Refused to connect to '<URL>' because it violates the following Content Security Policy directive: "connect-src 'none'".

news:1 [Report Only] Refused to create a worker from 'blabla.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

wasm loading:4 [Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'none'".

First, I don’t really know why it says Report only - and I also do not know where the “script-src ‘none’” comes from.

It feels like some sort of race condition as it only happens on maybe every 10th page load?

Any ideas what might be wrong?

Do you have Page Shield enabled?

This is by design - every so often a CSP is added to the page with a report-only directive, which then reports to Cloudflare all the loading scripts, assets, etc. so that Page Shield analytics can be given to you in the dashboard (etc).

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.