Merge pull request #478 from hlhc/fix/ssg-hash-inline-regex

fix(csp): inline script/style have whitespace character

src/runtime/nitro/plugins/30-cspSsgHashes.ts

@@ -4,8 +4,8 @@ import { generateHash } from '../../../utils/hash'
 import type { Section } from '../../../types/module'
 
 
-const INLINE_SCRIPT_RE = /<script(?![^>]*?\bsrc="[\w:.\-\\/]+")[^>]*>(.*?)<\/script>/gi
-const STYLE_RE = /<style[^>]*>(.*?)<\/style>/gi
+const INLINE_SCRIPT_RE = /<script(?![^>]*?\bsrc="[\w:.\-\\/]+")[^>]*>([\s\S]*?)<\/script>/gi
+const STYLE_RE = /<style[^>]*>([\s\S]*?)<\/style>/gi
 const SCRIPT_RE = /<script(?=[^>]+\bsrc="[^"]+")(?=[^>]+\bintegrity="([\w\-+/=]+)")[^>]+(?:\/>|><\/script[^>]*?>)/gi
 const LINK_RE = /<link(?=[^>]+\brel="(stylesheet|preload|modulepreload)")(?=[^>]+\bintegrity="([\w\-+/=]+)")(?=(?:[^>]+\bas="(\w+)")?)[^>]+>/gi
 

test/fixtures/ssgHashes/nuxt.config.ts

@@ -9,9 +9,15 @@ export default defineNuxtConfig({
     '/inline-script': {
       prerender: true
     },
+    '/inline-script-with-linebreak': {
+      prerender: true
+    },
     '/inline-style': {
       prerender: true
     },
+    '/inline-style-with-linebreak': {
+      prerender: true
+    },
     '/external-script': {
       prerender: true
     },

test/fixtures/ssgHashes/pages/inline-script-with-linebreak.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>Default page</div>
+</template>
+<script setup>
+useHead({
+  script: [
+    {
+      textContent: `
+      
+      
+      window.myImportantVar = 1
+      
+      
+      `,
+      type: 'text/javascript'
+    }
+  ]
+})
+</script>

test/fixtures/ssgHashes/pages/inline-style-with-linebreak.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>Default page</div>
+</template>
+<script setup>
+useHead({
+  style: [
+    {
+      textContent: `
+      div { color: blue }
+      `,
+      type: 'text/css'
+    }
+  ]
+})
+</script>

test/ssgHashes.test.ts

@@ -84,6 +84,23 @@ describe('[nuxt-security] SSG support of CSP', async () => {
     expect(externalStyleHashes).toBe(expectedExternalStyleHashes)
   })
 
+  it('sets script-src for inline scripts with line break', async () => {
+    const res = await fetch('/inline-script-with-linebreak')
+    const body = await res.text()
+    const { metaTag, csp, elementsWithIntegrity, inlineScriptHashes, externalScriptHashes, inlineStyleHashes, externalStyleHashes } = extractDataFromBody(body)
+
+    expect(res).toBeDefined()
+    expect(res).toBeTruthy()
+    expect(body).toBeDefined()
+    expect(metaTag).toBeDefined()
+    expect(csp).toBeDefined()
+    expect(elementsWithIntegrity).toBe(expectedIntegrityAttributes)
+    expect(inlineScriptHashes).toBe(expectedInlineScriptHashes + 1) // Inlined script in head
+    expect(externalScriptHashes).toBe(expectedExternalScriptHashes + 1) // + 1 vue modulepreload
+    expect(inlineStyleHashes).toBe(expectedInlineStyleHashes)
+    expect(externalStyleHashes).toBe(expectedExternalStyleHashes)
+  })
+
   it('sets style-src for inline styles', async () => {
     const res = await fetch('/inline-style')
 
@@ -102,6 +119,24 @@ describe('[nuxt-security] SSG support of CSP', async () => {
     expect(externalStyleHashes).toBe(expectedExternalStyleHashes)
   })
 
+  it('sets style-src for inline styles with line break', async () => {
+    const res = await fetch('/inline-style-with-linebreak')
+
+    const body = await res.text()
+    const { metaTag, csp, elementsWithIntegrity, inlineScriptHashes, externalScriptHashes, inlineStyleHashes, externalStyleHashes } = extractDataFromBody(body)
+
+    expect(res).toBeDefined()
+    expect(res).toBeTruthy()
+    expect(body).toBeDefined()
+    expect(metaTag).toBeDefined()
+    expect(csp).toBeDefined()
+    expect(elementsWithIntegrity).toBe(expectedIntegrityAttributes)
+    expect(inlineScriptHashes).toBe(expectedInlineScriptHashes)
+    expect(externalScriptHashes).toBe(expectedExternalScriptHashes + 1) // + 1 vue modulepreload
+    expect(inlineStyleHashes).toBe(expectedInlineStyleHashes + 1) // Inlined style
+    expect(externalStyleHashes).toBe(expectedExternalStyleHashes)
+  })
+
 
   it('sets script-src for external scripts', async () => {
     const res = await fetch('/external-script')