From 85049f528c2626509d26d29813d9ec33f52a1271 Mon Sep 17 00:00:00 2001
From: "me@jeffersonbledsoe.com" <me@jeffersonbledsoe.com>
Date: Fri, 29 Aug 2025 17:02:33 +0100
Subject: [PATCH 01/13] Update peer dependency versionss

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eeb94ca..9b0e760 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "stylelint-prettier": "4.0.2"
   },
   "peerDependencies": {
-    "@plone/volto": "^17.0.0"
+    "@plone/volto": "^16.0.0 || ^17.0.0"
   },
   "browser": {
     "crypto": false

From 670f9acd00d1641d900e6c06899ed370e8fd8aeb Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Tue, 14 Oct 2025 15:53:39 +0100
Subject: [PATCH 02/13] Shadow & patch injectStylesIntoStyleTag for nonce
 support in dev mode

---
 razzle.extend.js                         |  26 +++
 src/injectStylesIntoStyleTag.js          | 279 +++++++++++++++++++++++
 src/injectStylesIntoStyleTag.original.js | 269 ++++++++++++++++++++++
 3 files changed, 574 insertions(+)
 create mode 100644 razzle.extend.js
 create mode 100644 src/injectStylesIntoStyleTag.js
 create mode 100644 src/injectStylesIntoStyleTag.original.js

diff --git a/razzle.extend.js b/razzle.extend.js
new file mode 100644
index 0000000..7a7fad5
--- /dev/null
+++ b/razzle.extend.js
@@ -0,0 +1,26 @@
+const path = require('path');
+const webpack = require('webpack');
+
+const modify = (config, { target, dev }) => {
+
+  // Only modify client-side builds in development
+  if (target === 'web' && dev) {
+    console.log('[volto-csp] Adding CSP nonce support for style-loader');
+
+    // Use NormalModuleReplacementPlugin to replace style-loader's runtime
+    // with our patched version that checks window.__webpack_nonce__
+    config.plugins.push(
+      new webpack.NormalModuleReplacementPlugin(
+        /style-loader\/dist\/runtime\/injectStylesIntoStyleTag\.js$/,
+        path.resolve(__dirname, './src/injectStylesIntoStyleTag.js')
+      )
+    );
+  }
+
+  return config;
+};
+
+module.exports = {
+  plugins: (plugs) => plugs,
+  modify,
+};
diff --git a/src/injectStylesIntoStyleTag.js b/src/injectStylesIntoStyleTag.js
new file mode 100644
index 0000000..a293797
--- /dev/null
+++ b/src/injectStylesIntoStyleTag.js
@@ -0,0 +1,279 @@
+// This is a patched version of:
+// style-loader/dist/runtime/injectStylesIntoStyleTag.js
+// which is injected in razzle.config.js
+
+"use strict";
+
+var isOldIE = function isOldIE() {
+  var memo;
+  return function memorize() {
+    if (typeof memo === 'undefined') {
+      // Test for IE <= 9 as proposed by Browserhacks
+      // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
+      // Tests for existence of standard globals is to allow style-loader
+      // to operate correctly into non-standard environments
+      // @see https://github.com/webpack-contrib/style-loader/issues/177
+      memo = Boolean(window && document && document.all && !window.atob);
+    }
+
+    return memo;
+  };
+}();
+
+var getTarget = function getTarget() {
+  var memo = {};
+  return function memorize(target) {
+    if (typeof memo[target] === 'undefined') {
+      var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
+
+      if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
+        try {
+          // This will throw an exception if access to iframe is blocked
+          // due to cross-origin restrictions
+          styleTarget = styleTarget.contentDocument.head;
+        } catch (e) {
+          // istanbul ignore next
+          styleTarget = null;
+        }
+      }
+
+      memo[target] = styleTarget;
+    }
+
+    return memo[target];
+  };
+}();
+
+var stylesInDom = [];
+
+function getIndexByIdentifier(identifier) {
+  var result = -1;
+
+  for (var i = 0; i < stylesInDom.length; i++) {
+    if (stylesInDom[i].identifier === identifier) {
+      result = i;
+      break;
+    }
+  }
+
+  return result;
+}
+
+function modulesToDom(list, options) {
+  var idCountMap = {};
+  var identifiers = [];
+
+  for (var i = 0; i < list.length; i++) {
+    var item = list[i];
+    var id = options.base ? item[0] + options.base : item[0];
+    var count = idCountMap[id] || 0;
+    var identifier = "".concat(id, " ").concat(count);
+    idCountMap[id] = count + 1;
+    var index = getIndexByIdentifier(identifier);
+    var obj = {
+      css: item[1],
+      media: item[2],
+      sourceMap: item[3]
+    };
+
+    if (index !== -1) {
+      stylesInDom[index].references++;
+      stylesInDom[index].updater(obj);
+    } else {
+      stylesInDom.push({
+        identifier: identifier,
+        updater: addStyle(obj, options),
+        references: 1
+      });
+    }
+
+    identifiers.push(identifier);
+  }
+
+  return identifiers;
+}
+
+function insertStyleElement(options) {
+  var style = document.createElement('style');
+  var attributes = options.attributes || {};
+
+  // CSP nonce support - patched to check window.__webpack_nonce__ as fallback
+  if (typeof attributes.nonce === 'undefined') {
+    var nonce = typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
+
+    // Fallback to window.__webpack_nonce__ if bare global not accessible
+    if (!nonce && typeof window !== 'undefined' && window.__webpack_nonce__) {
+      nonce = window.__webpack_nonce__;
+    }
+
+    if (nonce) {
+      attributes.nonce = nonce;
+    }
+  }
+
+  Object.keys(attributes).forEach(function (key) {
+    style.setAttribute(key, attributes[key]);
+  });
+
+  if (typeof options.insert === 'function') {
+    options.insert(style);
+  } else {
+    var target = getTarget(options.insert || 'head');
+
+    if (!target) {
+      throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
+    }
+
+    target.appendChild(style);
+  }
+
+  return style;
+}
+
+function removeStyleElement(style) {
+  // istanbul ignore if
+  if (style.parentNode === null) {
+    return false;
+  }
+
+  style.parentNode.removeChild(style);
+}
+/* istanbul ignore next  */
+
+
+var replaceText = function replaceText() {
+  var textStore = [];
+  return function replace(index, replacement) {
+    textStore[index] = replacement;
+    return textStore.filter(Boolean).join('\n');
+  };
+}();
+
+function applyToSingletonTag(style, index, remove, obj) {
+  var css = remove ? '' : obj.media ? "@media ".concat(obj.media, " {").concat(obj.css, "}") : obj.css; // For old IE
+
+  /* istanbul ignore if  */
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = replaceText(index, css);
+  } else {
+    var cssNode = document.createTextNode(css);
+    var childNodes = style.childNodes;
+
+    if (childNodes[index]) {
+      style.removeChild(childNodes[index]);
+    }
+
+    if (childNodes.length) {
+      style.insertBefore(cssNode, childNodes[index]);
+    } else {
+      style.appendChild(cssNode);
+    }
+  }
+}
+
+function applyToTag(style, options, obj) {
+  var css = obj.css;
+  var media = obj.media;
+  var sourceMap = obj.sourceMap;
+
+  if (media) {
+    style.setAttribute('media', media);
+  } else {
+    style.removeAttribute('media');
+  }
+
+  if (sourceMap && typeof btoa !== 'undefined') {
+    css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
+  } // For old IE
+
+  /* istanbul ignore if  */
+
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    while (style.firstChild) {
+      style.removeChild(style.firstChild);
+    }
+
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var singleton = null;
+var singletonCounter = 0;
+
+function addStyle(obj, options) {
+  var style;
+  var update;
+  var remove;
+
+  if (options.singleton) {
+    var styleIndex = singletonCounter++;
+    style = singleton || (singleton = insertStyleElement(options));
+    update = applyToSingletonTag.bind(null, style, styleIndex, false);
+    remove = applyToSingletonTag.bind(null, style, styleIndex, true);
+  } else {
+    style = insertStyleElement(options);
+    update = applyToTag.bind(null, style, options);
+
+    remove = function remove() {
+      removeStyleElement(style);
+    };
+  }
+
+  update(obj);
+  return function updateStyle(newObj) {
+    if (newObj) {
+      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {
+        return;
+      }
+
+      update(obj = newObj);
+    } else {
+      remove();
+    }
+  };
+}
+
+module.exports = function (list, options) {
+  options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+  // tags it will allow on a page
+
+  if (!options.singleton && typeof options.singleton !== 'boolean') {
+    options.singleton = isOldIE();
+  }
+
+  list = list || [];
+  var lastIdentifiers = modulesToDom(list, options);
+  return function update(newList) {
+    newList = newList || [];
+
+    if (Object.prototype.toString.call(newList) !== '[object Array]') {
+      return;
+    }
+
+    for (var i = 0; i < lastIdentifiers.length; i++) {
+      var identifier = lastIdentifiers[i];
+      var index = getIndexByIdentifier(identifier);
+      stylesInDom[index].references--;
+    }
+
+    var newLastIdentifiers = modulesToDom(newList, options);
+
+    for (var _i = 0; _i < lastIdentifiers.length; _i++) {
+      var _identifier = lastIdentifiers[_i];
+
+      var _index = getIndexByIdentifier(_identifier);
+
+      if (stylesInDom[_index].references === 0) {
+        stylesInDom[_index].updater();
+
+        stylesInDom.splice(_index, 1);
+      }
+    }
+
+    lastIdentifiers = newLastIdentifiers;
+  };
+};
\ No newline at end of file
diff --git a/src/injectStylesIntoStyleTag.original.js b/src/injectStylesIntoStyleTag.original.js
new file mode 100644
index 0000000..71b848c
--- /dev/null
+++ b/src/injectStylesIntoStyleTag.original.js
@@ -0,0 +1,269 @@
+"use strict";
+
+var isOldIE = function isOldIE() {
+  var memo;
+  return function memorize() {
+    if (typeof memo === 'undefined') {
+      // Test for IE <= 9 as proposed by Browserhacks
+      // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
+      // Tests for existence of standard globals is to allow style-loader
+      // to operate correctly into non-standard environments
+      // @see https://github.com/webpack-contrib/style-loader/issues/177
+      memo = Boolean(window && document && document.all && !window.atob);
+    }
+
+    return memo;
+  };
+}();
+
+var getTarget = function getTarget() {
+  var memo = {};
+  return function memorize(target) {
+    if (typeof memo[target] === 'undefined') {
+      var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
+
+      if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
+        try {
+          // This will throw an exception if access to iframe is blocked
+          // due to cross-origin restrictions
+          styleTarget = styleTarget.contentDocument.head;
+        } catch (e) {
+          // istanbul ignore next
+          styleTarget = null;
+        }
+      }
+
+      memo[target] = styleTarget;
+    }
+
+    return memo[target];
+  };
+}();
+
+var stylesInDom = [];
+
+function getIndexByIdentifier(identifier) {
+  var result = -1;
+
+  for (var i = 0; i < stylesInDom.length; i++) {
+    if (stylesInDom[i].identifier === identifier) {
+      result = i;
+      break;
+    }
+  }
+
+  return result;
+}
+
+function modulesToDom(list, options) {
+  var idCountMap = {};
+  var identifiers = [];
+
+  for (var i = 0; i < list.length; i++) {
+    var item = list[i];
+    var id = options.base ? item[0] + options.base : item[0];
+    var count = idCountMap[id] || 0;
+    var identifier = "".concat(id, " ").concat(count);
+    idCountMap[id] = count + 1;
+    var index = getIndexByIdentifier(identifier);
+    var obj = {
+      css: item[1],
+      media: item[2],
+      sourceMap: item[3]
+    };
+
+    if (index !== -1) {
+      stylesInDom[index].references++;
+      stylesInDom[index].updater(obj);
+    } else {
+      stylesInDom.push({
+        identifier: identifier,
+        updater: addStyle(obj, options),
+        references: 1
+      });
+    }
+
+    identifiers.push(identifier);
+  }
+
+  return identifiers;
+}
+
+function insertStyleElement(options) {
+  var style = document.createElement('style');
+  var attributes = options.attributes || {};
+
+  if (typeof attributes.nonce === 'undefined') {
+    var nonce = typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
+
+    if (nonce) {
+      attributes.nonce = nonce;
+    }
+  }
+
+  Object.keys(attributes).forEach(function (key) {
+    style.setAttribute(key, attributes[key]);
+  });
+
+  if (typeof options.insert === 'function') {
+    options.insert(style);
+  } else {
+    var target = getTarget(options.insert || 'head');
+
+    if (!target) {
+      throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
+    }
+
+    target.appendChild(style);
+  }
+
+  return style;
+}
+
+function removeStyleElement(style) {
+  // istanbul ignore if
+  if (style.parentNode === null) {
+    return false;
+  }
+
+  style.parentNode.removeChild(style);
+}
+/* istanbul ignore next  */
+
+
+var replaceText = function replaceText() {
+  var textStore = [];
+  return function replace(index, replacement) {
+    textStore[index] = replacement;
+    return textStore.filter(Boolean).join('\n');
+  };
+}();
+
+function applyToSingletonTag(style, index, remove, obj) {
+  var css = remove ? '' : obj.media ? "@media ".concat(obj.media, " {").concat(obj.css, "}") : obj.css; // For old IE
+
+  /* istanbul ignore if  */
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = replaceText(index, css);
+  } else {
+    var cssNode = document.createTextNode(css);
+    var childNodes = style.childNodes;
+
+    if (childNodes[index]) {
+      style.removeChild(childNodes[index]);
+    }
+
+    if (childNodes.length) {
+      style.insertBefore(cssNode, childNodes[index]);
+    } else {
+      style.appendChild(cssNode);
+    }
+  }
+}
+
+function applyToTag(style, options, obj) {
+  var css = obj.css;
+  var media = obj.media;
+  var sourceMap = obj.sourceMap;
+
+  if (media) {
+    style.setAttribute('media', media);
+  } else {
+    style.removeAttribute('media');
+  }
+
+  if (sourceMap && typeof btoa !== 'undefined') {
+    css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
+  } // For old IE
+
+  /* istanbul ignore if  */
+
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    while (style.firstChild) {
+      style.removeChild(style.firstChild);
+    }
+
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var singleton = null;
+var singletonCounter = 0;
+
+function addStyle(obj, options) {
+  var style;
+  var update;
+  var remove;
+
+  if (options.singleton) {
+    var styleIndex = singletonCounter++;
+    style = singleton || (singleton = insertStyleElement(options));
+    update = applyToSingletonTag.bind(null, style, styleIndex, false);
+    remove = applyToSingletonTag.bind(null, style, styleIndex, true);
+  } else {
+    style = insertStyleElement(options);
+    update = applyToTag.bind(null, style, options);
+
+    remove = function remove() {
+      removeStyleElement(style);
+    };
+  }
+
+  update(obj);
+  return function updateStyle(newObj) {
+    if (newObj) {
+      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {
+        return;
+      }
+
+      update(obj = newObj);
+    } else {
+      remove();
+    }
+  };
+}
+
+module.exports = function (list, options) {
+  options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+  // tags it will allow on a page
+
+  if (!options.singleton && typeof options.singleton !== 'boolean') {
+    options.singleton = isOldIE();
+  }
+
+  list = list || [];
+  var lastIdentifiers = modulesToDom(list, options);
+  return function update(newList) {
+    newList = newList || [];
+
+    if (Object.prototype.toString.call(newList) !== '[object Array]') {
+      return;
+    }
+
+    for (var i = 0; i < lastIdentifiers.length; i++) {
+      var identifier = lastIdentifiers[i];
+      var index = getIndexByIdentifier(identifier);
+      stylesInDom[index].references--;
+    }
+
+    var newLastIdentifiers = modulesToDom(newList, options);
+
+    for (var _i = 0; _i < lastIdentifiers.length; _i++) {
+      var _identifier = lastIdentifiers[_i];
+
+      var _index = getIndexByIdentifier(_identifier);
+
+      if (stylesInDom[_index].references === 0) {
+        stylesInDom[_index].updater();
+
+        stylesInDom.splice(_index, 1);
+      }
+    }
+
+    lastIdentifiers = newLastIdentifiers;
+  };
+};
\ No newline at end of file

From 84f80aa76fce87a3ea8dc86c0b2bfce762aa34c6 Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Tue, 14 Oct 2025 15:55:52 +0100
Subject: [PATCH 03/13] Create middleware component & generation of csp header

---
 .../volto/helpers/Html/Html.cspheader.jsx     | 216 ++++++++++++++++++
 .../volto/helpers/Html/Html.jsx               |  70 +++---
 src/helpers/ContentSecurityPolicy.jsx         | 143 ++++++++++++
 src/helpers/index.js                          |  12 +
 src/index.js                                  |  15 ++
 src/middleware.js                             |  56 +++++
 src/reducers/csp.js                           |  20 ++
 7 files changed, 500 insertions(+), 32 deletions(-)
 create mode 100644 src/customizations/volto/helpers/Html/Html.cspheader.jsx
 create mode 100644 src/helpers/ContentSecurityPolicy.jsx
 create mode 100644 src/helpers/index.js
 create mode 100644 src/middleware.js
 create mode 100644 src/reducers/csp.js

diff --git a/src/customizations/volto/helpers/Html/Html.cspheader.jsx b/src/customizations/volto/helpers/Html/Html.cspheader.jsx
new file mode 100644
index 0000000..02e5f3a
--- /dev/null
+++ b/src/customizations/volto/helpers/Html/Html.cspheader.jsx
@@ -0,0 +1,216 @@
+/**
+ * Html helper.
+ * @module helpers/Html
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import serialize from 'serialize-javascript';
+import { join } from 'lodash';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+import { runtimeConfig } from '@plone/volto/runtime_config';
+import config from '@plone/volto/registry';
+import { CspHeader } from '@plone-collective/volto-csp/components/meta/CspHeader';
+
+const CRITICAL_CSS_TEMPLATE = `function alter() {
+  document.querySelectorAll("head link[rel='prefetch']").forEach(function(el) { el.rel = 'stylesheet'});
+}
+if (window.addEventListener) {
+  window.addEventListener('DOMContentLoaded', alter, false)
+} else {
+  window.onload=alter
+}`;
+
+export const loadReducers = (state = {}) => {
+  const { settings } = config;
+  return Object.assign(
+    {},
+    ...Object.keys(state).map((name) =>
+      settings.initialReducersBlacklist.includes(name)
+        ? {}
+        : { [name]: state[name] },
+    ),
+  );
+};
+
+/**
+ * Html class.
+ * Wrapper component containing HTML metadata and boilerplate tags.
+ * Used in server-side code only to wrap the string output of the
+ * rendered route component.
+ *
+ * The only thing this component doesn't (and can't) include is the
+ * HTML doctype declaration, which is added to the rendered output
+ * by the server.js file.
+ *
+ * Critical.css behaviour: when a file `public/critical.css` is present, the
+ * loading of stylesheets is changed. The styles in critical.css are inlined in
+ * the generated HTML, and the whole story needs to change completely: instead
+ * of treating stylesheets as priority for rendering, we want to defer their
+ * loading as much as possible. So we change the stylesheets to be prefetched
+ * and we switch their rel back to stylesheets at document ready event.
+ *
+ * @function Html
+ * @param {Object} props Component properties.
+ * @param {Object} props.assets Assets to be rendered.
+ * @param {Object} props.component Content to be rendered as child node.
+ * @param {Object} props.store Store object.
+ * @returns {string} Markup of the not found page.
+ */
+
+/**
+ * Html class.
+ * @class Html
+ * @extends Component
+ */
+class Html extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    extractor: PropTypes.shape({
+      getLinkElements: PropTypes.func.isRequired,
+      getScriptElements: PropTypes.func.isRequired,
+      getStyleElements: PropTypes.func.isRequired,
+    }).isRequired,
+    markup: PropTypes.string.isRequired,
+    store: PropTypes.shape({
+      getState: PropTypes.func,
+    }).isRequired,
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { extractor, markup, store, criticalCss, apiPath, publicURL } =
+      this.props;
+
+    // volto-csp is defining the inline scripts as constants so we can get a hashsum
+
+    // window.env inline script
+    const windowEnvScript = `window.env = ${serialize({
+      ...runtimeConfig,
+      // Seamless mode requirement, the client need to know where the API is located
+      // if not set in the API_PATH
+      ...(apiPath && {
+        apiPath,
+      }),
+      ...(publicURL && {
+        publicURL,
+      }),
+    })};`;
+
+    // window.__data inline script
+    const windowDataScript = `window.__data=${serialize(
+      loadReducers(store.getState()),
+    )}`;
+
+    const head = Helmet.rewind();
+    const bodyClass = join(BodyClass.rewind(), ' ');
+    return (
+      <html lang="en">
+        <head>
+          <CspHeader
+            scripts={[windowEnvScript, CRITICAL_CSS_TEMPLATE, windowDataScript]}
+            criticalCss={criticalCss}
+          />
+          <meta charSet="utf-8" />
+          {head.base.toComponent()}
+          {head.title.toComponent()}
+          {head.meta.toComponent()}
+          {head.link.toComponent()}
+          {head.script.toComponent()}
+
+          <script
+            dangerouslySetInnerHTML={{
+              __html: windowEnvScript,
+            }}
+          />
+
+          <link rel="icon" href="/favicon.ico" sizes="any" />
+          <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png"
+          />
+          <link rel="manifest" href="/site.webmanifest" />
+          <meta name="generator" content="Plone 6 - https://plone.org" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <meta name="apple-mobile-web-app-capable" content="yes" />
+          {process.env.NODE_ENV === 'production' && criticalCss && (
+            <style
+              dangerouslySetInnerHTML={{ __html: this.props.criticalCss }}
+            />
+          )}
+          {/* Add the crossorigin while in development */}
+          {extractor.getLinkElements().map((elem) =>
+            React.cloneElement(elem, {
+              crossOrigin:
+                process.env.NODE_ENV === 'production' ? undefined : 'true',
+              rel: !criticalCss
+                ? elem.props.rel
+                : elem.props.as === 'style'
+                ? 'prefetch'
+                : elem.props.rel,
+            }),
+          )}
+          {/* Styles in development are loaded with Webpack's style-loader, in production,
+              they need to be static*/}
+          {process.env.NODE_ENV === 'production' ? (
+            criticalCss ? (
+              <>
+                <script
+                  dangerouslySetInnerHTML={{
+                    __html: CRITICAL_CSS_TEMPLATE,
+                  }}
+                ></script>
+                {extractor.getStyleElements().map((elem) => (
+                  <noscript>
+                    {React.cloneElement(elem, {
+                      rel: 'stylesheet',
+                      crossOrigin:
+                        process.env.NODE_ENV === 'production'
+                          ? undefined
+                          : 'true',
+                    })}
+                  </noscript>
+                ))}
+              </>
+            ) : (
+              extractor.getStyleElements()
+            )
+          ) : undefined}
+        </head>
+        <body className={bodyClass}>
+          <div role="navigation" aria-label="Toolbar" id="toolbar" />
+          <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
+          <div id="sidebar" />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: windowDataScript,
+            }}
+            charSet="UTF-8"
+          />
+          {/* Add the crossorigin while in development */}
+          {this.props.extractScripts !== false
+            ? extractor.getScriptElements().map((elem) =>
+                React.cloneElement(elem, {
+                  crossOrigin:
+                    process.env.NODE_ENV === 'production' ? undefined : 'true',
+                }),
+              )
+            : ''}
+        </body>
+      </html>
+    );
+  }
+}
+
+export default Html;
diff --git a/src/customizations/volto/helpers/Html/Html.jsx b/src/customizations/volto/helpers/Html/Html.jsx
index 02e5f3a..cf45535 100644
--- a/src/customizations/volto/helpers/Html/Html.jsx
+++ b/src/customizations/volto/helpers/Html/Html.jsx
@@ -11,7 +11,6 @@ import { join } from 'lodash';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import config from '@plone/volto/registry';
-import { CspHeader } from '@plone-collective/volto-csp/components/meta/CspHeader';
 
 const CRITICAL_CSS_TEMPLATE = `function alter() {
   document.querySelectorAll("head link[rel='prefetch']").forEach(function(el) { el.rel = 'stylesheet'});
@@ -80,6 +79,7 @@ class Html extends Component {
     store: PropTypes.shape({
       getState: PropTypes.func,
     }).isRequired,
+    nonce: PropTypes.string,
   };
 
   /**
@@ -88,48 +88,46 @@ class Html extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { extractor, markup, store, criticalCss, apiPath, publicURL } =
-      this.props;
+    const {
+      extractor,
+      markup,
+      store,
+      criticalCss,
+      apiPath,
+      publicURL,
+      nonce: propNonce,
+    } = this.props;
 
-    // volto-csp is defining the inline scripts as constants so we can get a hashsum
-
-    // window.env inline script
-    const windowEnvScript = `window.env = ${serialize({
-      ...runtimeConfig,
-      // Seamless mode requirement, the client need to know where the API is located
-      // if not set in the API_PATH
-      ...(apiPath && {
-        apiPath,
-      }),
-      ...(publicURL && {
-        publicURL,
-      }),
-    })};`;
-
-    // window.__data inline script
-    const windowDataScript = `window.__data=${serialize(
-      loadReducers(store.getState()),
-    )}`;
+    // Get nonce from store (set by volto-csp middleware) or from props (backward compat)
+    const nonce = store.getState().csp?.nonce || propNonce;
 
     const head = Helmet.rewind();
     const bodyClass = join(BodyClass.rewind(), ' ');
     return (
       <html lang="en">
         <head>
-          <CspHeader
-            scripts={[windowEnvScript, CRITICAL_CSS_TEMPLATE, windowDataScript]}
-            criticalCss={criticalCss}
-          />
           <meta charSet="utf-8" />
           {head.base.toComponent()}
           {head.title.toComponent()}
           {head.meta.toComponent()}
           {head.link.toComponent()}
           {head.script.toComponent()}
-
+          {nonce && <script nonce={nonce} dangerouslySetInnerHTML={{ __html: `window.__NONCE__ = ${serialize(nonce)}; __webpack_nonce__ = ${serialize(nonce)};` }} />}
           <script
+            nonce={nonce}
             dangerouslySetInnerHTML={{
-              __html: windowEnvScript,
+              __html: `window.env = ${serialize({
+                ...runtimeConfig,
+                // Seamless mode requirement, the client need to know where the API is located
+                // if not set in the API_PATH
+                ...(apiPath && {
+                  apiPath,
+                }),
+                ...(publicURL && {
+                  publicURL,
+                }),
+               
+              })};`,
             }}
           />
 
@@ -141,11 +139,12 @@ class Html extends Component {
             href="/apple-touch-icon.png"
           />
           <link rel="manifest" href="/site.webmanifest" />
-          <meta name="generator" content="Plone 6 - https://plone.org" />
+          <meta name="generator" content="NSW Digital Design System for Volto" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="apple-mobile-web-app-capable" content="yes" />
           {process.env.NODE_ENV === 'production' && criticalCss && (
             <style
+              nonce={nonce}
               dangerouslySetInnerHTML={{ __html: this.props.criticalCss }}
             />
           )}
@@ -167,6 +166,7 @@ class Html extends Component {
             criticalCss ? (
               <>
                 <script
+                  nonce={nonce}
                   dangerouslySetInnerHTML={{
                     __html: CRITICAL_CSS_TEMPLATE,
                   }}
@@ -184,7 +184,7 @@ class Html extends Component {
                 ))}
               </>
             ) : (
-              extractor.getStyleElements()
+                extractor.getStyleElements()
             )
           ) : undefined}
         </head>
@@ -193,15 +193,21 @@ class Html extends Component {
           <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
           <div id="sidebar" />
           <script
+            nonce={nonce}
             dangerouslySetInnerHTML={{
-              __html: windowDataScript,
+              __html: `window.__data=${serialize(
+                loadReducers(store.getState()),
+              )};`,
             }}
             charSet="UTF-8"
           />
+          {/* Set __webpack_nonce__ for CSP - webpack will read this for dynamically injected styles */}
+          {nonce && <script nonce={nonce} dangerouslySetInnerHTML={{ __html: `window.__webpack_nonce__ = ${serialize(nonce)};` }} />}
           {/* Add the crossorigin while in development */}
           {this.props.extractScripts !== false
             ? extractor.getScriptElements().map((elem) =>
-                React.cloneElement(elem, {
+              React.cloneElement(elem, {
+                  nonce: nonce,
                   crossOrigin:
                     process.env.NODE_ENV === 'production' ? undefined : 'true',
                 }),
diff --git a/src/helpers/ContentSecurityPolicy.jsx b/src/helpers/ContentSecurityPolicy.jsx
new file mode 100644
index 0000000..fd539af
--- /dev/null
+++ b/src/helpers/ContentSecurityPolicy.jsx
@@ -0,0 +1,143 @@
+
+
+import config from '@plone/volto/registry';
+// eslint-disable-next-line no-unused-vars
+const SPECIAL_CSP_ENVS = ['DEFAULT_SRC', 'SCRIPT_SRC', 'STYLE_SRC'];
+
+const STANDARD_CSP_ENVS = [
+  'BASE_URI',
+  'BLOCK_ALL_MIXED_CONTENT',
+  'CHILD_SRC',
+  'CONNECT_SRC',
+  'FONT_SRC',
+  'FORM_ACTION',
+  'FRAME_ANCESTORS',
+  'FRAME_SRC',
+  'IMG_SRC',
+  'MANIFEST_SRC',
+  'MEDIA_SRC',
+  'OBJECT_SRC',
+  'REPORT_TO',
+  'REQUIRE_TRUSTED_TYPES_FOR',
+  'SANDBOX',
+  'SCRIPT_SRC_ATTR',
+  'SCRIPT_SRC_ELEM',
+  'STYLE_SRC_ATTR',
+  'STYLE_SRC_ELEM',
+  'TRUSTED_TYPES',
+  'UPGRADE_INSECURE_REQUESTS',
+  'WORKDER_SRC',
+];
+
+const DEPRECATED_CSP_ENVS = [
+  'PLUGIN_TYPES',
+  'PREFETCH_SRC',
+  'REFERRER',
+  'REPORT_URI',
+];
+
+const INVALID_CSP_ENVS = [
+  'FRAME_ANCESTORS',
+  'SANDBOX',
+  'REPORT_TO',
+  'REPORT_URI',
+];
+
+export function ContentSecurityPolicy(props) {
+  const { nonce, criticalCss } = props;
+
+const devSource = __DEVELOPMENT__
+  ? ` http://localhost:${parseInt(process.env.PORT || '3000') + 1} ws://localhost:${parseInt(process.env.PORT || '3000') + 1} `
+  : '';
+
+  if (!__SERVER__) {
+    return null;
+  }
+  let metaTags = []
+  let nonceValue = ''
+  if (process.env.RAZZLE_CSP_SET_NONCE) {
+      nonceValue = nonce ? `'nonce-${nonce}' ` : '';
+  }
+  
+
+  // default-src
+  if (process.env.RAZZLE_CSP_DEFAULT_SRC) {
+    metaTags.push(
+      `default-src ${nonceValue}${devSource}${process.env.RAZZLE_CSP_DEFAULT_SRC}`
+    );
+  }
+
+  // script-src
+  if (process.env.RAZZLE_CSP_SCRIPT_SRC) {
+    metaTags.push(
+      `script-src ${nonceValue}${devSource}${process.env.RAZZLE_CSP_SCRIPT_SRC}`
+    );
+  }
+
+  // style-src
+  //In production mode with critical css we need to add the hash to style-src
+  const styleVals = [];
+  if (process.env.NODE_ENV === 'production') {
+    if (criticalCss) {
+      const { createHash } = require('crypto');
+      const { settings } = config;
+      const fs = require('fs');
+      try {
+        const data = fs.readFileSync(
+          settings.serverConfig.criticalCssPath,
+          'utf8',
+        );
+        styleVals.push(
+          `'sha256-${createHash('sha256').update(data).digest('base64')}'`,
+        );
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.log('Error reading critical css file', err);
+      }
+    }
+  }
+  
+  if (process.env.RAZZLE_CSP_STYLE_SRC || styleVals.length > 0) {
+    const styleSrc = process.env.RAZZLE_CSP_STYLE_SRC ?
+      process.env.RAZZLE_CSP_STYLE_SRC : '';
+    metaTags.push(`style-src ${nonceValue}${devSource}${styleSrc}${styleVals.join(' ')}`);
+  }
+
+  // Add the standard directives unmodified.
+  STANDARD_CSP_ENVS.forEach((env) => {
+    if (process.env['RAZZLE_CSP_' + env]) {
+      const csp = env.toLowerCase().replace('_', '-');
+      metaTags.push(`${csp} ${devSource}${process.env['RAZZLE_CSP_' + env]}`);
+    }
+  });
+
+  // Adding deprectaed directives with a warning.
+  DEPRECATED_CSP_ENVS.forEach((env) => {
+    if (process.env['RAZZLE_CSP_' + env]) {
+      const csp = env.toLowerCase().replace('_', '-');
+      metaTags.push(`${csp} ${devSource}${process.env['RAZZLE_CSP_' + env]}`);
+      // Could add more detail, eg:
+      // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/${csp}
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Deprecated CSP header '${csp}' added via env RAZZLE_CSP_${env}`,
+      );
+    }
+  });
+
+  // Not adding invalid directives. Omit warning.
+  INVALID_CSP_ENVS.forEach((env) => {
+    if (process.env['RAZZLE_CSP_' + env]) {
+      const csp = env.toLowerCase().replace('_', '-');
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Invalid CSP header '${csp}' not added via env RAZZLE_CSP_${env}`,
+      );
+    }
+  });
+
+  if (metaTags.length > 0) {
+    return metaTags.join('; ')+';';
+  }
+  return '';
+}
diff --git a/src/helpers/index.js b/src/helpers/index.js
new file mode 100644
index 0000000..8a213c0
--- /dev/null
+++ b/src/helpers/index.js
@@ -0,0 +1,12 @@
+/**
+ * Add your components here.
+ * @module components
+ * @example
+ * import Footer from './Footer/Footer';
+ *
+ * export {
+ *   Footer,
+ * };
+ */
+
+export { ContentSecurityPolicy } from './ContentSecurityPolicy';
diff --git a/src/index.js b/src/index.js
index cb042f0..ce8a071 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,19 @@
+const cspMiddleware = require('./middleware');
+import cspReducer from './reducers/csp';
+
 const applyConfig = (config) => {
+  // Add CSP reducer
+  config.addonReducers = {
+    ...config.addonReducers,
+    csp: cspReducer,
+  };
+
+  // Add CSP middleware to express
+  config.settings.expressMiddleware = [
+    ...(config.settings.expressMiddleware || []),
+    cspMiddleware,
+  ];
+
   return config;
 };
 
