Alter Content Security Policy behavior

[jasongitmail]

Describe the bug

Possible issue for SvelteKit v2.

When adding inline JavaScript with a nonce to satisfy the Content Security Policy, the CSP properties defined within svelte.config.js will clobber it.

It's hard to describe this. The problem may be better illustrated in this comment and this Github discussion. The OP in this discussion suggests that changing hooks' behavior might be a solution to address this.

Reproduction

0. Set your computer's system to use dark mode.
1. Use this code https://stackblitz.com/github/huntabyte/mode-watcher which shows a simple dark/light mode switcher. Notice it works well; i.e. there is no Flash of Unstyled Content showing a white page (containing the page's content) before the dark mode.
2. But now update this project's svelte.config.js to include a CSP.

    // svelte.config.js
    ...
    csp: {
      directives: {
        'base-uri': ['none'],
        'connect-src': ['self', 'cloudflareinsights.com'],
        // 'default-src': ['self'],
        'img-src': ['*'],
        'object-src': ['none'],
        // 'script-src': ['self', 'static.cloudflareinsights.com'],
        'style-src': ['self', 'unsafe-inline'],
      },
    },
   ...

If you enable default-src or script-src rules, either individually or both together, a FOUC occurs (i.e. you'll see a light UI–not merely an empty viewport–before it becomes a dark UI). If these properties exist even with an empty array value or a ['*'] value, then FOUC still occurs. Commenting those two properties out removes the FOUC.

mode-watcher adds an inline script tag with a nonce to satisfy the CSP. This works, unless svelte.config.js contains either default-src or script-src properties, as mentioned, in which case the inline CSP seems to be ignored and the inline script does not execute.

Logs

No response

System Info

"@sveltejs/kit": "^1.20.4",
"svelte": "^4.0.5",

Severity

annoyance

Additional Information

The workarounds currently are:

1. live with the FOUC (annoyance), or
2. remove the offending CSP rules from svelte.config.js (reduces security).