Issue setting strict CSP in production

[TylerWanta]

Describe the bug

I am having the same issue as here, but the solution isn't working for me.

I'm using Electron + Vite and am trying to set a strict CSP (one with no unsafe-inline). Since I am using Electron and am not fetching my resources from a server, the nonce specified for cspNonce is generated right above the config. I then just use a plugin to inject the nonce into the index.html. This works fine in dev when the entire process is ran every time I run the app, but in production the process is only ran when packaging the app and never again. This is problematic as the nonce will no longer be regenerated, defeating the whole purpose. It would be nice if a strict CSP was supported without having to use a nonce.

// electron.vite.config.ts
let nonce = crypto.randomBytes(16).toString('base64');

const transformHtmlPlugin = data => ({
	name: 'transform-html',
	transformIndexHtml: {
		transform(html)
		{
			return html.replace(
				/<%=\s*(\w+)\s*%>/gi,
				(match, p1) => data[p1] || ''
			);
		}
	}
});

export default defineConfig({
	renderer: {
		plugins: [
			transformHtmlPlugin({ nonce: nonce })
		],
		html: {
			cspNonce: nonce
		},
	},
})

// index.html
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'nonce-<%= nonce %>'" />

Reproduction

https://github.com/TylerWanta/vite-csp-issue

Steps to reproduce

This will be an issue with any vite build with a strict CSP and no cspNonce specified.

Clone the repo provided cd vite-csp-issue npm run dev You can see the issue in the console but clicking CTRL + Shift + i

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900KF
    Memory: 18.28 GB / 31.85 GB
  Binaries:
    Node: 21.5.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-vue: ^4.3.1 => 4.6.2
    vite: ^5.2.11 => 5.2.11

Used Package Manager

npm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[btea]

The added meta tag does not seem to take effect. You should add nonce-xxxx to the original meta tag.

[TylerWanta]

@btea I'm not entirely sure I follow and how adding it to the original meta tag would differ from how I am doing it now. Either way, and correct me if I'm wrong, I think the main issue will still remain; after packaging the app the nonce will no longer be regenerated.

[btea]

I'm not sure about other issues either. My current solution to the error problem is to do the following:

[TylerWanta]

@btea My issue isn't getting the nonce to work, I already have that working. My issue is that using a nonce seems to be the only supported way of using a strict Content Security Policy with Vite. This won't work for me because after I package my app with electron, the nonce won't be regenerated anymore. Having a static nonce in my index.html defeats the whole purpose of a nonce.

[btea]

Oh, sorry, it seems that I misunderstand what you mean. 🤦‍♂️

[TylerWanta]

No worries! I appreciate you trying to help

[tsotimus]

@TylerWanta Hey! I have been working on a vite plugin to solve this specific problem. The issue is the nonce strategy doesn't support SPA's - what we need is hashes. Here is the plugin - its still pre 1.0 but I have written up some extensive documentation for the plugin as well as this specific problem.

Try it out and let me know what you think! All feedback is welcome

[mateyocedric]

Hello @RockiRider does it support nonce? I do have the same problem with @TylerWanta I need to generate nonce for every reload of an app because it only happens when build

[tsotimus]

Hello @RockiRider does it support nonce? I do have the same problem with @TylerWanta I need to generate nonce for every reload of an app because it only happens when build

Nope it doesn't support nonce's purely because Single Page Applications typically don't run on a server.

If you want nonce support you need a server. I have written up a small guide to help developers out that are either:

• Running a server
• Using a meta framework (Multi Page Application's)
• Desire nonce functionality

If you are using an SPA though you don't need nonce's, hashing at build time is a pretty decent alternative, just harder to implement. Here is a guide for Single Page Applications

I know Vite does have an SSR support, so maybe this is something I build into the plugin later, but not for now!