TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment. #14438
Description
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?
- https://web.dev/articles/trusted-types#trusted-type-policy
- https://web.dev/articles/trusted-types#default-policy
if (window.trustedTypes && trustedTypes.createPolicy) {
trustedTypes.createPolicy('default', {
createHTML: (str, sink) => str // sanitise string here?
});
}Reproduction
In comparison, with Svelte 4, it works. https://stackblitz.com/edit/sveltejs-kit-template-default-19zjus?description=The%20default%20SvelteKit%20template,%20generated%20with%20create-svelte&file=package.json,src/routes/+page.svelte&title=SvelteKit%20Default%20Template
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