npm - @eeacms/volto-clms-theme - Versions diffs - 1.1.290 → 1.1.292 - Mend

@eeacms/volto-clms-theme 1.1.290 → 1.1.292

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md +7 -0
package/package.json +1 -1
package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/RightModalFacets.jsx +7 -5
package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/icons/filter-symbol.svg +5 -0
package/src/customizations/volto/helpers/Html/Html.jsx +13 -1
package/src/customizations/volto/helpers/Html/Readme.md +1 -0
package/src/customizations/volto/server.jsx +375 -0
package/src/index.js +14 -0
package/theme/site/extras/menu.less +0 -7

package/CHANGELOG.md CHANGED Viewed

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+### [1.1.292](https://github.com/eea/volto-clms-theme/compare/1.1.291...1.1.292) - 2 June 2026
+#### :hammer_and_wrench: Others
+- Refs #289838 - Implement CSP support in Volto's webpack implementation. [GhitaB - [`6a342dd`](https://github.com/eea/volto-clms-theme/commit/6a342dde51548f960e87a19fb6c44b0fccc64a1a)]
+### [1.1.291](https://github.com/eea/volto-clms-theme/compare/1.1.290...1.1.291) - 22 May 2026
 ### [1.1.290](https://github.com/eea/volto-clms-theme/compare/1.1.289...1.1.290) - 21 May 2026
 #### :rocket: New Features

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.290",
+  "version": "1.1.292",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/RightModalFacets.jsx CHANGED Viewed

@@ -10,6 +10,7 @@ import FilterList from './FilterList';
 import CclFiltersModal from '@eeacms/volto-clms-theme/components/CclFiltersModal/CclFiltersModal';
 import { Icon } from '@plone/volto/components';
 import React from 'react';
+import categoryFilterSVG from './icons/filter-symbol.svg';
 import filterSVG from '@plone/volto/icons/filter.svg';
 import { flushSync } from 'react-dom';
 import { usesGlobalSearchDesign } from './searchDesign';
