nonce tag in __vitePreload (CSP)

[vinicius73]

Description

I am trying to migrate or default tooling from Webpack to Vite.

The main issue is nonce security police.

Actually, we handle it using __webpack_nonce__

https://webpack.js.org/guides/csp/

I can't interact with the preload function to change it.

vite/packages/vite/src/node/plugins/importAnalysisBuild.ts

Lines 58 to 103 in 0571232

	function preload(
	baseModule: () => Promise<{}>,
	deps?: string[],
	importerUrl?: string
	) {
	// @ts-ignore
	if (!__VITE_IS_MODERN__ || !deps || deps.length === 0) {
	return baseModule()
	}
	return Promise.all(
	deps.map((dep) => {
	// @ts-ignore
	dep = assetsURL(dep, importerUrl)
	// @ts-ignore
	if (dep in seen) return
	// @ts-ignore
	seen[dep] = true
	const isCss = dep.endsWith('.css')
	const cssSelector = isCss ? '[rel="stylesheet"]' : ''
	// @ts-ignore check if the file is already preloaded by SSR markup
	if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
	return
	}
	// @ts-ignore
	const link = document.createElement('link')
	// @ts-ignore
	link.rel = isCss ? 'stylesheet' : scriptRel
	if (!isCss) {
	link.as = 'script'
	link.crossOrigin = ''
	}
	link.href = dep
	// @ts-ignore
	document.head.appendChild(link)
	if (isCss) {
	return new Promise((res, rej) => {
	link.addEventListener('load', res)
	link.addEventListener('error', () =>
	rej(new Error(`Unable to preload CSS for ${dep}`))
	)
	})
	}
	})
	).then(() => baseModule())
	}

I'm already injecting the preload tags manually, JavaScript and CSS files.

Suggested solution

A way to inject nonce value simular to webpack.

Alternative

No response

Additional context

Example Application

https://github.com/nextcloud/text/blob/48b21b6e524c4aef78a1046e1f19a2bbd85837c4/src/main.js#L3-L4

Nextcloud apps

Nextcloud is modular, and allow the users to install a variety of apps.
These apps can inject scripts in many parts of nextcloud.

For secure reasons, we use CSP to prevent malicious script injections.

Content-Security-Policy: default-src 'none';base-uri 'none';manifest-src 'self';script-src 'nonce-cHQ...bz0=';style-src 'self' 'unsafe-inline';img-src 'self' data: blob:;font-src 'self' data:;connect-src 'self';media-src 'self';frame-src 'self';frame-ancestors 'self';form-action 'self'

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[vinicius73]

discussion related: #5218

[dagda1]

I have this problem also

[VincentvD]

We're also facing this issue, coming from CRA/webpack. It would be awesome to have CSP nonce support in vite.

[kmcc049]

We are also facing this problem. ATM it makes verifying a CSP is correct very hard. We are forced to set unsafe-inline during development.

[seth-seikosoft]

I'm just now running into this as well. I converted our apps to Vite a few months ago and I love using it, it's SO FAST.

I've done a little googling trying to figure out if there is a plugin that will do this and I haven't found anything.

Do we have any updates on this issue?

[Carminepo2]

Running into this issue too. I'm disabling all the dynamic import because I could not set the nonce token on the generated tags. Waiting for a solution

[krossekrabbe]

Please address this, it is impossible to use a sane CSP without it.

[tonymcneil]

We ended up doing this:

in vite.config.ts

plugins: [
            {
                name: "html-inject-nonce-into-script-tag",
                enforce: "post",
                transformIndexHtml(html: string) {
                    const regex = /<script(.*?)/gi;
                    const replacement = '<script nonce="{SERVER-GENERATED-NONCE}"$1';
                    return html.replace(regex, replacement);
                },
            },
        ],

All bundled script tags now get the placeholder {SERVER-GENERATED-NONCE} which is replaced with a random value by the server on each request.

[ottopaulsen]

@tonymcneil Thanks for this, I also got it working for script tags. However, i tried the same trick for style tags, but it does not work. Do you know how to get this working also for style tags?