Svelte automatically generating inline JS and causing CSP policy violations

[kevpye-fabdata]

Hello svelte folks,

First of all I just want to thank anyone who takes the time to read and respond to this question. I have done a lot of google searching and can't seem to find an appropriate solution to what I am about to ask.

The following is specifically related to image elements - although the question could relate to others, it's just that I am experiencing this specifically on an image element in our current project.

Ok, so here we go. We have a requirement to use a fairly strict CSP within our application - so no unsafe anything. We are using the helmetjs library wrapped in a server hook for writing the response headers but I don't think that is very important, i am just including the information for reference. Everything is configured and working well with the exception of one component, but this issue could spread as the application grows (it's still early dev).

We have a responsive image component which is defined as follows - I have excluded some detail from the img tag for simplicity:

ResponsiveImage.svelte

<script lang="ts">
	import type { CustomImage } from '$lib/shared/types/sanity/sanityTypes';
	import { urlFor } from '$lib/shared/services/sanity/image';
	import type { HTMLAttributes } from 'svelte/elements';

	interface Props extends HTMLAttributes<HTMLImageElement> {
		image: CustomImage;
		lazy?: boolean;
		highPriority?: boolean;
	}

	const { image, lazy = true, highPriority = false, ...rest }: Props = $props();
</script>

<img
	src={....}
	loading={lazy ? 'lazy' : 'eager'}
	fetchpriority={highPriority ? 'high' : 'auto'}
	srcSet={[
		.....
	].join(', ')}
	sizes="...."
	alt={image.alt || ''}
	{...rest}
/>

Note the use of the rest props here. We want to be able to pass any custom prop to this component that an image supports - such as custom classes or events etc.

The code works fine and the props are spread as expected but the problem is that svelte somewhere is adding inline onload and onerror handlers to the image element - which in turn causes CSP errors in the browser console - no inline allowed. The onload and onerror events are not being passed as props to the component on use - example usage:

<ResponsiveImage
    image={...}
    lazy={false}
    highPriority={true}
    class="absolute z-[-1] h-full w-full object-cover"
/>

The resulting HTML that is generated is as follows (again simplified)

<img src="..." loading="eager" fetchpriority="high" srcset="..." sizes="..." alt="..." class="..." onload="this.__e=event" onerror="this.__e=event"/>

If I remove the spread operator the browser console errors go away and the two inline functions are not added to the image.

If I pass these functions as props to the component - or if i manually specify the functions in the component after the spread it doesn't fix anything, the inline js is still written, the only difference is i can see svelte/events is also adding listeners - see the image below:

This issue shouldn't really cause us any issues (at this point) but i don't want the browser console to be filled with CSP errors every time we use this component - or any other component we develop in the future that might end up with the same auto generated inline script problem.

Any thoughts on how to avoid these inline scripts from being added - or how to tell the CSP they are allowed?

Note I have tried to set the script-src-attr CSP to self but that doesn't work.

Sorry if this is very long and thanks in advance.

[Prinzhorn]

#14014

[kevpye-fabdata]

Hey @Prinzhorn thanks for the link, I don't know how that thread didn't come up when I was searching. I read it and the linked issues / PR's, and the solution works, but unfortunately the solution uses unsafe-hashes as a CSP directive and our client doesn't want to accept any unsafe declarations in the CSP. Maybe I can make the case for this one exception.