Filter only undefined event handlers to prevent CSP violations in Svelte 5

[Copilot]

Fix CSP Errors in @unpic/svelte - Complete

• Investigate root cause of CSP violations
• Filter out only undefined event handlers, not all event handlers
  • Updated all image and source components
  • Added tests for both undefined and defined event handlers
• Build and test changes successfully
• Reply to PR comment
• Code review (no issues)
• Security check (CodeQL: 0 alerts)
• Add changeset

Root Cause

Svelte 5's type definitions include optional event handler properties (onload?: EventHandler | undefined | null) in HTMLImgAttributes. When these properties are present but undefined in a spread object, Svelte 5 adds internal event bindings (this.__e=event) that trigger CSP violations.

Solution

Filter out only event handlers that are undefined, allowing users to explicitly pass event handlers when needed. This preserves the ability to use event handlers while preventing CSP violations from undefined handlers.

All tests pass, security scans show no vulnerabilities, and changeset added for release tracking.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>@unpic/svelte triggers csp errors</issue_title>
<issue_description>Hi!

Thank you for a great package.

I've noticed some csp errors when using @unpic/svelte and wonder if you have any suggestions?

The error message is:

Content-Security-Policy: The page’s settings blocked an event handler (script-src-attr) from being executed because it violates the following directive: ....
Source: this.__e=event

and I've tracked it down to the rendered images, something like this:

<img ... srcset="" onload="this.__e=event" onerror="this.__e=event"/>

Is there any way I can disable the output of onload and onerror, or do you have any suggestions on how to handle it?
</issue_description>

Comments on the Issue (you are @copilot in this section)

@ascorbic I'm not sure! I'm not deliberately adding those.

• Fixes @unpic/svelte triggers csp errors #839

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[changeset-bot]

🦋 Changeset detected

Latest commit: ee5d152

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@unpic/svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for unpic-next ready!

Name	Link
🔨 Latest commit	ee5d152
🔍 Latest deploy log	https://app.netlify.com/projects/unpic-next/deploys/693ab81bfab34d0008abdd06
😎 Deploy Preview	https://deploy-preview-840--unpic-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for unpic-angular ready!

Name	Link
🔨 Latest commit	ee5d152
🔍 Latest deploy log	https://app.netlify.com/projects/unpic-angular/deploys/693ab81b5ef52b0008aa35f7
😎 Deploy Preview	https://deploy-preview-840--unpic-angular.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for unpic-docs ready!

Name	Link
🔨 Latest commit	ee5d152
🔍 Latest deploy log	https://app.netlify.com/projects/unpic-docs/deploys/693ab81b46ef31000804cb19
😎 Deploy Preview	https://deploy-preview-840.preview.unpic.pics
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[ascorbic]

We don't want to filter them out if a user has passed them in. We need to work out why they're appearing when the user hasn't

[pkg-pr-new]

Open in StackBlitz

@unpic/angular

npm i https://pkg.pr.new/@unpic/angular@840

@unpic/astro

npm i https://pkg.pr.new/@unpic/astro@840

@unpic/core

npm i https://pkg.pr.new/@unpic/core@840

@unpic/lit

npm i https://pkg.pr.new/@unpic/lit@840

@unpic/preact

npm i https://pkg.pr.new/@unpic/preact@840

@unpic/qwik

npm i https://pkg.pr.new/@unpic/qwik@840

@unpic/react

npm i https://pkg.pr.new/@unpic/react@840

@unpic/solid

npm i https://pkg.pr.new/@unpic/solid@840

@unpic/svelte

npm i https://pkg.pr.new/@unpic/svelte@840

@unpic/vue

npm i https://pkg.pr.new/@unpic/vue@840

@unpic/webc

npm i https://pkg.pr.new/@unpic/webc@840

commit: 5c18311

[Copilot]

We don't want to filter them out if a user has passed them in. We need to work out why they're appearing when the user hasn't

You're absolutely right! I've revised the approach in commit 5c18311.

The root cause: Svelte 5's HTMLImgAttributes type includes optional event handler properties like onload?: EventHandler | undefined | null. When these properties exist but are undefined in a spread object, Svelte 5 adds internal event bindings that trigger CSP violations.

The fix now only filters out event handlers that are undefined, preserving any explicitly passed handlers. This allows users to use event handlers when needed while preventing CSP violations from undefined handlers.

[ascorbic]

Add a changeset

[github-actions]

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.
Without this title format, a release will not be triggered

Details:

No release type found in pull request title "Filter event handlers from props to prevent CSP violations in Svelte 5". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - fix
 - feat
 - chore
 - docs
 - ci
 - test
 - revert

[ascorbic]

Add a changeset

[Copilot]

Add a changeset

Added in commit ee5d152.

Add a changeset

Added in commit ee5d152.