fix: add style nonce to comply with content security policy

vitejs · Feb 22, 2023 · 7f5be23 · 7f5be23
1 parent 2556f88
commit 7f5be23
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
@@ -345,6 +345,13 @@ export function updateStyle(id: string, content: string): void {
     style.setAttribute('data-vite-dev-id', id)
     style.textContent = content
 
+    const cspNonce = document.querySelector<HTMLMetaElement>(
+      'meta[property=csp-nonce]',
+    )?.content
+    if (cspNonce) {
+      style.setAttribute('nonce', cspNonce)
+    }
+
     if (!lastInsertedStyle) {
       document.head.appendChild(style)
 

diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
@@ -518,3 +518,8 @@ test('async css order with css modules', async () => {
     expect(await getColor('.modules-pink')).toMatchInlineSnapshot('"pink"')
   }, true)
 })
+
+test.runIf(isServe)('style csp nonce', async () => {
+  const cspNonce = await page.getAttribute('style', 'nonce')
+  expect(cspNonce).toBe('random')
+})
diff --git a/playground/css/index.html b/playground/css/index.html
@@ -1,3 +1,5 @@
+<meta property="csp-nonce" content="random" />
+
 <link rel="stylesheet" href="./linked.css" />
 
 <div class="wrapper">