diff --git a/src/middleware.js b/src/middleware.js
new file mode 100644
index 0000000..81ceff0
--- /dev/null
+++ b/src/middleware.js
@@ -0,0 +1,56 @@
+const crypto = require('crypto');
+
+/**
+ * Express middleware to generate CSP nonce and store in res.locals
+ *
+ * The nonce is generated early and stored for later use.
+ * The actual CSP header and store dispatch happens via setCspHeader()
+ * which must be called from the route handler after the final store is created.
+ */
+const cspMiddleware = (req, res, next) => {
+  // Generate unique nonce for this request
+  const nonce = crypto.randomBytes(16).toString('base64');
+
+  // Store nonce in res.locals so it's available to route handlers
+  res.locals.cspNonce = nonce;
+
+  next();
+};
+
+/**
+ * Function to be called after store creation to add nonce to store and set CSP header
+ * Must be called from the route handler after configureStore() creates the final store.
+ *
+ * @param {Object} req - Express request
+ * @param {Object} res - Express response
+ * @param {Object} store - Redux store instance
+ * @param {string} criticalCss - Optional critical CSS content
+ */
+const setCspHeader = (req, res, store, criticalCss = null) => {
+  const nonce = res.locals.cspNonce;
+
+  if (!nonce) {
+    console.warn('[volto-csp] No nonce found in res.locals');
+    return;
+  }
+
+  // Add nonce to Redux store
+  store.dispatch({
+    type: 'SET_CSP_NONCE',
+    nonce: nonce,
+  });
+
+  // Generate and set CSP header
+  const { ContentSecurityPolicy } = require('./helpers/ContentSecurityPolicy');
+  const cspHeader = ContentSecurityPolicy({
+    nonce: nonce,
+    criticalCss: criticalCss
+  });
+
+  if (cspHeader) {
+    res.setHeader('Content-Security-Policy', cspHeader);
+  }
+};
+
+module.exports = cspMiddleware;
+module.exports.setCspHeader = setCspHeader;
diff --git a/src/reducers/csp.js b/src/reducers/csp.js
new file mode 100644
index 0000000..96ab5dd
--- /dev/null
+++ b/src/reducers/csp.js
@@ -0,0 +1,20 @@
+/**
+ * CSP reducer
+ * Stores the nonce for server-side rendering
+ */
+
+const initialState = {
+  nonce: null,
+};
+
+export default function csp(state = initialState, action = {}) {
+  switch (action.type) {
+    case 'SET_CSP_NONCE':
+      return {
+        ...state,
+        nonce: action.nonce,
+      };
+    default:
+      return state;
+  }
+}