@@ -30,7 +31,9 @@ const FacetWrapper = ({ children }) => (
 const getSortLabel = (value, querystring) => {
   const title = querystring?.sortable_indexes?.[value]?.title || value;
   if (
-    ['effective', 'publication_date', 'modified'].includes(value) ||
+    ['effective', 'publication_date', 'modified', 'resourceEffective'].includes(
+      value,
+    ) ||
     /publication date/i.test(title)
   ) {
     return 'Time';
@@ -165,16 +168,15 @@ const RightModalFacets = (props) => {
               >
                 <Icon
                   className="global-search-categories-filter-icon"
-                  name={filterSVG}
-                  size="10px"
-                  color="#fff"
+                  name={categoryFilterSVG}
+                  size="7px"
                 />
               </span>
             ) : (
               <Icon className="ui" name={filterSVG} size={'20'} />
             )}
             <span className="filters-title-bold">
-              {hasGlobalSearchDesign ? 'Show Categories' : data.facetsTitle}
+              {hasGlobalSearchDesign ? 'Show Filters' : data.facetsTitle}
             </span>
           </div>
         </div>

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/icons/filter-symbol.svg ADDED Viewed

@@ -0,0 +1,5 @@
+<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1 1H9V2H1V1Z" fill="white" style="fill:white;fill-opacity:1;" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3 5H7V6H3V5Z" fill="white" style="fill:white;fill-opacity:1;" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 3V4H8V3H2Z" fill="white" style="fill:white;fill-opacity:1;" />
+</svg>

package/src/customizations/volto/helpers/Html/Html.jsx CHANGED Viewed

@@ -79,6 +79,7 @@ class Html extends Component {
     store: PropTypes.shape({
       getState: PropTypes.func,
     }).isRequired,
+    nonce: PropTypes.string,
   };
   /**
@@ -94,10 +95,12 @@ class Html extends Component {
       criticalCss,
       apiPath,
       publicURL,
+      nonce,
     } = this.props;
     const head = Helmet.rewind();
     const bodyClass = join(BodyClass.rewind(), ' ');
     const htmlAttributes = head.htmlAttributes.toComponent();
+    const helmetScripts = head.script.toComponent();
     return (
       <html lang={htmlAttributes.lang}>
@@ -107,9 +110,14 @@ class Html extends Component {
           {head.title.toComponent()}
           {head.meta.toComponent()}
           {head.link.toComponent()}
-          {head.script.toComponent()}
+          {React.Children.map(helmetScripts, (elem) =>
+            React.isValidElement(elem)
+              ? React.cloneElement(elem, { nonce })
+              : elem,
+          )}
           <script
+            nonce={nonce}
             dangerouslySetInnerHTML={{
               __html: `window.env = ${serialize({
                 ...runtimeConfig,
@@ -138,6 +146,7 @@ class Html extends Component {
           <meta name="mobile-web-app-capable" content="yes" />
           {process.env.NODE_ENV === 'production' && criticalCss && (
             <style
+              nonce={nonce}
               dangerouslySetInnerHTML={{ __html: this.props.criticalCss }}
             />
           )}
@@ -159,6 +168,7 @@ class Html extends Component {
             criticalCss ? (
               <>
                 <script
+                  nonce={nonce}
                   dangerouslySetInnerHTML={{
                     __html: CRITICAL_CSS_TEMPLATE,
                   }}
@@ -185,6 +195,7 @@ class Html extends Component {
           <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
           <div role="complementary" aria-label="Sidebar" id="sidebar" />
           <script
+            nonce={nonce}
             dangerouslySetInnerHTML={{
               __html: `window.__data=${serialize(
                 loadReducers(store.getState()),
@@ -196,6 +207,7 @@ class Html extends Component {
           {this.props.extractScripts !== false
             ? extractor.getScriptElements().map((elem) =>
                 React.cloneElement(elem, {
+                  nonce,
                   crossOrigin:
                     process.env.NODE_ENV === 'production' ? undefined : 'true',
                 }),

package/src/customizations/volto/helpers/Html/Readme.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Customized for CSP nonce support.

package/src/customizations/volto/server.jsx ADDED Viewed

@@ -0,0 +1,375 @@
+/* eslint no-console: 0 */
+import '@plone/volto/config'; // This is the bootstrap for the global config - server side
+import { existsSync, lstatSync, readFileSync } from 'fs';
+import React from 'react';
+import { StaticRouter } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import express from 'express';
+import { renderToString } from 'react-dom/server';
+import { createMemoryHistory } from 'history';
+import { parse as parseUrl } from 'url';
+import { keys } from 'lodash';
+import locale from 'locale';
+import { detect } from 'detect-browser';
+import path from 'path';
+import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
+import { resetServerContext } from 'react-beautiful-dnd';
+import { CookiesProvider } from 'react-cookie';
+import cookiesMiddleware from 'universal-cookie-express';
+import debug from 'debug';
+import crypto from 'crypto';
+import routes from '@root/routes';
+import config from '@plone/volto/registry';
+import {
+  flattenToAppURL,
+  Html,
+  Api,
+  persistAuthToken,
+  toBackendLang,
+  toGettextLang,
+  toReactIntlLang,
+} from '@plone/volto/helpers';
+import { changeLanguage } from '@plone/volto/actions';
+import userSession from '@plone/volto/reducers/userSession/userSession';
+import ErrorPage from '@plone/volto/error';
+import languages from '@plone/volto/constants/Languages';
+import configureStore from '@plone/volto/store';
+import {
+  ReduxAsyncConnect,
+  loadOnServer,
+} from '@plone/volto/helpers/AsyncConnect';
+let locales = {};
+const cspConfig = process.env.CSP_HEADER || config.settings.serverConfig?.csp;
+if (config.settings) {
+  config.settings.supportedLanguages.forEach((lang) => {
+    const langFileName = toGettextLang(lang);
+    import('@root/../locales/' + langFileName + '.json').then((locale) => {
+      locales = { ...locales, [toReactIntlLang(lang)]: locale.default };
+    });
+  });
+}
+function reactIntlErrorHandler(error) {
+  debug('i18n')(error);
+}
+const supported = new locale.Locales(keys(languages), 'en');
+const server = express()
+  .disable('x-powered-by')
+  .head('/*', function (req, res) {
+    // Support for HEAD requests. Required by start-test utility in CI.
+    res.send('');
+  })
+  .use(cookiesMiddleware());
+const middleware = (config.settings.expressMiddleware || []).filter((m) => m);
+server.all('*', setupServer);
+if (middleware.length) server.use('/', middleware);
+// eslint-disable-next-line no-unused-vars
+server.use(function (err, req, res, next) {
+  if (err) {
+    const { store } = res.locals;
+    const errorPage = (
+      <Provider store={store} onError={reactIntlErrorHandler}>
+        <StaticRouter context={{}} location={req.url}>
+          <ErrorPage message={err.message} />
+        </StaticRouter>
+      </Provider>
+    );
+    res.set({
+      'Cache-Control': 'public, max-age=60, no-transform',
+    });
+    /* Displays error in console
+     * TODO:
+     * - get ignored codes from Plone error_log
+     */
+    const ignoredErrors = [301, 302, 401, 404];
+    if (!ignoredErrors.includes(err.status)) console.error(err);
+    res
+      .status(err.status || 500) // If error happens in Volto code itself error status is undefined
+      .send(`<!doctype html> ${renderToString(errorPage)}`);
+  }
+});
+function buildCSPHeader(opts, nonce) {
+  const nonceValue = `'nonce-${nonce}'`;
+  if (typeof opts === 'string') {
+    return opts.replaceAll('{nonce}', nonceValue);
+  }
+  return Object.keys(opts)
+    .sort()
+    .reduce((acc, key) => {
+      const value = Array.isArray(opts[key]) ? opts[key].join(' ') : opts[key];
+      return [...acc, `${key} ${value.replaceAll('{nonce}', nonceValue)}`];
+    }, [])
+    .join('; ');
+}
+function setupServer(req, res, next) {
+  if (cspConfig) {
+    res.locals.nonce = crypto.randomBytes(16).toString('base64');
+  }
+  const api = new Api(req);
+  const lang = toReactIntlLang(
+    new locale.Locales(
+      req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'],
+    )
+      .best(supported)
+      .toString(),
+  );
+  // Minimum initial state for the fake Redux store instance
+  const initialState = {
+    intl: {
+      defaultLocale: 'en',
+      locale: lang,
+      messages: locales[lang],
+    },
+  };
+  const history = createMemoryHistory({
+    initialEntries: [req.url],
+  });
+  // Create a fake Redux store instance for the `errorHandler` to render
+  // and for being used by the rest of the middlewares, if required
+  const store = configureStore(initialState, history, api);
+  function errorHandler(error) {
+    const errorPage = (
+      <Provider store={store} onError={reactIntlErrorHandler}>
+        <StaticRouter context={{}} location={req.url}>
+          <ErrorPage message={error.message} />
+        </StaticRouter>
+      </Provider>
+    );
+    res.set({
+      'Cache-Control': 'public, max-age=60, no-transform',
+    });
+    /* Displays error in console
+     * TODO:
+     * - get ignored codes from Plone error_log
+     */
+    const ignoredErrors = [301, 302, 401, 404];
+    if (!ignoredErrors.includes(error.status)) console.error(error);
+    res
+      .status(error.status || 500) // If error happens in Volto code itself error status is undefined
+      .send(`<!doctype html> ${renderToString(errorPage)}`);
+  }
+  if (!process.env.RAZZLE_API_PATH && req.headers.host) {
+    res.locals.detectedHost = `${
+      req.headers['x-forwarded-proto'] || req.protocol
+    }://${req.headers.host}`;
+    config.settings.apiPath = res.locals.detectedHost;
+    config.settings.publicURL = res.locals.detectedHost;
+  }
+  res.locals = {
+    ...res.locals,
+    store,
+    api,
+    errorHandler,
+  };
+  next();
+}
+server.get('/*', (req, res) => {
+  const { errorHandler, nonce } = res.locals;
+  if (cspConfig) {
+    res.setHeader('Content-Security-Policy', buildCSPHeader(cspConfig, nonce));
+  }
+  const api = new Api(req);
+  const browserdetect = detect(req.headers['user-agent']);
+  const lang = toReactIntlLang(
+    new locale.Locales(
+      req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'],
+    )
+      .best(supported)
+      .toString(),
+  );
+  const authToken = req.universalCookies.get('auth_token');
+  const initialState = {
+    userSession: { ...userSession(), token: authToken },
+    form: req.body,
+    intl: {
+      defaultLocale: 'en',
+      locale: lang,
+      messages: locales[lang],
+    },
+    browserdetect,
+  };
+  const history = createMemoryHistory({
+    initialEntries: [req.url],
+  });
+  // Create a new Redux store instance
+  const store = configureStore(initialState, history, api);
+  persistAuthToken(store, req);
+  // @loadable/server extractor
+  const buildDir = process.env.BUILD_DIR || 'build';
+  const extractor = new ChunkExtractor({
+    statsFile: path.resolve(path.join(buildDir, 'loadable-stats.json')),
+    entrypoints: ['client'],
+  });
+  const url = req.originalUrl || req.url;
+  const location = parseUrl(url);
+  loadOnServer({ store, location, routes, api })
+    .then(() => {
+      const initialLang =
+        req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'];
+      // The content info is in the store at this point thanks to the asynconnect
+      // features, then we can force the current language info into the store when
+      // coming from an SSR request
+      // TODO: there is a bug here with content that, for any reason, doesn't
+      // present the language token field, for some reason. In this case, we
+      // should follow the cookie rather then switching the language
+      const contentLang = store.getState().content.get?.error
+        ? initialLang
+        : store.getState().content.data?.language?.token ||
+          config.settings.defaultLanguage;
+      if (toBackendLang(initialLang) !== contentLang && url !== '/') {
+        const newLang = toReactIntlLang(
+          new locale.Locales(contentLang).best(supported).toString(),
+        );
+        store.dispatch(changeLanguage(newLang, locales[newLang], req));
+      }
+      const context = {};
+      resetServerContext();
+      const markup = renderToString(
+        <ChunkExtractorManager extractor={extractor}>
+          <CookiesProvider cookies={req.universalCookies}>
+            <Provider store={store} onError={reactIntlErrorHandler}>
+              <StaticRouter context={context} location={req.url}>
+                <ReduxAsyncConnect routes={routes} helpers={api} />
+              </StaticRouter>
+            </Provider>
+          </CookiesProvider>
+        </ChunkExtractorManager>,
+      );
+      const readCriticalCss =
+        config.settings.serverConfig.readCriticalCss || defaultReadCriticalCss;
+      // If we are showing an "old browser" warning,
+      // make sure it doesn't get cached in a shared cache
+      const browserdetect = store.getState().browserdetect;
+      if (config.settings.notSupportedBrowsers.includes(browserdetect?.name)) {
+        res.set({
+          'Cache-Control': 'private',
+        });
+      }
+      if (context.url) {
+        res.redirect(flattenToAppURL(context.url));
+      } else if (context.error_code) {
+        res.set({
+          'Cache-Control': 'no-cache',
+        });
+        res.status(context.error_code).send(
+          `<!doctype html>
+              ${renderToString(
+                <Html
+                  extractor={extractor}
+                  nonce={nonce}
+                  markup={markup}
+                  store={store}
+                  extractScripts={
+                    config.settings.serverConfig.extractScripts?.errorPages ||
+                    process.env.NODE_ENV !== 'production'
+                  }
+                  criticalCss={readCriticalCss(req)}
+                  apiPath={res.locals.detectedHost || config.settings.apiPath}
+                  publicURL={
+                    res.locals.detectedHost || config.settings.publicURL
+                  }
+                />,
+              )}
+            `,
+        );
+      } else {
+        res.status(200).send(
+          `<!doctype html>
+              ${renderToString(
+                <Html
+                  extractor={extractor}
+                  nonce={nonce}
+                  markup={markup}
+                  store={store}
+                  criticalCss={readCriticalCss(req)}
+                  apiPath={res.locals.detectedHost || config.settings.apiPath}
+                  publicURL={
+                    res.locals.detectedHost || config.settings.publicURL
+                  }
+                />,
+              )}
+            `,
+        );
+      }
+    }, errorHandler)
+    .catch(errorHandler);
+});
+export const defaultReadCriticalCss = () => {
+  const { criticalCssPath } = config.settings.serverConfig;
+  const e = existsSync(criticalCssPath);
+  if (!e) return;
+  const f = lstatSync(criticalCssPath);
+  if (!f.isFile()) return;
+  return readFileSync(criticalCssPath, { encoding: 'utf-8' });
+};
+// Exposed for the console bootstrap info messages
+server.apiPath = config.settings.apiPath;
+server.devProxyToApiPath = config.settings.devProxyToApiPath;
+server.proxyRewriteTarget = config.settings.proxyRewriteTarget;
+server.publicURL = config.settings.publicURL;
+export { buildCSPHeader };
+export default server;

package/src/index.js CHANGED Viewed

@@ -68,6 +68,20 @@ import ImageView from '@plone/volto/components/theme/View/ImageView';
 import userSessionResetMiddleware from './store/userSessionResetMiddleware';
 const applyConfig = (config) => {
+  if (__SERVER__) {
+    const devsource = __DEVELOPMENT__
+      ? ` http://localhost:${parseInt(process.env.PORT || '3000') + 1}`
+      : '';
+    config.settings.serverConfig = {
+      ...config.settings.serverConfig,
+      csp: {
+        'object-src': "'none'",
+        'script-src': `'self' {nonce}${devsource}`,
+      },
+    };
+  }
   config.views = {
     ...config.views,
     contentTypesViews: {

package/theme/site/extras/menu.less CHANGED Viewed

@@ -491,13 +491,6 @@ body.global-search-page
   color: @clmsGreen;
 }
-body.global-search-page
-  .block.search.global-search-block
-  .global-search-sorting
-  button:first-of-type {
-  color: #808080;
-}
 body.global-search-page
   .block.search.global-search-block
   .global-search-sort-direction {