TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment.
#14438
Development PRs
This PR is meant to get the ecosystem CI passing for SvelteKit, which overrides Svelte 4 with 5 (and vite-plugin-svelte 3 with 4 in my testing). https://github.com/sveltejs/svelte-ecosystem-ci/actions/runs/12026344184/job/33525133268
Changes are:
- update typescript version in test apps to match Svelte 5's so that ContentVisibilityAutoStateChangeEvent exists in ts lib. This fixes this CI error where the event type can't be found.
explicitly use theuse string templates for values so that the text is visible (instead of an empty string which is the new behaviour in Svelte 5)."undefined"string in tests in place ofundefinedvalues- use
innerTextin place ofinnerHTMLfor tests when asserting content so that Svelte 5 hydration marker comments<!-- ->are not captured.
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
Tests
- Run the tests with
pnpm testand lint the project withpnpm lintandpnpm check
Changesets
- If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running
pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.
Edits
- Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.
Before submitting the PR, please make sure you do the following
Resolves #14438 Resolves #10826
This PR makes it possible to use Svelte on pages which require TrustedTypes support via their CSP by wrapping assignments to innerHTML in a TrustedTypePolicy called svelte-trusted-html if the TrustedTypes API exists.
Servers can allowlist the policy by setting require-trusted-types-for 'script'; trusted-types svelte-trusted-html in their Content-Security-Policy header.
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
Note: I haven't run the tests since I don't have pnpm setup properly.
I have tested that:
- A project with a CSP fails with Tip of Tree Svelte
- That project works when installing this revision of Svelte
- The project (with this revision) works in Browsers with no
TrustedTypessupport (i.e. Firefox, Safari)
- Run the tests with
pnpm testand lint the project withpnpm lint
My test project is here: https://github.com/fallaciousreasoning/svelte-tt-test/blob/master/src/routes/%2Bpage.server.js
The only changes to the default project is adding the CSP in src/routes/page.server.js
Issue
Describe the bug
When a SvelteKit app enables the CSP directive require-trusted-types-for for script, hydration and CSR seems to break.
Related to sveltejs/kit#7975
Maybe we need to add something like this in Svelte / SvelteKit?
if (window.trustedTypes && trustedTypes.createPolicy) {
trustedTypes.createPolicy('default', {
createHTML: (str, sink) => str // sanitise string here?
});
}Reproduction
In comparison, with Svelte 4, it works.
Logs
root.svelte:42
This document requires 'TrustedHTML' assignment.
chunk-MPHGUMC3.js?v=978d5140:106
Uncaught (in promise) TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment.
at Root (root.svelte:42:41)System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
svelte: ^5.0.0 => 5.2.7Severity
blocking an upgrade
Info
Related #10826
Also related (but closed) #8134
Pro tip: You can prefix GitHub URLs of issues, PRs or discussions with svcl.dev/ to view them on this page! Also try it on a GitHub release ;)