From 7c849194b9d792bfdba063961a8b93df96b01485 Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Tue, 14 Oct 2025 15:57:28 +0100
Subject: [PATCH 04/13] Shadow icons to remove style attributes

---
 .../volto/components/theme/Icon/Icon.css      | 41 ++++++++
 .../volto/components/theme/Icon/Icon.jsx      | 87 +++++++++++++++++
 .../components/theme/Icon/Icon.original.jsx   | 96 +++++++++++++++++++
 3 files changed, 224 insertions(+)
 create mode 100644 src/customizations/volto/components/theme/Icon/Icon.css
 create mode 100644 src/customizations/volto/components/theme/Icon/Icon.jsx
 create mode 100644 src/customizations/volto/components/theme/Icon/Icon.original.jsx

diff --git a/src/customizations/volto/components/theme/Icon/Icon.css b/src/customizations/volto/components/theme/Icon/Icon.css
new file mode 100644
index 0000000..3e5721f
--- /dev/null
+++ b/src/customizations/volto/components/theme/Icon/Icon.css
@@ -0,0 +1,41 @@
+/**
+ * Icon component styles - CSP compliant
+ * NO inline styles - uses predefined CSS classes only
+ */
+
+/* Base icon styles */
+.icon {
+  width: auto;
+  fill: currentColor;
+  display: inline-block;
+}
+
+/* Icon size classes */
+.icon-18px {
+  height: 18px;
+}
+
+.icon-24px {
+  height: 24px;
+}
+
+.icon-30px {
+  height: 30px;
+}
+
+.icon-32px {
+  height: 32px;
+}
+
+.icon-36px {
+  height: 36px;
+}
+
+/* Icon color classes */
+.icon-white {
+  fill: white;
+}
+
+.icon-error {
+  fill: #e40166;
+}
diff --git a/src/customizations/volto/components/theme/Icon/Icon.jsx b/src/customizations/volto/components/theme/Icon/Icon.jsx
new file mode 100644
index 0000000..0cbc5d7
--- /dev/null
+++ b/src/customizations/volto/components/theme/Icon/Icon.jsx
@@ -0,0 +1,87 @@
+/**
+ * Icon component - Customized for CSP compliance
+ * @module components/theme/Icon/Icon
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Icon.css';
+
+const defaultSize = '36px';
+
+/**
+ * Component to display an SVG as Icon.
+ * CSP-compliant version that uses ONLY CSS classes - NO inline styles.
+ */
+const Icon = ({
+  name,
+  size,
+  color,
+  className,
+  title,
+  onClick,
+  id,
+  ariaHidden,
+}) => {
+  // Map size to CSS class
+  const sizeClass = size ? `icon-${size}` : `icon-${defaultSize}`;
+
+  // Map color to CSS class
+  let colorClass = '';
+  if (color === 'white') {
+    colorClass = 'icon-white';
+  } else if (color === '#e40166') {
+    colorClass = 'icon-error';
+  }
+  // currentColor is the default, no class needed
+
+  // Build final className
+  const iconClassName = [
+    'icon',
+    sizeClass,
+    colorClass,
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <svg
+      xmlns={name.attributes && name.attributes.xmlns}
+      viewBox={name.attributes && name.attributes.viewBox}
+      className={iconClassName}
+      onClick={onClick}
+      id={id}
+      aria-hidden={ariaHidden}
+      dangerouslySetInnerHTML={{
+        __html: title ? `<title>${title}</title>${name.content}` : name.content,
+      }}
+    />
+  );
+};
+
+Icon.propTypes = {
+  name: PropTypes.shape({
+    xmlns: PropTypes.string,
+    viewBox: PropTypes.string,
+    content: PropTypes.string,
+  }).isRequired,
+  size: PropTypes.string,
+  color: PropTypes.string,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+  style: PropTypes.object,
+  id: PropTypes.string,
+  ariaHidden: PropTypes.bool,
+};
+
+Icon.defaultProps = {
+  size: defaultSize,
+  color: null,
+  className: null,
+  title: null,
+  onClick: null,
+  style: {},
+  id: null,
+  ariaHidden: undefined,
+};
+
+export default Icon;
diff --git a/src/customizations/volto/components/theme/Icon/Icon.original.jsx b/src/customizations/volto/components/theme/Icon/Icon.original.jsx
new file mode 100644
index 0000000..bf0fc2e
--- /dev/null
+++ b/src/customizations/volto/components/theme/Icon/Icon.original.jsx
@@ -0,0 +1,96 @@
+/**
+ * Icon component.
+ * @module components/theme/Icon/Icon
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const defaultSize = '36px';
+
+/**
+ * Component to display an SVG as Icon.
+ * @function Field
+ * @param {Object} props Component properties.
+ * @param {string} props.name Name source object.
+ * @param {string} props.size Size of the Icon (in px).
+ * @param {string} props.color Color of the Icon.
+ * @param {string} props.className className to add to the component.
+ * @param {string} props.title Title (a11y).
+ * @returns {string} Markup of the component.
+ *
+ * Use:
+ * drop icon to the icons folder ("src/icons")
+ * import svg into the file
+ * import this Icon component
+ * add icon component with name = your imported svg
+ *
+ * Reasoning:
+ * add a11y title to SVGs
+ * load svg via webpack for optimization
+ * Zero conf Inlined SVGs, as it is the best option when working with SVG
+ * see razzle.config.js
+ *
+ * for further reference see {@link https://kitconcept.com/blog/pastanaga-icon-system/ | here}
+ */
+const Icon = ({
+  name,
+  size,
+  color,
+  className,
+  title,
+  onClick,
+  style = {},
+  id,
+  ariaHidden,
+}) => (
+  <svg
+    xmlns={name.attributes && name.attributes.xmlns}
+    viewBox={name.attributes && name.attributes.viewBox}
+    style={{
+      height: size,
+      width: 'auto',
+      fill: color || 'currentColor',
+      ...style,
+    }}
+    className={className ? `icon ${className}` : 'icon'}
+    onClick={onClick}
+    id={id}
+    aria-hidden={ariaHidden}
+    dangerouslySetInnerHTML={{
+      __html: title ? `<title>${title}</title>${name.content}` : name.content,
+    }}
+  />
+);
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Icon.propTypes = {
+  name: PropTypes.shape({
+    xmlns: PropTypes.string,
+    viewBox: PropTypes.string,
+    content: PropTypes.string,
+  }).isRequired,
+  size: PropTypes.string,
+  color: PropTypes.string,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+Icon.defaultProps = {
+  size: defaultSize,
+  color: null,
+  className: null,
+  title: null,
+  onClick: null,
+};
+
+export default Icon;

From 56e51a7ec4040b48ecab207e56e7b93d90928492 Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Tue, 14 Oct 2025 15:57:39 +0100
Subject: [PATCH 05/13] Update readme

---
 README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/README.md b/README.md
index de3b2b9..1565ee9 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,29 @@ Add the following lines to your `package.json`:
 
 and run `yarn build`
 
+### Required Server Configuration
+
+This addon requires a small modification to your customized `server.jsx` file to properly inject the CSP nonce into the Redux store.
+
+After creating the Redux store in your route handler, add the following lines:
+
+```javascript
+// Create a new Redux store instance
+const store = configureStore(initialState, history, api);
+
+persistAuthToken(store, req);
+
+// Set CSP nonce and header (from volto-csp addon)
+const { setCspHeader } = require('@plone-collective/volto-csp/middleware');
+const readCriticalCss =
+  config.settings.serverConfig.readCriticalCss || defaultReadCriticalCss;
+setCspHeader(req, res, store, readCriticalCss(req));
+```
+
+**Why is this needed?**
+
+The addon uses express middleware to generate a unique nonce for each request, but the nonce must be added to the Redux store *after* the store is created in the route handler. This ensures the nonce is available to the `Html` component during server-side rendering.
+
 ## Basic Usage
 
 This addon is enabled by setting one or more of the `RAZZLE_CSP_...` headers.
@@ -52,6 +75,31 @@ Volto includes a number of inline scripts. Good practice is to not use the `unsa
 
 If `RAZZLE_CSP_DEFAULT_SRC` is set and no value for `RAZZLE_CSP_SCRIPT_SRC` is set. Then the addon will add the `script-src` directive as a duplicate of the `default-src` with the hashed inline scripts added.
 
+## Nonce Support
+
+This addon automatically generates a unique cryptographic nonce for each request and includes it in the CSP header. The nonce is available through:
+
+### Redux Store
+
+The nonce is added to the Redux store via the `SET_CSP_NONCE` action and can be accessed at `state.csp.nonce`. This allows components to access the nonce during server-side rendering.
+
+### Environment Variable
+
+To enable nonce attributes on script and style tags, set:
+
+```
+RAZZLE_CSP_SET_NONCE=true
+```
+
+When enabled, the nonce will be:
+- Automatically added to the CSP header as `'nonce-<value>'`
+- Available via `window.__webpack_nonce__` for webpack's style-loader
+- Included in script and style tags during server-side rendering
+
+### Development Mode Support
+
+In development mode, this addon includes a patched version of webpack's style-loader runtime that properly reads the nonce from `window.__webpack_nonce__`, ensuring dynamically injected `<style>` tags include the nonce attribute.
+
 ## Critical CSS
 
 Volto allows you to automatically include [critical css](https://2022.training.plone.org/effective-volto/development/criticalCSS.html) as inline styles.

From cd31b9886f0b4cb051a129dbe9ae8cedc36dff61 Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Tue, 14 Oct 2025 16:21:37 +0100
Subject: [PATCH 06/13] Don't include server-side code in browser

---
 package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9b0e760..160a174 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,9 @@
     "@plone/volto": "^16.0.0 || ^17.0.0"
   },
   "browser": {
-    "crypto": false
+    "crypto": false,
+    "fs": false,
+    "./src/middleware.js": false,
+    "./src/helpers/ContentSecurityPolicy.jsx": false
   }
 }

From b1e726e5ba2048ffefc0c693add0b5edf9431734 Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Wed, 15 Oct 2025 16:52:47 +0100
Subject: [PATCH 07/13] Don't set nonce for default-src or when 'unsafe-inline'
 or 'unsafe-hashes' is set on script-src or style-src.

---
 src/helpers/ContentSecurityPolicy.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/helpers/ContentSecurityPolicy.jsx b/src/helpers/ContentSecurityPolicy.jsx
index fd539af..a41c241 100644
--- a/src/helpers/ContentSecurityPolicy.jsx
+++ b/src/helpers/ContentSecurityPolicy.jsx
@@ -63,14 +63,17 @@ const devSource = __DEVELOPMENT__
   // default-src
   if (process.env.RAZZLE_CSP_DEFAULT_SRC) {
     metaTags.push(
-      `default-src ${nonceValue}${devSource}${process.env.RAZZLE_CSP_DEFAULT_SRC}`
+      `default-src ${devSource}${process.env.RAZZLE_CSP_DEFAULT_SRC}`
     );
   }
 
   // script-src
   if (process.env.RAZZLE_CSP_SCRIPT_SRC) {
+    const scriptWords = process.env.RAZZLE_CSP_SCRIPT_SRC.split(' ');
+    const hasUnsafeInline =
+      scriptWords.includes("'unsafe-inline'") || scriptWords.includes("'unsafe-hashes'");
     metaTags.push(
-      `script-src ${nonceValue}${devSource}${process.env.RAZZLE_CSP_SCRIPT_SRC}`
+      `script-src ${hasUnsafeInline ? '' : nonceValue}${devSource}${process.env.RAZZLE_CSP_SCRIPT_SRC}`
     );
   }
 
@@ -100,7 +103,10 @@ const devSource = __DEVELOPMENT__
   if (process.env.RAZZLE_CSP_STYLE_SRC || styleVals.length > 0) {
     const styleSrc = process.env.RAZZLE_CSP_STYLE_SRC ?
       process.env.RAZZLE_CSP_STYLE_SRC : '';
-    metaTags.push(`style-src ${nonceValue}${devSource}${styleSrc}${styleVals.join(' ')}`);
+    const styleWords = styleSrc.split(' ');
+    const hasUnsafeInline =
+      styleWords.includes("'unsafe-inline'") || styleWords.includes("'unsafe-hashes'");
+    metaTags.push(`style-src ${hasUnsafeInline ? '' : nonceValue}${devSource}${styleSrc}${styleVals.join(' ')}`);
   }
 
   // Add the standard directives unmodified.

From 9fff2aa6000b64c518f8fb73e2b74bfa95abffb6 Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Wed, 15 Oct 2025 16:58:01 +0100
Subject: [PATCH 08/13] Add support for reporting violations to an endpoint

---
 README.md                             | 10 ++++++++++
 src/helpers/ContentSecurityPolicy.jsx |  6 ++++++
 src/middleware.js                     |  7 +++++++
 3 files changed, 23 insertions(+)

diff --git a/README.md b/README.md
index 1565ee9..7b72dc6 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,16 @@ Volto includes a number of inline scripts. Good practice is to not use the `unsa
 
 If `RAZZLE_CSP_DEFAULT_SRC` is set and no value for `RAZZLE_CSP_SCRIPT_SRC` is set. Then the addon will add the `script-src` directive as a duplicate of the `default-src` with the hashed inline scripts added.
 
+## Report URI Support
+
+This addon supports sending CSP violation reports to a configured endpoint such as Sentry. See https://docs.sentry.io/platforms/javascript/security-policy-reporting/ and https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy#reporting_directives for more information.
+
+To configure a reporting endpoint set `RAZZLE_CSP_REPORT` to the endpoint you want to send reports to.
+
+The addon will automatically configure the necesary CSP headers to send error reports.
+
+Note that at the time of writing `Content-Security-Policy-Report-Only` support is not available in the addon.
+
 ## Nonce Support
 
 This addon automatically generates a unique cryptographic nonce for each request and includes it in the CSP header. The nonce is available through:
diff --git a/src/helpers/ContentSecurityPolicy.jsx b/src/helpers/ContentSecurityPolicy.jsx
index a41c241..0d7e777 100644
--- a/src/helpers/ContentSecurityPolicy.jsx
+++ b/src/helpers/ContentSecurityPolicy.jsx
@@ -142,6 +142,12 @@ const devSource = __DEVELOPMENT__
     }
   });
 
