From 750d8f1b3001e3ae918e77ab4925600f4eeee455 Mon Sep 17 00:00:00 2001
From: EECOLOR <ewestra@kaliber.net>
Date: Wed, 30 Oct 2024 11:00:01 +0100
Subject: [PATCH 1/3] Add support for inline scripts in combination with CSP
 header

---
 library/lib/SafeScript.js                  | 19 ++++++++++
 library/lib/rollbar.js                     |  3 +-
 library/lib/serve.js                       | 42 ++++++++++++++++++----
 library/lib/stylesheet.js                  |  5 +--
 library/lib/universalComponents.js         |  3 +-
 library/webpack-loaders/template-loader.js |  1 +
 library/webpack-plugins/template-plugin.js |  8 +++--
 7 files changed, 68 insertions(+), 13 deletions(-)
 create mode 100644 library/lib/SafeScript.js

diff --git a/library/lib/SafeScript.js b/library/lib/SafeScript.js
new file mode 100644
index 00000000..70280691
--- /dev/null
+++ b/library/lib/SafeScript.js
@@ -0,0 +1,19 @@
+const crypto = require('crypto')
+const React = require('react')
+
+let scriptHashes = null
+
+module.exports = { SafeScript, recordScriptHashes }
+
+function SafeScript({ dangerouslySetInnerHTML }) {
+  if (!scriptHashes) throw new Error('No script hashes present')
+  scriptHashes.add(crypto.createHash('sha256').update(dangerouslySetInnerHTML.__html).digest('base64'))
+  return React.createElement('script', { dangerouslySetInnerHTML })
+}
+
+function recordScriptHashes(newScriptHashses, callback) {
+  scriptHashes = newScriptHashses
+  const result = callback()
+  scriptHashes = null
+  return result
+}
diff --git a/library/lib/rollbar.js b/library/lib/rollbar.js
index 63d1ef51..ba8501db 100644
--- a/library/lib/rollbar.js
+++ b/library/lib/rollbar.js
@@ -1,5 +1,6 @@
 import fs from 'fs'
 import merge from 'rollbar/src/merge'
+import { SafeScript } from './SafeScript'
 
 const snippet = fs.readFileSync(__non_webpack_require__.resolve('rollbar/dist/rollbar.snippet.js'), 'utf8')
 
