fix(headers): add ssg hashes for script-src-elem and style-src-elem

dargmuesli · dargmuesli · commit cd66cd12ff6e · 2025-11-14T01:22:58.000+01:00
diff --git a/src/runtime/nitro/plugins/50-updateCsp.ts b/src/runtime/nitro/plugins/50-updateCsp.ts
@@ -54,10 +54,10 @@ function updateCspVariables(csp: ContentSecurityPolicyValue, nonce?: string, scr
       })
       .filter(source => source)
     
-    if (directive === 'script-src' && scriptHashes) {
+    if (['script-src', 'script-src-elem'].includes(directive) && scriptHashes) {
       modifiedSources.push(...scriptHashes)
     }
-    if (directive === 'style-src' && styleHashes) {
+    if (['style-src', 'style-src-elem'].includes(directive) && styleHashes) {
       modifiedSources.push(...styleHashes)
     }
 
diff --git a/test/fixtures/ssgHashes/nuxt.config.ts b/test/fixtures/ssgHashes/nuxt.config.ts
@@ -6,6 +6,19 @@ export default defineNuxtConfig({
     '/': {
       prerender: true
     },
+    '/inline-elem': {
+      prerender: true,
+      security: {
+        headers: {
+          contentSecurityPolicy: {
+            "script-src": false,
+            "style-src": false,
+            "script-src-elem": [],
+            "style-src-elem": []
+          }
+        }
+      }
+    },
     '/inline-script': {
       prerender: true
     },
diff --git a/test/fixtures/ssgHashes/pages/inline-elem.vue b/test/fixtures/ssgHashes/pages/inline-elem.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    Default page
+  </div>
+</template>
+<script setup>
+useHead({
+  script: [
+    { textContent: 'window.myImportantVar = 1', type: 'text/javascript' }
+  ],
+  style: [
+    { textContent: 'div { color: blue }', type: 'text/css' }
+  ]
+})
+</script>
diff --git a/test/ssgHashes.test.ts b/test/ssgHashes.test.ts
@@ -66,6 +66,16 @@ describe('[nuxt-security] SSG support of CSP', async () => {
     expect(strippedHeaderCsp).toBe(metaCsp)
   })
 
+  it('sets script- and style-src-elem for inline scripts and styles', async () => {
+    const res = await fetch('/inline-elem')
+
+    const body = await res.text()
+    const { csp } = extractDataFromBody(body)
+
+    expect(csp).toMatch(/script-src-elem[^;]+'sha256-/)
+    expect(csp).toMatch(/style-src-elem[^;]+'sha256-/)
+  })
+
   it('sets script-src for inline scripts', async () => {
     const res = await fetch('/inline-script')
 
@@ -88,7 +98,7 @@ describe('[nuxt-security] SSG support of CSP', 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()
@@ -263,4 +273,4 @@ describe('[nuxt-security] SSG support of CSP', async () => {
     expect(body).toBeDefined()
     expect(body).toMatch(/^<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy"/)
   })
-})
+})

Original file line number	Diff line number	Diff line change
`@@ -54,10 +54,10 @@ function updateCspVariables(csp: ContentSecurityPolicyValue, nonce?: string, scr`
`54`	`54`	`})`
`55`	`55`	`.filter(source => source)`
`56`	`56`
`57`		`- if (directive === 'script-src' && scriptHashes) {`
	`57`	`+ if (['script-src', 'script-src-elem'].includes(directive) && scriptHashes) {`
`58`	`58`	`modifiedSources.push(...scriptHashes)`
`59`	`59`	`}`
`60`		`- if (directive === 'style-src' && styleHashes) {`
	`60`	`+ if (['style-src', 'style-src-elem'].includes(directive) && styleHashes) {`
`61`	`61`	`modifiedSources.push(...styleHashes)`
`62`	`62`	`}`
`63`	`63`