+  // Add Reporting
+  if (process.env['RAZZLE_CSP_REPORT']) {
+    metaTags.push(`report-uri ${process.env['RAZZLE_CSP_REPORT']}`);
+    metaTags.push(`report-to csp-endpoint`);
+  }
+
   if (metaTags.length > 0) {
     return metaTags.join('; ')+';';
   }
diff --git a/src/middleware.js b/src/middleware.js
index 81ceff0..a2170f1 100644
--- a/src/middleware.js
+++ b/src/middleware.js
@@ -50,6 +50,13 @@ const setCspHeader = (req, res, store, criticalCss = null) => {
   if (cspHeader) {
     res.setHeader('Content-Security-Policy', cspHeader);
   }
+
+  // If there is a report url, set the necessary headers.
+  const cspReport = process.env['RAZZLE_CSP_REPORT'];
+  if (cspReport) {
+    res.setHeader('Report-To', `{"group": "csp-endpoint", "max_age": 10886400, "endpoints":[{"url": "${cspReport}", "include_subdomains":true]}`);
+    res.setHeader('Reporting-Endpoints', `csp-endpoint="${cspReport}"`);
+  }
 };
 
 module.exports = cspMiddleware;

From 6f01d34af01b3422ecd02a2e83f8d7e4395a6ce4 Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Thu, 6 Nov 2025 11:42:34 +0000
Subject: [PATCH 09/13] Refactor icon customisation to inject style tag with
 nonce instead of pre-defined styles

