SvelteKit generates inline event handlers for `img` tag causing CSP inline execution issues

[duydang2311]

Describe the bug

Wrapping an img as a Svelte component results in onload="this.__e=event" onerror="this.__e=event" generated in HTML output. It causes CSP issue related to inline execution.

Below is my csp configuration and the error message.

csp: {
    mode: 'auto',
    directives: {
        'script-src': ['self', 'unsafe-eval']
    }
}

Reproduction

https://github.com/duydang2311/kit-img-csp-reproduction

Logs

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'nonce-94PQ75nivUUiZFr969Zztg=='". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i3-10100F CPU @ 3.60GHz
    Memory: 2.90 GB / 15.94 GB
  Binaries:
    Node: 22.5.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.30 - ~\scoop\shims\bun.EXE
  Browsers:
    Edge: Chromium (129.0.2792.89)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1
    @sveltejs/kit: ^2.0.0 => 2.7.3
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0
    svelte: ^5.0.0 => 5.1.4
    vite: ^5.0.3 => 5.4.10

Severity

annoyance

Additional Information

No response

[Rich-Harris]

Possible remediations that spring to mind:

• the ability to pass a nonce to render (e.g. render(App, props, { nonce })), though that won't work for prerendered pages
• put a capturing event handler in the head instead of inline if a certain option is provided, and return a hashes array from render alongside head and body

[adiguba]

Hello,

Another alternative would be to use unsafe-hashes, since all inserted codes have the same content : this.__e=event

=> This works :

    csp: {
      mode: "auto",
      directives: {
        "script-src": ["self", "unsafe-eval", "unsafe-hashes", "sha256-7dQwUgLau1NFCCGjfn9FsYptB6ZtWxJin6VohGIu20I="],
      },
    },

[Rican7]

Yea, I just ran into this while configuring CSP (via the Content-Security-Policy header) on my site.

I get the error:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-NG0SwEkJb5PaafA8Wr8nWg=='". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

I'm guessing that this is due to the changes made in #11642 (for #11046), which I understand and appreciate, but it seems they need special handling to enable CSP to work.

[Rican7]

Another alternative would be to use unsafe-hashes, since all inserted codes have the same content : this.__e=event

=> This works :

csp: {
  mode: "auto",
  directives: {
    "script-src": ["self", "unsafe-eval", "unsafe-hashes", "sha256-7dQwUgLau1NFCCGjfn9FsYptB6ZtWxJin6VohGIu20I="],
  },
},

A quick note on this, but it can be more explicit (and therefore technically more safe/limited-in-scope) by setting this on the script-src-attr directive rather than the script-src directive, like this:

Important

The script-src-attr directive is far newer than the script-src directive, so its browser compatibility is different.

However, it's supported by 94.71% browsers, as reported by "Can I use...", at the time of writing.

/**
 * `svelte.config.js`
 */

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// ... Other config values here ...

	kit: {
		// ... Other config values here ...

		csp: {
			mode: 'auto',
			directives: {
				// ... Other directives here ...

				'script-src': ['self'],

				// NOTE: This `unsafe-hashes` with this specific hash (`sha256-7dQ...`) is
				// necessary to prevent the CSP policy from causing issues with inlined
				// image event handlers.
				//
				// See https://github.com/sveltejs/svelte/issues/14014
				'script-src-attr': [
					'self',
					'unsafe-hashes',
					'sha256-7dQwUgLau1NFCCGjfn9FsYptB6ZtWxJin6VohGIu20I='
				]
			}
		}
	}
};

export default config;

[ryanatkn]

The reproduction here appears to no longer work after #15846 in Chrome/Edge (but not Firefox!), due to an apparent quirk in how urls are handled by the browser with Svelte's generated code. (see also #14270, maybe a duplicate, which does still reproduce)

Here's the current repro:

<Img alt="" src="https://picsum.photos/200/300" class="bg-red-500" />

This no longer causes a CSP violation in Chrome/Edge, but it does in Firefox. To fix the reproduction change it to:

<Img alt="" src="/favicon.png" class="bg-red-500" />

A random .jpeg https url I tested has the same behavior as /favicon.png. There's no config for the picsum.photos or anything so it seems like a browser quirk. I would expect Firefox's behavior but not Chrome/Edge's (surely not a CSP impl bug? maybe just a reporting difference, I don't see observable differences), but I don't know, I'm confused.

Firefox - 139.0.1
Chrome - 137.0.7151.69
Edge - 137.0.3296.68