An error with CSP if you run `npm run check` during `npm run dev`

frederikhors commented 2 weeks ago

Describe the bug

I just figured out what the problem is that causes https://github.com/sveltejs/vite-plugin-svelte/issues/969.

Everything works good until I launch npm run check in another console tab during the already started npm run dev.

package.json:

"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"

The npm run check apparently ignores the if (dev) return in:

svelte.config.js:

import 'dotenv/config';

const dev = process.env.NODE_ENV === 'development';

function gen_csp() {
  if (dev) return;

  let directives = {
    // ...
  };

  return { directives };
}

const config = {
  preprocess: vitePreprocess({ script: true }),

  kit: {
    // ...

    csp: gen_csp(),
  },
};

export default config;

but not only for itself, it also breaks the current npm run dev:

(index):42 Refused to create a worker from 'http://localhost:4000/service-worker.js' because it violates the following Content Security Policy directive: "script-src https://*.website.com 'nonce-4r1nfez5GdG7nc+4Ce8Wvg=='". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.
(index):42 Uncaught (in promise) DOMException: Failed to register a ServiceWorker: The provided scriptURL ('http://localhost:4000/service-worker.js') violates the Content Security Policy.
localhost/:1 Refused to load manifest from 'http://localhost:4000/manifest.webmanifest' because it violates the following Content Security Policy directive: "default-src https://*.website.com". Note that 'manifest-src' was not explicitly set, so 'default-src' is used as a fallback.
6
Refused to connect to '<URL>' because it violates the following Content Security Policy directive: "connect-src 'self'".

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-bzs49u

Changes from the starter template

I added packages to package.json:
- "dotenv": "16.4.5"
- "@sveltejs/vite-plugin-svelte": "4.0.0-next.6"
I changed svelte.config.js

Steps to reproduce:

pnpm install && pnpm dedupe
npm run dev
npm run check (in another new tab)

System Info

@sveltejs/adapter-static: 3.0.4 => 3.0.4
@sveltejs/kit: 2.5.25 => 2.5.25
@sveltejs/vite-plugin-svelte: 4.0.0-next.6 => 4.0.0-next.6
svelte: 5.0.0-next.240 => 5.0.0-next.240

Severity

serious, but I can work around it

Additional Information

A small note:

I opened https://github.com/sveltejs/vite-plugin-svelte/issues/969 because I had the problem right after the (only) update from vite-plugin-svelte@3 to vite-plugin-svelte@4.0.0-next.6. Nothing else changed.

I'm not a high-quality developer, I'm trying to learn day by day and I'm passionate about quality projects like Svelte.

As you can see, I contributed in my own small way to suggesting bugs and to be a beta tester for all the preview versions that come out, both of Svelte and Kit.

I've ALWAYS been polite with EVERYONE, ALWAYS.

Maybe I opened an extra superfluous issue? Yes, maybe. But as soon as I understood the problem I also closed it and thanked those who helped me (and I must say that almost everyone has always been welcoming, warm and kind, starting with Rich).

That "ALMOST" because sometimes, even in the warmest and most welcoming communities in the OSS world, there is someone who responds badly, rudely and who perhaps needs a few days of vacation: https://github.com/sveltejs/vite-plugin-svelte/issues/970.

There are some really bad people in the world to blame, not someone who is trying to help solve a problem on a project, to the best of their ability.

Rich-Harris commented 2 weeks ago

I don't know if the reproduction is still needed in cases like this. If yes, I will create one (I'm out of time now unfortunately).

Put yourself in our shoes: how would you begin investigating a report like this? Of course a reproduction is needed. Without one, the best we can hope for is that we're able to create an equivalent reproduction ourselves (we are also not overburdened with time, btw), except without any of the context that you already have (like, the content of directives). It's not surprising if maintainers become frustrated with these sorts of issues!

frederikhors commented 2 weeks ago

Ok, fair. I added the reproduction and the reproduction steps.

sveltejs / kit