---
 .../volto/components/theme/Icon/Icon.jsx      | 69 ++++++++++++-------
 1 file changed, 44 insertions(+), 25 deletions(-)

diff --git a/src/customizations/volto/components/theme/Icon/Icon.jsx b/src/customizations/volto/components/theme/Icon/Icon.jsx
index 0cbc5d7..166bdd5 100644
--- a/src/customizations/volto/components/theme/Icon/Icon.jsx
+++ b/src/customizations/volto/components/theme/Icon/Icon.jsx
@@ -4,13 +4,16 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import './Icon.css';
+import { useSelector } from 'react-redux';
 
 const defaultSize = '36px';
 
+// Counter for generating unique class names
+let iconCounter = 0;
+
 /**
  * Component to display an SVG as Icon.
- * CSP-compliant version that uses ONLY CSS classes - NO inline styles.
+ * CSP-compliant version that uses nonce-based inline styles.
  */
 const Icon = ({
   name,
@@ -19,41 +22,57 @@ const Icon = ({
   className,
   title,
   onClick,
+  style = {},
   id,
   ariaHidden,
 }) => {
-  // Map size to CSS class
-  const sizeClass = size ? `icon-${size}` : `icon-${defaultSize}`;
+  // Get nonce from Redux store
+  const nonce = useSelector((state) => state.csp?.nonce);
+
+  // Generate unique class name for this icon instance (stable across server/client)
+  const uniqueClass = React.useRef(`icon-${++iconCounter}`).current;
+
+  // Build dynamic styles
+  const dynamicStyles = {
+    height: size || defaultSize,
+    width: 'auto',
+    fill: color || 'currentColor',
+    ...style,
+  };
+
+  // Convert styles object to CSS string
+  const styleString = Object.entries(dynamicStyles)
+    .map(([key, value]) => {
+      // Convert camelCase to kebab-case
+      const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+      return `${cssKey}: ${value};`;
+    })
+    .join(' ');
 
-  // Map color to CSS class
-  let colorClass = '';
-  if (color === 'white') {
-    colorClass = 'icon-white';
-  } else if (color === '#e40166') {
-    colorClass = 'icon-error';
-  }
-  // currentColor is the default, no class needed
+  const cssRule = `.${uniqueClass} { ${styleString} }`;
 
   // Build final className
   const iconClassName = [
     'icon',
-    sizeClass,
-    colorClass,
+    uniqueClass,
     className,
   ].filter(Boolean).join(' ');
 
   return (
-    <svg
-      xmlns={name.attributes && name.attributes.xmlns}
-      viewBox={name.attributes && name.attributes.viewBox}
-      className={iconClassName}
-      onClick={onClick}
-      id={id}
-      aria-hidden={ariaHidden}
-      dangerouslySetInnerHTML={{
-        __html: title ? `<title>${title}</title>${name.content}` : name.content,
-      }}
-    />
+    <>
+      <style nonce={nonce} dangerouslySetInnerHTML={{ __html: cssRule }} />
+      <svg
+        xmlns={name.attributes && name.attributes.xmlns}
+        viewBox={name.attributes && name.attributes.viewBox}
+        className={iconClassName}
+        onClick={onClick}
+        id={id}
+        aria-hidden={ariaHidden}
+        dangerouslySetInnerHTML={{
+          __html: title ? `<title>${title}</title>${name.content}` : name.content,
+        }}
+      />
+    </>
   );
 };
 

From 0ea554f4edf2f22db4854a8758eb8c30a35a1d1d Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Thu, 6 Nov 2025 11:43:23 +0000
Subject: [PATCH 10/13] Remove now unneeded stylesheet

---
 .../volto/components/theme/Icon/Icon.css      | 41 -------------------
 1 file changed, 41 deletions(-)
 delete mode 100644 src/customizations/volto/components/theme/Icon/Icon.css

diff --git a/src/customizations/volto/components/theme/Icon/Icon.css b/src/customizations/volto/components/theme/Icon/Icon.css
deleted file mode 100644
index 3e5721f..0000000
--- a/src/customizations/volto/components/theme/Icon/Icon.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Icon component styles - CSP compliant
- * NO inline styles - uses predefined CSS classes only
- */
-
-/* Base icon styles */
-.icon {
-  width: auto;
-  fill: currentColor;
-  display: inline-block;
-}
-
-/* Icon size classes */
-.icon-18px {
-  height: 18px;
-}
-
-.icon-24px {
-  height: 24px;
-}
-
-.icon-30px {
-  height: 30px;
-}
-
-.icon-32px {
-  height: 32px;
-}
-
-.icon-36px {
-  height: 36px;
-}
-
-/* Icon color classes */
-.icon-white {
-  fill: white;
-}
-
-.icon-error {
-  fill: #e40166;
-}

From 9c3340f46b6dcbe59d27abc3929ed512304e1b07 Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Thu, 20 Nov 2025 15:11:39 +0000
Subject: [PATCH 11/13] Reorder package.json

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 160a174..06b2843 100644
--- a/package.json
+++ b/package.json
@@ -45,9 +45,9 @@
     "@plone/volto": "^16.0.0 || ^17.0.0"
   },
   "browser": {
-    "crypto": false,
-    "fs": false,
+    "./src/helpers/ContentSecurityPolicy.jsx": false,
     "./src/middleware.js": false,
-    "./src/helpers/ContentSecurityPolicy.jsx": false
+    "crypto": false,
+    "fs": false
   }
 }

