A couple of problems introduced after adding a CSP configuration

[kelvindecosta]

Overview

Hello everyone!

I've added a simple CSP configuration.

Configuration (kit.csp) [click to expand]

{
  mode: 'auto',
  directives: {
    'default-src': ['self']
  }
};

I'd like to clarify that there is no problem with the CSP configuration.
Rather, it brought up two interesting problems, both with the script-src-elem directive:

• Inline scripts generated by Svelte are blocked.
  This is because a handle hook performs HTML minification.
• A custom inline script (not generated by Svelte) is blocked.
  This script is an IIFE that is meant to run immediately.

Problem 1: Svelte-generated inline scripts are blocked

As mentioned before, any <script> tag generated by Svelte is seemingly blocked.

At first, this was weird because the documentation states that:

SvelteKit will augment the specified directives with nonces or hashes (depending on mode) for any inline styles and scripts it generates.

When pages are prerendered, the CSP header is added via a tag (note that in this case, frame-ancestors, report-uri and sandbox directives will be ignored).

After a closer look, I realized that the <meta http-equiv> tag for CSP was indeed present.
This implied that the hashes for the <script> tags were not matching.

The culprit is definitely the following handle hook that performs html-minification: [click to expand]

import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { minify } from 'html-minifier';

import { prerendering } from '$app/env';

/**
 * `handle` hook that minifies rendered HTML.
 */
const minifyHtml: Handle = async ({ event, resolve }) =>
  await resolve(event, {
    transformPage: ({ html }) =>
      prerendering
        ? minify(html, {
            collapseBooleanAttributes: true,
            collapseWhitespace: true,
            decodeEntities: true,
            minifyCSS: true,
            minifyJS: true,
            removeAttributeQuotes: true,
            removeComments: true,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            sortAttributes: true,
            sortClassName: true
          })
        : html
  });

export const handle = sequence(minifyHtml);

Disabling this hook unblocked the scripts.

I'm assuming that I can modify the options passed to the minifier to rectify the problem.
Still, I wonder if there's a way to let SvelteKit inject the CSP information after minification / handle hooks.

Problem 2: Custom inline scripts are blocked

A bit of context; I'm working on a site that has a dark mode.
The custom script in question prevents a flash of white when the user's preferred them is dark.

Here's the code: [click to expand]

<!-- IIFE that sets `data-theme` ASAP -->
<svelte:head>
  <script>
    (function () {
      document.documentElement.setAttribute(
        'data-theme',
        'theme' in localStorage
          ? JSON.parse(localStorage.getItem('theme'))
          : window.matchMedia('(prefers-color-scheme: dark)').matches
          ? 'dark'
          : 'light'
      );
    })();
  </script>
</svelte:head>

There was no hash in the CSP script-src directive for this custom <script> tag.

SvelteKit will augment the specified directives with nonces or hashes (depending on mode) for any inline styles and scripts it generates.

Is there a way I can get SvelteKit to treat custom <script> tags as if they were generated by Svelte? Or, is there a "Svelte" way to generate a custom <script> tag?

Conclusion

Adding a CSP configuration introduced two problems that might be solved if:

• it is possible for handle hooks to run before CSP directives are injected.
• there is a "Svelte" way to define custom inline <script> tags

Any help is appreciated!
Thank you so much for your time!

[jasongitmail]

Just encountered this issue when using mode-watcher for toggling dark mode.

mode-watcher creates an inline script to set the initial dark class to prevent a Flash Of Unstyled Content, and generates a sha256 for the script hash.

This works well and prevents FOUC, unless a dev has also defined either the default-src or script-src properties to any value, within their svelte.config.js csp property, in which case the issue mentioned by the OP occurs and the inline script does not execute, so FOUC occurs.

[jasongitmail]

@kelvindecosta is there a Github issue for what you mention, to follow? There are many CSP related issues.