diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index 8943fb0521a5d7..563e9f1c5fa4d1 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -405,6 +405,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
index 5c85f24fe8820b..b5f317b7a2587f 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -538,3 +538,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')
+})
\ No newline at end of file
diff --git a/playground/css/index.html b/playground/css/index.html
index 2016c1b3c72ca8..90558827fdd694 100644
--- 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">