feat: write cspNonce to style tags (#16419)

Author: thebanjomatic

docs/guide/features.md

@@ -699,7 +699,7 @@ To deploy CSP, certain directives or configs must be set due to Vite's internals
 
 ### [`'nonce-{RANDOM}'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#nonce-base64-value)
 
-When [`html.cspNonce`](/config/shared-options#html-cspnonce) is set, Vite adds a nonce attribute with the specified value to the output script tag and link tag for stylesheets. Note that Vite will not add a nonce attribute to other tags, such as `<style>`. Additionally, when this option is set, Vite will inject a meta tag (`<meta property="csp-nonce" nonce="PLACEHOLDER" />`).
+When [`html.cspNonce`](/config/shared-options#html-cspnonce) is set, Vite adds a nonce attribute with the specified value to any `<script>`and `<style>`tags, as well as `<link>` tags for stylesheets and module preloading. Additionally, when this option is set, Vite will inject a meta tag (`<meta property="csp-nonce" nonce="PLACEHOLDER" />`).
 
 The nonce value of a meta tag with `property="csp-nonce"` will be used by Vite whenever necessary during both dev and after build.
 

packages/vite/src/node/plugins/html.ts

@@ -1184,6 +1184,7 @@ export function injectNonceAttributeTagHook(
 
 if(
 nodeName==='script'||
+nodeName==='style'||
 (nodeName==='link'&&
 attrs.some(
 (attr)=>

playground/csp/index.html

@@ -1,5 +1,5 @@
 <linkrel="stylesheet" href="./linked.css" />
-<stylenonce="#$NONCE$#">
+<style>
  .inline{
 color: green;
  }