#svelte-announcer triggers CSP violation

[andersekdahl]

Describe the bug

When creating a new Sveltekit project from the demo template and configuring CSP rules that disallows inline styles you get a CSP violation on the #svelte-announcer element which is using inline styles without a nonce.

Reproduction

https://github.com/andersekdahl/svelte-csp-repro

1. Clone the repo
2. Run npm run build && npm run preview
3. Open the site and you'll see these errors attached as screenshots

The only thing changed from the demo project is this commit:
andersekdahl/svelte-csp-repro@53ebe42

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
    Memory: 6.04 GB / 31.73 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.92)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.1.1
    @sveltejs/kit: ^2.0.0 => 2.5.4
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.2
    svelte: ^5.0.0-next.1 => 5.0.0-next.80
    vite: ^5.0.3 => 5.1.6

Severity

serious, but I can work around it

Additional Information

No response

[BernhardPosselt]

@andersekdahl how have you worked around it?

Edit: For anyone running into this, add this to your svelte.config.js

const config = {
        csp: {
            directives: {
                // etc
                'style-src': ['self', 'sha256-9OlNO0DNEeaVzHL4RZwCLsBHA8WBQ8toBp/4F5XV2nc='],
            }
        }
}

[kevinpeckham]

Note on workaround suggested by @BernhardPosselt: Adding a hash as your workaround will only work if your CSP policy allows "unsafe-hashes".

Unfortunately this doesn't work for one of my clients, and I had to develop this workaround instead but allowed us to use Svelte and avoid the CSP violations.

Inside script portion of +layout.sevlte (in runes mode):

import { browser } from "$app/environment";

// intercept innerHTML invocation and remove style before div is added to dom
$effect(() => {
  if (browser) {
    const originalInnerHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
    
    Object.defineProperty(Element.prototype, 'innerHTML', {
      set(value: string) {
        if (value.includes('id="svelte-announcer"')) {
          const safeValue = value.replace(/style=".*?"/i, '');
          originalInnerHTML?.set?.call(this, safeValue);
        } else {
          originalInnerHTML?.set?.call(this, value);
        }
      }
    });
  }
});

// add styles back in non-CSP violating way
$effect(() => {
  if (document) {
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        for (const node of mutation.addedNodes) {
          if (node instanceof HTMLDivElement && node.id === 'svelte-announcer') {
            node.style.position = 'absolute';
            node.style.left = '0';
            node.style.top = '0';
            node.style.clip = 'rect(0 0 0 0)';
            node.style.clipPath = 'inset(50%)';
            node.style.overflow = 'hidden';
            node.style.whiteSpace = 'nowrap';
            node.style.width = '1px';
            node.style.height = '1px';
          }
        }
      }
    });

    observer.observe(document, {
      childList: true,
      subtree: true
    });
  }
});

[caleb531]

I am also encountering this issue. I cannot use the 'unsafe-hashes' workaround since my application is security-conscious, and @kevinpeckham's workaround honestly feels too hacky.

What I ended up doing is applying the workaround from #12661 (with a slight tweak to support Svelte 5, which deprecated <svelte:component />) . From what I've read, the announcer is only used to announce route navigations, and since my application has only a single route, it should be fine to remove the announcer:

// svelte.config.js

preprocess: [
    {
        name: 'strip-announcer',
        markup: ({ content: code }) => {
            code = code.replace(/<div id="svelte-announcer" [\s\S]*?<\/div>/, '{null}');
            return { code };
        }
    }
]

[jornfranke]

Same here: I also needed to have this workaround to have the svelte-announcer removed to avoid CSP violation: #11747

I think svelte-announcer is a great idea, but why can't it work without inline style or why isn't it realized as a component that one can add (and it can be added by default in the template when creating a project).

[dfinucane]

This line in

kit/packages/kit/src/core/sync/write_root.js

Line 140 in 3cf2b77

<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px">

<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; ... makes it very difficult, next to impossible to use CSP with SvelteKit. This is the only inline style in the entire SvelteKit github repo outside of test code. It pains me to see the red CSP violation in the web browser console. Seems like it would be very easy to remove this use of inline style and perhaps put the style in the app.css file generated by the project creator.
Are there any plans to fix this problem?

[dfinucane]

@jornfranke how are you removing the svelte-announcer div? I'd like to do that until this is resolved but I can't see how adding a preprocess script to remove it would work given that it is added in onMount.

[jornfranke]

It is in the linked issue in my answer.

Same here: I also needed to have this workaround to have the svelte-announcer removed to avoid CSP violation: #11747

I think svelte-announcer is a great idea, but why can't it work without inline style or why isn't it realized as a component that one can add (and it can be added by default in the template when creating a project).