Tutorial: Spreading events - Example does not work locally

[mgajdo]

Concerns the following tutorial section:

• URL: https://svelte.dev/tutorial/svelte/spreading-events
• Github: apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events

Problem description

Trying to recreate the above mentioned section of the tutorial on a local machine causes an internal error 500. The console error message displays "content security policy of your site blocks the use of 'eval' in javascript".

I tried to follow along the tutorial and recreated the files for section "Spreading events" locally with the following modifications (for education reasons):

• The App.svelte has been renamed to +page.svelte
• BigRedButton.svelte has been renamed to Button.svelte. The fancy css has been purged altogether.
• As a replacement for the horn.mp3 file I used a different license-free .mp3 file to which I assigned the same name.

All of the files were placed in the same location inside the /routes directory of a Sveltekit project:

<script lang="ts">
	import Button from './Button.svelte';
	import horn from './horn.mp3';

	const audio = new Audio();
	audio.src = horn;

	function honk() {
		audio.load();
		audio.play();
	}
</script>

<Button onclick={honk} />

<script>
	let props = $props();
</script>

<button {...props}>
	Push
</button>

<style>
</style>

My understanding of CSP handling (Content Security Policy)

The error message refers to the following article: https://web.dev/articles/csp?utm_source=devtools#unsafe-eval

As far as I understood it is best to "build applications: [...] using the built-in JSON.parse, instead of relying on eval." and "If eval() or other text-to-JavaScript functions are essential to your application, you can enable them by adding 'unsafe-eval' as an allowed source in a script-src directive. We strongly discourage this because of the code injection risk it presents."

From what I know, CSP can be set globally in the svelte.config.js as described in this article: https://svelte.dev/docs/kit/configuration#csp. However, doing this did not solve the problem.

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://svelte.dev/docs/kit/integrations
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
		adapter: adapter(),
		csp: {
			directives: {
				'script-src': ['unsafe-eval']
			},
		}
	}
};

export default config;

Many thanks for any viable solution for my problem!

[Conduitry]

Doing this in SvelteKit is going to attempt to use the Audio API on the server during SSR, which is going to fail. I suspect the CSP/eval message is a red herring.