@eeacms/volto-cca-policy 0.3.82 → 0.3.83

package/CHANGELOG.md

@@ -4,7 +4,7 @@ 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).
 
-### [0.3.82](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.1...0.3.82) - 5 September 2025
+### [0.3.83](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.1...0.3.83) - 10 September 2025
 
 #### :rocket: Dependency updates
 
@@ -25,6 +25,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add customization for server.jsx [Tiberiu Ichim - [`c625d39`](https://github.com/eea/volto-cca-policy/commit/c625d397493ca9c1bcbd4083dd0b93969d89ef97)]
+- Remove customizations for server, to benefit from CSP headers implemented in eea-website-theme [Tiberiu Ichim - [`0c9ce15`](https://github.com/eea/volto-cca-policy/commit/0c9ce154c68a589ad6a0c553b36ea6e4f155ed09)]
 - Refs #290787 - sum of countries [Tripon Eugen - [`f1033cf`](https://github.com/eea/volto-cca-policy/commit/f1033cf0beca2d7cace3d1ee2bc93d03cbf7b3c8)]
 - Refs #290787 - contry map update flat/round earth and diffrent countries list [Tripon Eugen - [`6009e9f`](https://github.com/eea/volto-cca-policy/commit/6009e9f2ef28aeacd8f27d2735e0270822a13a5e)]
 ### [1.0.0-alpha.1](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.0...1.0.0-alpha.1) - 28 July 2025
@@ -108,7 +110,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add some loadable for components [Tiberiu Ichim - [`1793962`](https://github.com/eea/volto-cca-policy/commit/179396211c66a6a2465b2d1b6c0f2afc40fc7189)]
 - Refs #284961 - test [Tripon Eugen - [`c989f1f`](https://github.com/eea/volto-cca-policy/commit/c989f1f8638c0c5233c5c49f8673c9a2cdc7937e)]
 - Refs #284961 - add translations [Tripon Eugen - [`04ee988`](https://github.com/eea/volto-cca-policy/commit/04ee988c086d393b9b37ce1ea8d24f5e84f266aa)]
-### [1.0.0-alpha.0](https://github.com/eea/volto-cca-policy/compare/0.3.81...1.0.0-alpha.0) - 15 July 2025
+### [1.0.0-alpha.0](https://github.com/eea/volto-cca-policy/compare/0.3.82...1.0.0-alpha.0) - 15 July 2025
+
+### [0.3.82](https://github.com/eea/volto-cca-policy/compare/0.3.81...0.3.82) - 5 September 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-searchlib@2.1.10 [EEA Jenkins - [`ec1bf82`](https://github.com/eea/volto-cca-policy/commit/ec1bf82df7258b9df4e2496b98aa7a8eccdbeb17)]
 
 ### [0.3.81](https://github.com/eea/volto-cca-policy/compare/0.3.80...0.3.81) - 26 August 2025
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.82",
+  "version": "0.3.83",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/volto/README.md

@@ -0,0 +1,2 @@
+copied from volto-eea-website-theme sha 5fa9b49d4619f893baa0330ee45f5b2e90eeb72c
+server.jsx is customized to not crash when it doesn't find .po translation files.

package/src/customizations/volto/server.jsx

@@ -1,6 +1,3 @@
-/*  Original: https://github.com/plone/volto/blob/16.x.x/src/server.jsx */
-/*  Line: 59 - Fix crash when a supported language it's not in volto/locales folder */
-
 /* eslint no-console: 0 */
 import '@plone/volto/config'; // This is the bootstrap for the global config - server side
 import { existsSync, lstatSync, readFileSync } from 'fs';
@@ -20,7 +17,7 @@ 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 crypto from 'crypto';
 
 import routes from '@plone/volto/routes';
 import config from '@plone/volto/registry';
@@ -49,7 +46,18 @@ import {
 } from '@plone/volto/helpers/AsyncConnect';
 
 let locales = {};
+const isCSP = 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 };
+//     });
+//   });
+// }
 
+// customized
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
     const langFileName = toGettextLang(lang);
@@ -64,18 +72,7 @@ if (config.settings) {
     // end customization
   });
 }
-
-// function buildCSPHeader(opts, nonce) {
-//   return Object.keys(opts)
-//     .sort()
-//     .reduce((acc, key) => {
-//       return [
-//         ...acc,
-//         `${key} ${opts[key].replaceAll('{nonce}', `'nonce-${nonce}'`)}`,
-//       ];
-//     }, [])
-//     .join('; ');
-// }
+//end customized
 
 function reactIntlErrorHandler(error) {
   debug('i18n')(error);
@@ -84,8 +81,8 @@ function reactIntlErrorHandler(error) {
 const supported = new locale.Locales(keys(languages), 'en');
 
 const server = express()
-  .set('etag', false)
   .disable('x-powered-by')
+  .set('etag', false)
   .head('/*', function (req, res) {
     // Support for HEAD requests. Required by start-test utility in CI.
     res.send('');
@@ -125,7 +122,28 @@ server.use(function (err, req, res, next) {
   }
 });
 
+function buildCSPHeader(opts, nonce) {
+  if (typeof opts === 'string') {
+    //CSP_HEADER
+    return opts.replaceAll('{nonce}', `'nonce-${nonce}'`);
+  }
+  return Object.keys(opts)
+    .sort()
+    .reduce((acc, key) => {
+      return [
+        ...acc,
+        `${key} ${opts[key].replaceAll('{nonce}', `'nonce-${nonce}'`)}`,
+      ];
+    }, [])
+    .join('; ');
+}
+
 function setupServer(req, res, next) {
+  if (isCSP) {
+    const nonce = crypto.randomBytes(16).toString('base64');
+    res.locals.nonce = nonce;
+  }
+
   const api = new Api(req);
 
   const lang = toReactIntlLang(
@@ -199,7 +217,11 @@ function setupServer(req, res, next) {
 }
 
 server.get('/*', (req, res) => {
-  const { errorHandler } = res.locals;
+  const { errorHandler, nonce } = res.locals;
+
+  if (isCSP) {
+    res.setHeader('Content-Security-Policy', buildCSPHeader(isCSP, nonce));
+  }
 
   const api = new Api(req);
 
@@ -265,7 +287,7 @@ server.get('/*', (req, res) => {
         : store.getState().content.data?.language?.token ||
           config.settings.defaultLanguage;
 
-      if (toBackendLang(initialLang) !== contentLang) {
+      if (toBackendLang(initialLang) !== contentLang && url !== '/') {
         const newLang = toReactIntlLang(
           new locale.Locales(contentLang).best(supported).toString(),
         );
@@ -310,6 +332,7 @@ server.get('/*', (req, res) => {
               ${renderToString(
                 <Html
                   extractor={extractor}
+                  nonce={nonce}
                   markup={markup}
                   store={store}
                   extractScripts={
@@ -331,6 +354,7 @@ server.get('/*', (req, res) => {
               ${renderToString(
                 <Html
                   extractor={extractor}
+                  nonce={nonce}
                   markup={markup}
                   store={store}
                   criticalCss={readCriticalCss(req)}

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

@@ -1,213 +0,0 @@
-/**
- * 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';
-
-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,
-    nonce: PropTypes.string,
-  };
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { extractor, markup, store, criticalCss, apiPath, publicURL, nonce } =
-      this.props;
-    const head = Helmet.rewind();
-    const bodyClass = join(BodyClass.rewind(), ' ');
-    const htmlAttributes = head.htmlAttributes.toComponent();
-
-    return (
-      <html lang={htmlAttributes.lang}>
-        <head>
-          <meta charSet="utf-8" />
-          {head.base.toComponent()}
-          {head.title.toComponent()}
-          {head.meta.toComponent()}
-          {head.link.toComponent()}
-          {head.script.toComponent()}
-
-          {React.createElement('script', {
-            nonce: nonce,
-            dangerouslySetInnerHTML: {
-              __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,
-                }),
-              })};`,
-            },
-          })}
-          <link
-            rel="sitemap"
-            type="application/xml"
-            title="Sitemap"
-            href="/sitemap-index.xml"
-          ></link>
-          <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 role="complementary" aria-label="Sidebar" id="sidebar" />
-          {React.createElement('script', {
-            nonce: nonce,
-            dangerouslySetInnerHTML: {
-              __html: `window.__data=${serialize(
-                loadReducers(store.getState()),
-              )};`,
-            },
-            charSet: 'UTF-8',
-          })}
-          {/* Add the crossorigin while in development */}
-          {this.props.extractScripts !== false
-            ? extractor.getScriptElements().map((elem) =>
-                React.cloneElement(elem, {
-                  nonce: nonce,
-                  crossOrigin:
-                    process.env.NODE_ENV === 'production' ? undefined : 'true',
-                }),
-              )
-            : ''}
-        </body>
-      </html>
-    );
-  }
-}
-
-export default Html;