fix(client): use CSP nonce when rendering error overlay (#20791)

Author: thatguystone

packages/vite/src/client/client.ts

@@ -6,7 +6,7 @@ import {
   normalizeModuleRunnerTransport,
 } from '../shared/moduleRunnerTransport'
 import { createHMRHandler } from '../shared/hmrHandler'
-import { ErrorOverlay, overlayId } from './overlay'
+import { ErrorOverlay, cspNonce, overlayId } from './overlay'
 import '@vite/env'
 
 // injected by the hmr plugin when served
@@ -506,11 +506,6 @@ if ('document' in globalThis) {
     })
 }
 
-const cspNonce =
-  'document' in globalThis
-    ? document.querySelector<HTMLMetaElement>('meta[property=csp-nonce]')?.nonce
-    : undefined
-
 // all css imports should be inserted at the same position
 // because after build it will be a single css file
 let lastInsertedStyle: HTMLStyleElement | undefined

packages/vite/src/client/overlay.ts

@@ -7,15 +7,22 @@ declare const __HMR_CONFIG_NAME__: string
 const hmrConfigName = __HMR_CONFIG_NAME__
 const base = __BASE__ || '/'
 
+export const cspNonce =
+  'document' in globalThis
+    ? document.querySelector<HTMLMetaElement>('meta[property=csp-nonce]')?.nonce
+    : undefined
+
 // Create an element with provided attributes and optional children
 function h(
   e: string,
-  attrs: Record<string, string> = {},
+  attrs: Record<string, string | undefined> = {},
   ...children: (string | Node)[]
 ) {
   const elem = document.createElement(e)
   for (const [k, v] of Object.entries(attrs)) {
-    elem.setAttribute(k, v)
+    if (v !== undefined) {
+      elem.setAttribute(k, v)
+    }
   }
   elem.append(...children)
   return elem
@@ -197,7 +204,7 @@ const createTemplate = () =>
         '.',
       ),
     ),
-    h('style', {}, templateStyle),
+    h('style', { nonce: cspNonce }, templateStyle),
   )
 
 const fileRE = /(?:file:\/\/)?(?:[a-zA-Z]:\\|\/).*?:\d+:\d+/g