@@ -15,5 +16,5 @@ const defaultOptions = {
 export default function rollbar(options, nonSerializableRollbarConfig = '/* no non-serializable config */') {
   const config = JSON.stringify(merge(defaultOptions, options))
   const __html = `var _rollbarConfig = ${config};${nonSerializableRollbarConfig};${snippet}`
-  return <script dangerouslySetInnerHTML={{ __html }} />
+  return <SafeScript dangerouslySetInnerHTML={{ __html }} />
 }
diff --git a/library/lib/serve.js b/library/lib/serve.js
index 125cc4bc..fc7705ff 100644
--- a/library/lib/serve.js
+++ b/library/lib/serve.js
@@ -31,6 +31,9 @@ const isProduction = process.env.NODE_ENV === 'production'
 
 const notCached = ['html', 'txt', 'json', 'xml']
 
+const { contentSecurityPolicy, ...helmetOptionsToUse } = helmetOptions || {}
+const cspMiddleware = contentSecurityPolicy && createCspMiddleware(contentSecurityPolicy)
+
 if (isProduction) app.use(morgan('combined'))
 app.use(helmet(Object.assign(
   {
@@ -38,7 +41,7 @@ app.use(helmet(Object.assign(
     contentSecurityPolicy: false,
     referrerPolicy: { policy: 'strict-origin-when-cross-origin' },
   },
-  helmetOptions
+  helmetOptionsToUse
 )))
 app.use(compression())
 app.set('trust proxy', true)
@@ -141,7 +144,6 @@ function possibleDirectories(path) {
 function serveIndexWithRouting(req, res, file) {
   const envRequire = isProduction ? require : require('import-fresh')
   const routeTemplate = envRequire(file)
-
   const routes = routeTemplate.routes
   const location = parsePath(req.url)
 
@@ -156,8 +158,36 @@ function serveIndexWithRouting(req, res, file) {
       const indexPath = resolve(target, publicPathDir, indexLocation, indexWithRouting)
       return [data, envRequire(indexPath)]
     })
-    .then(([{ status, headers, data }, template]) =>
-      Promise.resolve(template({ location, data })).then(html => [status, headers, html])
-    )
-    .then(([ status, headers, html ]) => res.status(status).set(headers).send(html))
+    .then(([{ status, headers, data }, template]) => {
+      const scriptHashes = new Set()
+      const html = template({ location, data }, scriptHashes)
+
+      if (!cspMiddleware)
+        return res.status(status).set(headers).send(html)
+      else
+        return new Promise((resolve, reject) => { // TODO: remove promises
+          res.locals.scriptHashes = Array.from(scriptHashes).map(hash => `'sha256-${hash}'`)
+
+          cspMiddleware(req, res, (e) => {
+            if (e) reject(e)
+            res.status(status).set(headers).send(html)
+            resolve(undefined)
+          })
+        })
+    })
+}
+
+function createCspMiddleware(contentSecurityPolicy) {
+  console.log('create middleware')
+  const contentSecurityPolicyWithHashes = {
+    ...contentSecurityPolicy,
+    directives: {
+      ...contentSecurityPolicy.directives,
+      'script-src-elem': [
+        ...contentSecurityPolicy.directives['script-src-elem'],
+        (req, res) => res.locals.scriptHashes.join(' '),
+      ]
+    }
+  }
+  return helmet.contentSecurityPolicy(contentSecurityPolicyWithHashes)
 }
diff --git a/library/lib/stylesheet.js b/library/lib/stylesheet.js
index cf419613..b433cdd5 100644
--- a/library/lib/stylesheet.js
+++ b/library/lib/stylesheet.js
@@ -5,6 +5,7 @@
 */
 
 import hotCssReplacementClient from './hot-css-replacement-client?transpiled-javascript-string'
+import { SafeScript } from './SafeScript'
 
 const isWatch = process.env.WATCH
 
@@ -18,10 +19,10 @@ export default __webpack_css_chunk_hashes__
 function createHotReloadClient() {
   const [ port, cssHashes, chunkName, publicPath ] = [ __webpack_websocket_port__, __webpack_css_chunk_hashes__, __webpack_chunkname__, __webpack_public_path__ ]
   return (
-    <script
+    <SafeScript
       key='stylesheet_hotCssReplacementClient'
       dangerouslySetInnerHTML={{
-      __html: `(${hotCssReplacementClient})(${port}, ${JSON.stringify(cssHashes)}, '${chunkName}', '${publicPath}')`
+        __html: `(${hotCssReplacementClient})(${port}, ${JSON.stringify(cssHashes)}, '${chunkName}', '${publicPath}')`
       }}
     />
   )
diff --git a/library/lib/universalComponents.js b/library/lib/universalComponents.js
index a04e2952..764040ca 100644
--- a/library/lib/universalComponents.js
+++ b/library/lib/universalComponents.js
@@ -1,5 +1,6 @@
 import { hydrateRoot, createRoot } from 'react-dom/client'
 import { safeJsonStringify } from '@kaliber/safe-json-stringify'
+import { SafeScript } from './SafeScript'
 
 const containerMarker = 'data-kaliber-component-container'
 const E = /** @type {any} */ ('kaliber-component-container')
@@ -19,7 +20,7 @@ export function ComponentServerWrapper({ componentName, props, renderedComponent
 
       {/* Use render blocking script to set a container marker and remove the custom components.
           This ensures the page is never rendered with the intermediate structure */}
-      <script dangerouslySetInnerHTML={{ __html: scriptContent }} />
+      <SafeScript dangerouslySetInnerHTML={{ __html: scriptContent }} />
     </>
   )
 }
diff --git a/library/webpack-loaders/template-loader.js b/library/webpack-loaders/template-loader.js
index f418c393..bf99983b 100644
--- a/library/webpack-loaders/template-loader.js
+++ b/library/webpack-loaders/template-loader.js
@@ -15,5 +15,6 @@ TemplateLoader.pitch = function TemplateLoaderPitch(remainingRequest, precedingR
   // This should tell us what we need to use: https://webpack.js.org/configuration/module/#rule-enforce
   return `|export { default as template } from '-!${precedingRequest}!${remainingRequest}?template-source'
           |export { default as renderer } from '${rendererPath}'
+          |export { recordScriptHashes } from '@kaliber/build/lib/SafeScript'
           |`.split(/^[ \t]*\|/m).join('')
 }
diff --git a/library/webpack-plugins/template-plugin.js b/library/webpack-plugins/template-plugin.js
index ae871923..737da021 100644
--- a/library/webpack-plugins/template-plugin.js
+++ b/library/webpack-plugins/template-plugin.js
@@ -177,14 +177,16 @@ async function createStaticTemplate(name, source, map) {
 function createDynamicTemplate(name, ext) {
   return new RawSource(
     `|const envRequire = process.env.NODE_ENV === 'production' ? require : require('import-fresh')
-     |const { template, renderer } = envRequire('./${name}${ext}')
+     |const { template, renderer, recordScriptHashes } = envRequire('./${name}${ext}')
      |
      |Object.assign(render, template)
      |
      |module.exports = render
      |
-     |function render(props) {
-     |  return renderer(template(props))
+     |function render(props, scriptHashes) {
+     |  return recordScriptHashes(scriptHashes, () =>
+     |    renderer(template(props))
+     |  )
      |}
      |`.replace(/^[ \t]*\|/gm, '')
   )

From cb24f10af289194e973c1fd7ee55db265d83a6c1 Mon Sep 17 00:00:00 2001
From: EECOLOR <ewestra@kaliber.net>
Date: Fri, 1 Nov 2024 16:06:03 +0100
Subject: [PATCH 2/3] Improve error message

---
 library/lib/SafeScript.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/library/lib/SafeScript.js b/library/lib/SafeScript.js
index 70280691..c1068b53 100644
--- a/library/lib/SafeScript.js
+++ b/library/lib/SafeScript.js
@@ -6,7 +6,7 @@ let scriptHashes = null
 module.exports = { SafeScript, recordScriptHashes }
 
 function SafeScript({ dangerouslySetInnerHTML }) {
-  if (!scriptHashes) throw new Error('No script hashes present')
+  if (!scriptHashes) throw new Error('No script hashes present, can not use SafeScript in a static environment, check if your *.html.js file returns a function')
   scriptHashes.add(crypto.createHash('sha256').update(dangerouslySetInnerHTML.__html).digest('base64'))
   return React.createElement('script', { dangerouslySetInnerHTML })
 }

From 977bbeab32d8cc04ab86a6b73acde9d67379c827 Mon Sep 17 00:00:00 2001
From: EECOLOR <ewestra@kaliber.net>
Date: Tue, 5 Nov 2024 13:18:42 +0100
Subject: [PATCH 3/3] Make static templates functional

---
 library/lib/SafeScript.js   | 10 ++++------
 library/lib/eval-in-fork.js | 10 ++++++++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/library/lib/SafeScript.js b/library/lib/SafeScript.js
index c1068b53..92ca18c3 100644
--- a/library/lib/SafeScript.js
+++ b/library/lib/SafeScript.js
@@ -1,19 +1,17 @@
 const crypto = require('crypto')
 const React = require('react')
 
-let scriptHashes = null
-
 module.exports = { SafeScript, recordScriptHashes }
 
 function SafeScript({ dangerouslySetInnerHTML }) {
-  if (!scriptHashes) throw new Error('No script hashes present, can not use SafeScript in a static environment, check if your *.html.js file returns a function')
-  scriptHashes.add(crypto.createHash('sha256').update(dangerouslySetInnerHTML.__html).digest('base64'))
+  if (!global.scriptHashes) throw new Error('No script hashes present')
+  global.scriptHashes.add(crypto.createHash('sha256').update(dangerouslySetInnerHTML.__html).digest('base64'))
   return React.createElement('script', { dangerouslySetInnerHTML })
 }
 
 function recordScriptHashes(newScriptHashses, callback) {
-  scriptHashes = newScriptHashses
+  global.scriptHashes = newScriptHashses
   const result = callback()
-  scriptHashes = null
+  global.scriptHashes = null
   return result
 }
diff --git a/library/lib/eval-in-fork.js b/library/lib/eval-in-fork.js
index d5e32185..4bf88586 100644
--- a/library/lib/eval-in-fork.js
+++ b/library/lib/eval-in-fork.js
@@ -8,8 +8,14 @@ attempt(() => {
   function handleMessage(source) {
     attempt(() => {
       process.off('message', handleMessage)
-      const { template, renderer } = evalSource(source)
-      const result = renderer(template)
+
+      const { template, renderer, recordScriptHashes } = evalSource(source)
+      const scriptHashes = new Set()
+      const result = recordScriptHashes(scriptHashes, () =>
+        renderer(template)
+      )
+      if (scriptHashes.size)
+        console.log('[Warning]: generating a static template with inline scripts, if you want to use a CSP header, make it a dynamic template by exporting a function')
 
       process.send(result, e =>
         attempt(() => {