How to pass attributes to generated <script> and <link> tags in html

[afoninv]

In a fairly common setup, I have a single entry point for JS code in html:

<script
	type="module"
	src="/src/index.tsx"
	nonce="NONCE_PLACEHOLDER"
></script>

The idea is to use nonces for strict CSP , substituting value of NONCE_PLACEHOLDER each time a server (nginx in my case) serves index.html.

However, generated html file loses nonce attribute in relevant <script> and <link> tags:

<script type="module" crossorigin src="/assets/index.3472c4ab.js"></script>
<link rel="modulepreload" href="/assets/vendor.70b67224.js">

Desired result is:

<script type="module" crossorigin nonce="NONCE_PLACEHOLDER" src="/assets/index.3472c4ab.js"></script>
<link rel="modulepreload" nonce="NONCE_PLACEHOLDER" href="/assets/vendor.70b67224.js">

Is there a regular way to achieve that with Vite?

(Right now I have to resort to injecting nonce attribute with html-transform plugin. Plugin has to know about implementation details of what do tags generated by Vite look like. This is fragile so I'm looking for a more proper way)

[rj76]

No answers what so ever on this?

[wilcoxmd]

I'm also interested in an answer here.

[vinicius73]

I've created an issue related to it #9719
But there is no answer yet.

[maccuaa]

I've opened a PR that addresses #9719

[vinicius73]

Thanks a lot!

[albertcito]

Hi @afoninv What is the "html-transform" plugin you are using? Do you have any example in oder to try to do the same with Vite? Please.

[afoninv]

(Sorry, haven't been keeping eye on this Q&A)

Basically I've written my own plugin, using standard vite API

// Pre-minified HTML syntax.
// HTML minifier plugin should work AFTER current plugin.
const indexJsClean = '<script type="module" crossorigin src="/assets/index.';
const indexJsNonce =
	'<script type="module" crossorigin nonce="**CSP_NONCE**" src="/assets/index.';

const vendorJsClean = '<link rel="modulepreload" href="/assets/vendor.';
const vendorJsNonce = '<link rel="modulepreload" nonce="**CSP_NONCE**" href="/assets/vendor.';

function setupNoncePlaceholder() {
	return {
		name: 'html-transform',
		transformIndexHtml(html: string) {
			return html.replace(indexJsClean, indexJsNonce).replace(vendorJsClean, vendorJsNonce);
		},
	};
}

And then, in vite.config.ts:

export default defineConfig((config) => {
	const isBuild = config.command === 'build';

	return {
		plugins: [
			...
			isBuild && setupNoncePlaceholder(), // put nonce attribute to scripts (because vite deletes all attributes we add in 'index.html' ourselves)
			minifyHtml(),
			...
		],
		...
	}
}

[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.

[vinicius73]

That is a good solution, unfortunately it makes the server handle each asset/js to apply the nonce...
Although it better it than nothing, I hope we can found a better solution.

[maccuaa]

I don't think there's any way around that for SPAs unless you do SSR

[gitRup-ca]

I could not get your solution to work for me. Hence, Vite is NOT an out of the box solution if you want a strict CSP to catch any malicious code on your local server. Will be removing VITE and will keep an eye on this thread. Good Luck.

[themarcba]

How do you replace the {SERVER-GENERATED-NONCE} with the random value?

[1hw7]

@themarcba We follow a similar pattern. Client side in our index.html we inject a static string, then use regex server side to find that string, and replace with a randomly generated nonce server side. This works for script tags, but breaks when it comes to runtime style generation, as is used by Fluenv9 and other component libraries. Does anyone have a replacement they use for __webpack_nonce in vite? how at runtime can we inject nonces into style tags?

[gitRup-ca]

Throwing a random regex STRING into the final rendering of a page is NOT what a strict CSP does. The next time that page is rendered the STRING needs to be checked - to see if it matches on a per PHP session basis. Thumbs down VITE. Thumbs down LiveWire. Thumbs down Laravel for wasting so many new coders time on trying to fix something included by default in new Laravel project installs. Actually, two thumbs down Laravel - for not being clear a strict CSP - CAN NOT BE DONE! (using Vite) Be honest CLEAR Laravel. : (

[bensaufley]

I haven't found documentation or discussions surrounding this and the last comment here was pretty recent so I thought I'd point out what worked for me, which I'm sure there's even a better way to do it but since I've got a SPA it solved my use case: I added this at the top of my main blade:

<?php Vite::useScriptTagAttributes(['onerror' => 'handleError(error)']); ?>

Now I know there's some internal logic for nonces so it might not solve the nonce issue, but "how to pass attributes" – worked for me in dev and prod.