fix: add style nonce to comply with content security policy (fix #11862)

packages/vite/src/client/client.ts

@@ -395,6 +395,7 @@ if ('document' in globalThis) {
 // all css imports should be inserted at the same position
 // because after build it will be a single css file
 let lastInsertedStyle: HTMLStyleElement | undefined
+let cspNonce: string | undefined | null = undefined
 
 export function updateStyle(id: string, content: string): void {
   let style = sheetsMap.get(id)
@@ -404,6 +405,15 @@ export function updateStyle(id: string, content: string): void {
     style.setAttribute('data-vite-dev-id', id)
     style.textContent = content
 
+    if (cspNonce === undefined) {
+      cspNonce =
+        document.querySelector<HTMLMetaElement>('meta[property=csp-nonce]')
+          ?.nonce ?? null
+    }
+    if (cspNonce) {
+      style.setAttribute('nonce', cspNonce)
+    }
+
     if (!lastInsertedStyle) {
       document.head.appendChild(style)
 

playground/css/__tests__/css.spec.ts

@@ -6,6 +6,7 @@ import {
   getBg,
   getColor,
   isBuild,
+  isServe,
   page,
   removeFile,
   serverLogs,
@@ -508,3 +509,8 @@ test('async css order with css modules', async () => {
 test('@import scss', async () => {
   expect(await getColor('.at-import-scss')).toBe('red')
 })
+
+test.runIf(isServe)('style csp nonce', async () => {
+  const cspNonce = await page.getAttribute('style', 'nonce')
+  expect(cspNonce).toBe('random')
+})

playground/css/index.html

@@ -1,3 +1,5 @@
+<meta property="csp-nonce" nonce="random" />
+
 <link rel="stylesheet" href="./linked.css" />
 
 <div class="wrapper">