sveltejs
Prerendered pages with static adapter not working unless "unsafe-inline" is used in content security policy when deployed to IIS
Describe the bug
I am using Static adapter with sveltekit. My adapter configuration is as follows:
**import adapter from '@sveltejs/adapter-static';
export default { kit: { adapter: adapter({ // default options are shown. On some platforms // these options are set automatically — see below pages: 'build', assets: 'build', fallback: undefined, precompress: false, strict: true }), csp:{ mode:"hash", directives: { 'script-src': ['self'] },
}
}
};** This will render the pages after building . for example i took a simple code of counter increment and decrement in svelte. The code: in +page.svelte of routes directory. **
count is {count}
**After running npm run build, it produced the index.html of in build for this route. The code of the html:
**
count is 0
<script >
{
__sveltekit_mi39o1 = {
base: new URL(".", location).pathname.slice(0, -1),
env: {}
};
const element = document.currentScript.parentElement;
const data = [null,null];
Promise.all([
import("./_app/immutable/entry/start.f12e81ee.js"),
import("./_app/immutable/entry/app.dec15a81.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 2],
data,
form: null,
error: null
});
});
}
</script>
</div>
</body>
As you can see a hash is generated and added to content security policy in the html.
But when i deploy this to IIS with the web.config:
**
<!-- Add the X-Content-Type-Options header with value 'nosniff' -->
<add name="X-Content-Type-Options" value="nosniff" />
<!-- Add the Content-Security-Policy header with an updated CSP policy -->
<add name="Content-Security-Policy" value="
script-src 'self'
" />
</customHeaders>
</httpProtocol>
<!-- Other IIS configurations may be present here -->
</system.webServer> **
The site isn't working anymore. Console gave the error: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-vcM02ybV5AL1ye50l3REFlx7X0T57ATTV3r3Dywhv58='), or a nonce ('nonce-...') is required to enable inline execution. And this executes as expected when "script-src 'self' " is removed from web.config file.
Reproduction
I have uploaded the code(including the build folder with web.config) for reproduction here: https://github.com/chirudeepnamini/sveltekit-issue
Logs
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-vcM02ybV5AL1ye50l3REFlx7X0T57ATTV3r3Dywhv58='), or a nonce ('nonce-...') is required to enable inline execution.
System Info
System:
OS: Windows 11 10.0.22000
CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400 @ 2.60GHz
Memory: 4.69 GB / 15.63 GB
Binaries:
Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.7.5 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (118.0.2088.76)
Internet Explorer: 11.0.22000.120
npmPackages:
@sveltejs/adapter-auto: ^2.0.0 => 2.1.1
@sveltejs/adapter-static: ^2.0.3 => 2.0.3
@sveltejs/kit: ^1.20.4 => 1.27.4
svelte: ^4.0.5 => 4.2.2
vite: ^4.4.2 => 4.5.0
Severity
blocking all usage of SvelteKit
Additional Information
The problem is orginally in my other project. but i have reproduced it in a simple project in similar situation. And this is first time iam raising a github issue.So, let me know if i have missed anything.
Realized that we don't need to add Content security policy in IIS web.config, when we add csp in sveltekit.
Browsers don't allow "unsafe-inline" for extensions. But adapter-static even uses inline scripts when you disable prerendering. I'm a bit clueless on how to use SvelteKit for web extensions because of this.