From 49617c04243ae55758558db3de588caf826931bd Mon Sep 17 00:00:00 2001
From: Jon Pentland <jon.pentland@pretagov.co.uk>
Date: Fri, 27 Mar 2026 17:09:17 +0000
Subject: [PATCH 12/13] Add report only option and nel headers

---
 src/middleware.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/middleware.js b/src/middleware.js
index a2170f1..ec9827b 100644
--- a/src/middleware.js
+++ b/src/middleware.js
@@ -48,7 +48,14 @@ const setCspHeader = (req, res, store, criticalCss = null) => {
   });
 
   if (cspHeader) {
-    res.setHeader('Content-Security-Policy', cspHeader);
+    const headerName = process.env.RAZZLE_CSP_REPORT_ONLY
+      ? 'Content-Security-Policy-Report-Only'
+      : 'Content-Security-Policy';
+    res.setHeader(headerName, cspHeader);
+  }
+
+  if (process.env.RAZZLE_CSP_REPORT_ONLY && !process.env['RAZZLE_CSP_REPORT']) {
+    console.warn('[volto-csp] RAZZLE_CSP_REPORT_ONLY is set but RAZZLE_CSP_REPORT is not. Violations will be allowed but not reported.');
   }
 
   // If there is a report url, set the necessary headers.
