CSP Issues in extension built with Svelte

Extensions
1

I am working on an extension with Svelte. Local tests pass without issue, but as soon as I start the hosted test, I encounter CSP issues because Svelte injects a script tag in the body tag, and Twitch extensions are not allowed to have inline scripts.

<body data-sveltekit-preload-data="auto">
    <div style="display: contents">
			<script >
				{
					__sveltekit_1gyypru = {
						base: new URL(".", location).pathname.slice(0, -1)
					};

					const element = document.currentScript.parentElement;

					Promise.all([
						import("./_app/immutable/entry/start.Bl8gE-aQ.js"),
						import("./_app/immutable/entry/app.BvfVTKt7.js")
					]).then(([kit, app]) => {
						kit.start(app, element);
					});
				}
			</script>
		</div>
  </body>

I tried adding the CSP setting in the Svelte config to add ‘unsafe-inline’ for the script-src, but I realized later that Twitch doesn’t support it.
I also tried to add a nonce to the script tag within the body of the compiled code before zipping and uploading the file to Twitch, but even that doesn’t work, as the nonce seems to be missing when inspected in the browser dev tool.
I have added the BaseURI from the status tab of the Twitch Dev page for the extension to the Allowlist for URL Fetching Domains on the Capabilities tab for whitelisting, but I still see the same problem.

The error is:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' https://***************.ext-twitch.tv https://extension-files.twitch.tv". Either the 'unsafe-inline' keyword, a hash ('sha256-**********'), or a nonce ('nonce-...') is required to enable inline execution.

Can someone help?

2

You need to configure svelte not to generate inline scripts.

or after the code generation step, manually move that inline script to an external one. And update your HTML to load that external script.

Theres no changes you can make to the CSP to allow this, as you cannot modify the script src CSP rule.

Thats for fetch requests/loading data from external sources (not loading scripts)