Merge pull request #658 from GalacticHypernova/patch-6

fix(cspSsrNonce): more robust tag replacement

Author: Baroshem

src/runtime/nitro/plugins/40-cspSsrNonce.ts

@@ -2,11 +2,48 @@ import { defineNitroPlugin } from '#imports'
 import { resolveSecurityRules } from '../context'
 import { generateRandomNonce } from '../../../utils/crypto'
 
-const LINK_RE = /<link([^>]*?>)/gi
+const LINK_RE = /<link\b([^>]*?>)/gi
 const NONCE_RE = /nonce="[^"]+"/i
-const SCRIPT_RE = /<script([^>]*?>)/gi
-const STYLE_RE = /<style([^>]*?>)/gi
+const SCRIPT_RE = /<script\b([^>]*?>)/gi
+const STYLE_RE = /<style\b([^>]*?>)/gi
+const QUOTE_MASK_RE = /"([^"]*)"/g
+const QUOTE_RESTORE_RE = /__QUOTE_PLACEHOLDER_(\d+)__/g
 
+function injectNonceToTags(element: string, nonce: string) {
+  // Skip non-string elements
+  if (typeof element !== 'string') {
+    return element;
+  }
+  const quotes: string[] = [];
+
+  // Mask attributes to avoid manipulating stringified elements
+  let maskedElement = element.replace(QUOTE_MASK_RE, (match) => {
+    quotes.push(match);
+    return `__QUOTE_PLACEHOLDER_${quotes.length - 1}__`;
+  });
+  // Add nonce to all link tags
+  maskedElement = maskedElement.replace(LINK_RE, (match, rest) => {
+    if (NONCE_RE.test(rest)) {
+      return match.replace(NONCE_RE, `nonce="${nonce}"`);
+    }
+    return `<link nonce="${nonce}"` + rest
+  })
+  // Add nonce to all script tags
+  maskedElement = maskedElement.replace(SCRIPT_RE, (match, rest) => {
+    return `<script nonce="${nonce}"` + rest
+  })
+  // Add nonce to all style tags
+  maskedElement = maskedElement.replace(STYLE_RE, (match, rest) => {
+    return `<style nonce="${nonce}"` + rest
+  })
+
+  // Restore the original quoted content.
+  const restoredHtml = maskedElement.replace(QUOTE_RESTORE_RE, (match, index) => {
+    return quotes[parseInt(index, 10)];
+  });
+
+  return restoredHtml;
+}
 
 /**
  * This plugin generates a nonce for the current request and adds it to the HTML.
@@ -52,28 +89,7 @@ export default defineNitroPlugin((nitroApp) => {
     type Section = 'body' | 'bodyAppend' | 'bodyPrepend' | 'head'
     const sections = ['body', 'bodyAppend', 'bodyPrepend', 'head'] as Section[]
     for (const section of sections) {
-      html[section] = html[section].map((element) => {
-        // Skip non-string elements
-        if (typeof element !== 'string') {
-          return element;
-        }
-        // Add nonce to all link tags
-        element = element.replace(LINK_RE, (match, rest) => {
-          if (NONCE_RE.test(rest)) {
-            return match.replace(NONCE_RE, `nonce="${nonce}"`);
-          }
-          return `<link nonce="${nonce}"` + rest
-        })
-        // Add nonce to all script tags
-        element = element.replace(SCRIPT_RE, (match, rest) => {
-          return `<script nonce="${nonce}"` + rest
-        })
-        // Add nonce to all style tags
-        element = element.replace(STYLE_RE, (match, rest) => {
-          return `<style nonce="${nonce}"` + rest
-        })
-        return element
-      })
+      html[section] = html[section].map((element) => injectNonceToTags(element, nonce))
     }
 
     // Add meta header for Vite in development

test/fixtures/ssrNonce/pages/string-script.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="<script>This should remain with no nonce">
+    Hello
+  </div>
+</template>

test/fixtures/ssrNonce/pages/with-custom-element.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <div>Hello</div>
+    <scripter>This should remain as is</scripter>
+  </div>
+</template>

test/ssrNonce.test.ts

@@ -98,6 +98,28 @@ describe('[nuxt-security] Nonce', async () => {
     expect(cspNonces).toBe(null)
   })
 
+  /*it('does not modify custom elements', async () => {
+    const res = await fetch('/with-custom-element')
+
+    const body = /<scripter>/.test(await res.text())
+
+    expect(res).toBeDefined()
+    expect(res).toBeTruthy()
+    expect(body).toBe(true)
+  })*/
+
+  it('does not modify stringified elements', async () => {
+    const res = await fetch('/string-script').then(res=>res.text())
+
+    const body = res.match(/<div class="(.+)Hello/)
+    const hasNonce = body[1].includes('nonce=')
+
+    expect(res).toBeDefined()
+    expect(res).toBeTruthy()
+    expect(body[0]).toBeDefined()
+    expect(hasNonce).toBe(false)
+  })
+
   // TODO: reenable if it's possible for island context to share the same `event.context.security.nonce`
   it.skip('works with server-only components', async () => {
     const res = await fetch('/server-component')