@@ -56,6 +63,16 @@ const setCspHeader = (req, res, store, criticalCss = null) => {
   if (cspReport) {
     res.setHeader('Report-To', `{"group": "csp-endpoint", "max_age": 10886400, "endpoints":[{"url": "${cspReport}", "include_subdomains":true]}`);
     res.setHeader('Reporting-Endpoints', `csp-endpoint="${cspReport}"`);
+
+    // Set NEL header if either failure or success fraction env vars are set.
+    // NEL uses the same reporting group as CSP reporting.
+    if (process.env.RAZZLE_CSP_NEL_FAILURE || process.env.RAZZLE_CSP_NEL_SUCCESS) {
+      const failureFraction = process.env.RAZZLE_CSP_NEL_FAILURE || '1.0';
+      const successFraction = process.env.RAZZLE_CSP_NEL_SUCCESS || '0.0';
+      res.setHeader('NEL', `{"report_to": "csp-endpoint", "max_age": 10886400, "include_subdomains": true, "failure_fraction": ${failureFraction}, "success_fraction": ${successFraction}}`);
+    }
+  } else if (process.env.RAZZLE_CSP_NEL_FAILURE || process.env.RAZZLE_CSP_NEL_SUCCESS) {
+    console.warn('[volto-csp] RAZZLE_CSP_NEL_FAILURE/SUCCESS is set but RAZZLE_CSP_REPORT is not. NEL requires a reporting endpoint.');
   }
 };
 

From 723f4de300ae2710bd45408acab4e2f566e09d8e Mon Sep 17 00:00:00 2001
From: "me@jeffersonbledsoe.com" <me@jeffersonbledsoe.com>
Date: Wed, 24 Jun 2026 16:39:29 +0100
Subject: [PATCH 13/13] Ensure CSP middleware is added first so future
 middleware requests have the CSP information ready

---
 src/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index ce8a071..4cd8440 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,10 +8,13 @@ const applyConfig = (config) => {
     csp: cspReducer,
   };
 
-  // Add CSP middleware to express
+  // Add CSP middleware to the front of the express chain so the nonce is set
+  // in res.locals before any other middleware can short-circuit the request
+  // (e.g. the @@download/@@images handlers erroring via next(err)), ensuring
+  // error responses still carry a CSP header.
   config.settings.expressMiddleware = [
-    ...(config.settings.expressMiddleware || []),
     cspMiddleware,
+    ...(config.settings.expressMiddleware || []),
   ];
 
   return config;