fix(cspNonce): don't overwrite existing nonce values

Fixes: vitejs#16414

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

@@ -1180,6 +1180,13 @@ export function injectNonceAttributeTagHook(
         return
       }
 
+      const alreadyContainsNonce = !!node.attrs.find(
+        (attr) => attr.name === 'nonce',
+      )
+      if (alreadyContainsNonce) {
+        return
+      }
+
       if (
         node.nodeName === 'script' ||
         (node.nodeName === 'link' &&

playground/csp/index.html

@@ -4,10 +4,17 @@
     color: green;
   }
 </style>
+<script nonce="#$NONCE$#">
+  // nonce above verifies that this script is allowed to run with nonce
+  // but also verifies that we don't write two nonces as a result of
+  // setting html.cspNonce in the vite.config.jsg
+  document.querySelector('.inline-js').textContent = 'inline-js: ok'
+</script>
 <script type="module" src="./index.js"></script>
 <p class="linked">direct</p>
 <p class="inline">inline</p>
 <p class="from-js">from-js</p>
 <p class="dynamic">dynamic</p>
 <p class="js">js: error</p>
 <p class="dynamic-js">dynamic-js: error</p>
+<p class="inline-js">inline-js: error</p>

playground/csp/vite.config.js

@@ -35,6 +35,9 @@ const createMiddleware = (file, transform) => async (req, res) => {
 }
 
 export default defineConfig({
+  html: {
+    cspNonce: noncePlaceholder,
+  },
   plugins: [
     {
       name: 'nonce-inject',