CONSOLE-5094: Add pesudo CSP violation detection to Cypress

frontend/packages/console-app/src/hooks/useCSPViolationDetector.tsx

@@ -68,6 +68,15 @@ export const newPluginCSPViolationEvent = (
   pluginName: pluginName || '',
 });
 
+/**
+ * Adds a {@link SecurityPolicyViolationEvent} to {@link window.windowError}
+ * so that Cypress tests will fail
+ */
+const reportCSPViolationToCypress = (event: SecurityPolicyViolationEvent) => {
+  const message = `CSP Violation: effectiveDirective=${event.effectiveDirective}, blockedURI=${event.blockedURI}, sourceFile=${event.sourceFile}`;
+  window.windowError += `;${message}`;
+};
+
 export const useCSPViolationDetector = () => {
   const { t } = useTranslation();
   const toastContext = useToast();
@@ -84,10 +93,12 @@ export const useCSPViolationDetector = () => {
   );
 
   const reportViolation = useCallback(
-    (event) => {
+    (event: SecurityPolicyViolationEvent) => {
       // eslint-disable-next-line no-console
       console.warn('Content Security Policy violation detected', event);
 
+      reportCSPViolationToCypress(event);
+
       // Attempt to infer Console plugin name from SecurityPolicyViolation event
       const pluginName =
         getPluginNameFromResourceURL(event.blockedURI) ||

frontend/packages/console-dynamic-plugin-sdk/src/runtime/plugin-init.ts

@@ -108,7 +108,7 @@ export const initConsolePlugins = _.once((pluginStore: PluginStore) => {
         loadAndEnablePlugin(pluginName, pluginStore, (errorMessage, errorCause) => {
           // eslint-disable-next-line no-console
           console.error(..._.compact([errorMessage, errorCause]));
-          window.windowError = `${window.windowError ?? ''};${errorMessage}: ${String(errorCause)}`;
+          window.windowError += `;${errorMessage}: ${String(errorCause)}`;
         });
       });
 

frontend/packages/console-telemetry-plugin/integration-tests/cypress.config.js

@@ -1,9 +1,4 @@
-const crypto = require('crypto');
 const { defineConfig } = require('cypress');
-// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
-// This code change override the default webpack v4 default hashing algorithm -"md4".
-// This change can be remove when console UI update webpack to version 5 in the future.
-const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -34,9 +29,6 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      Object.assign(crypto, {
-        createHash: () => hash('sha256'),
-      });
       // eslint-disable-next-line global-require
       return require('./../../dev-console/integration-tests/plugins/index.js')(on, config);
     },
@@ -49,4 +41,15 @@ module.exports = defineConfig({
     injectDocumentDomain: true,
     userAgent: 'ConsoleIntegrationTestEnvironment',
   },
+  /**
+   * @see https://docs.cypress.io/app/references/experiments#Strip-Minimum-CSP-Directives
+   */
+  experimentalCspAllowList: [
+    'script-src-elem',
+    'script-src',
+    'default-src',
+    'form-action',
+    'child-src',
+    'frame-src',
+  ],
 });

frontend/packages/dev-console/integration-tests/cypress.config.js

@@ -1,9 +1,4 @@
-const crypto = require('crypto');
 const { defineConfig } = require('cypress');
-// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
-// This code change override the default webpack v4 default hashing algorithm -"md4".
-// This change can be remove when console UI update webpack to version 5 in the future.
-const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -36,9 +31,6 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      Object.assign(crypto, {
-        createHash: () => hash('sha256'),
-      });
       // eslint-disable-next-line global-require
       return require('./plugins/index.js')(on, config);
     },
@@ -51,4 +43,15 @@ module.exports = defineConfig({
     injectDocumentDomain: true,
     userAgent: 'ConsoleIntegrationTestEnvironment',
   },
+  /**
+   * @see https://docs.cypress.io/app/references/experiments#Strip-Minimum-CSP-Directives
+   */
+  experimentalCspAllowList: [
+    'script-src-elem',
+    'script-src',
+    'default-src',
+    'form-action',
+    'child-src',
+    'frame-src',
+  ],
 });

frontend/packages/helm-plugin/integration-tests/cypress.config.js

@@ -1,9 +1,4 @@
-const crypto = require('crypto');
 const { defineConfig } = require('cypress');
-// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
-// This code change override the default webpack v4 default hashing algorithm -"md4".
-// This change can be remove when console UI update webpack to version 5 in the future.
-const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -35,9 +30,6 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      Object.assign(crypto, {
-        createHash: () => hash('sha256'),
-      });
       // eslint-disable-next-line global-require
       return require('./../../dev-console/integration-tests/plugins/index.js')(on, config);
     },
@@ -50,4 +42,15 @@ module.exports = defineConfig({
     injectDocumentDomain: true,
     userAgent: 'ConsoleIntegrationTestEnvironment',
   },
+  /**
+   * @see https://docs.cypress.io/app/references/experiments#Strip-Minimum-CSP-Directives
+   */
+  experimentalCspAllowList: [
+    'script-src-elem',
+    'script-src',
+    'default-src',
+    'form-action',
+    'child-src',
+    'frame-src',
+  ],
 });

frontend/packages/integration-tests-cypress/cypress.config.js

@@ -1,9 +1,4 @@
-const crypto = require('crypto');
 const { defineConfig } = require('cypress');
-// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
-// This code change override the default webpack v4 default hashing algorithm -"md4".
-// This change can be remove when console UI update webpack to version 5 in the future.
-const hash = crypto.createHash;
 
 module.exports = defineConfig({
   viewportWidth: 1920,
@@ -23,9 +18,6 @@ module.exports = defineConfig({
   },
   e2e: {
     setupNodeEvents(on, config) {
-      Object.assign(crypto, {
-        createHash: () => hash('sha256'),
-      });
       // eslint-disable-next-line global-require
       return require('./plugins/index.js')(on, config);
     },
@@ -38,4 +30,15 @@ module.exports = defineConfig({
     injectDocumentDomain: true,
     userAgent: 'ConsoleIntegrationTestEnvironment',
   },
+  /**
+   * @see https://docs.cypress.io/app/references/experiments#Strip-Minimum-CSP-Directives
+   */
+  experimentalCspAllowList: [
+    'script-src-elem',
+    'script-src',
+    'default-src',
+    'form-action',
+    'child-src',
+    'frame-src',
+  ],
 });

frontend/packages/knative-plugin/integration-tests/cypress.config.js

@@ -1,9 +1,4 @@
-const crypto = require('crypto');
 const { defineConfig } = require('cypress');
-// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
-// This code change override the default webpack v4 default hashing algorithm -"md4".
-// This change can be remove when console UI update webpack to version 5 in the future.
-const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -35,9 +30,6 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      Object.assign(crypto, {
-        createHash: () => hash('sha256'),
-      });
       // eslint-disable-next-line global-require
       return require('./../../dev-console/integration-tests/plugins/index.js')(on, config);
     },
@@ -50,4 +42,15 @@ module.exports = defineConfig({
     injectDocumentDomain: true,
     userAgent: 'ConsoleIntegrationTestEnvironment',
   },
+  /**
+   * @see https://docs.cypress.io/app/references/experiments#Strip-Minimum-CSP-Directives
+   */
+  experimentalCspAllowList: [
+    'script-src-elem',
+    'script-src',
+    'default-src',
+    'form-action',
+    'child-src',
+    'frame-src',
+  ],
 });

frontend/packages/operator-lifecycle-manager/integration-tests-cypress/cypress.config.js

@@ -1,9 +1,4 @@
-const crypto = require('crypto');
 const { defineConfig } = require('cypress');
-// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
-// This code change override the default webpack v4 default hashing algorithm -"md4".
-// This change can be remove when console UI update webpack to version 5 in the future.
-const hash = crypto.createHash;
 
 module.exports = defineConfig({
   viewportWidth: 1920,
@@ -23,9 +18,6 @@ module.exports = defineConfig({
   },
   e2e: {
     setupNodeEvents(on, config) {
-      Object.assign(crypto, {
-        createHash: () => hash('sha256'),
-      });
       // eslint-disable-next-line global-require
       return require('../../integration-tests-cypress/plugins/index.js')(on, config);
     },
@@ -38,4 +30,15 @@ module.exports = defineConfig({
     injectDocumentDomain: true,
     userAgent: 'ConsoleIntegrationTestEnvironment',
   },
+  /**
+   * @see https://docs.cypress.io/app/references/experiments#Strip-Minimum-CSP-Directives
+   */
+  experimentalCspAllowList: [
+    'script-src-elem',
+    'script-src',
+    'default-src',
+    'form-action',
+    'child-src',
+    'frame-src',
+  ],
 });

frontend/packages/shipwright-plugin/integration-tests/cypress.config.js

@@ -1,9 +1,5 @@
-const crypto = require('crypto');
 const { defineConfig } = require('cypress');
-// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
-// This code change override the default webpack v4 default hashing algorithm -"md4".
-// This change can be remove when console UI update webpack to version 5 in the future.
-const hash = crypto.createHash;
+
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
   viewportWidth: 1920,
@@ -33,9 +29,6 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      Object.assign(crypto, {
-        createHash: () => hash('sha256'),
-      });
       // eslint-disable-next-line global-require
       return require('./../../dev-console/integration-tests/plugins/index.js')(on, config);
     },
@@ -48,4 +41,15 @@ module.exports = defineConfig({
     injectDocumentDomain: true,
     userAgent: 'ConsoleIntegrationTestEnvironment',
   },
+  /**
+   * @see https://docs.cypress.io/app/references/experiments#Strip-Minimum-CSP-Directives
+   */
+  experimentalCspAllowList: [
+    'script-src-elem',
+    'script-src',
+    'default-src',
+    'form-action',
+    'child-src',
+    'frame-src',
+  ],
 });

frontend/packages/topology/integration-tests/cypress.config.js

@@ -1,9 +1,4 @@
-const crypto = require('crypto');
 const { defineConfig } = require('cypress');
-// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
-// This code change override the default webpack v4 default hashing algorithm -"md4".
-// This change can be remove when console UI update webpack to version 5 in the future.
-const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -38,9 +33,6 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      Object.assign(crypto, {
-        createHash: () => hash('sha256'),
-      });
       // eslint-disable-next-line global-require
       return require('./plugins/index.js')(on, config);
     },
@@ -53,4 +45,15 @@ module.exports = defineConfig({
     injectDocumentDomain: true,
     userAgent: 'ConsoleIntegrationTestEnvironment',
   },
+  /**
+   * @see https://docs.cypress.io/app/references/experiments#Strip-Minimum-CSP-Directives
+   */
+  experimentalCspAllowList: [
+    'script-src-elem',
+    'script-src',
+    'default-src',
+    'form-action',
+    'child-src',
+    'frame-src',
+  ],
 });

frontend/packages/webterminal-plugin/integration-tests/cypress.config.js

@@ -1,9 +1,4 @@
-const crypto = require('crypto');
 const { defineConfig } = require('cypress');
-// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
-// This code change override the default webpack v4 default hashing algorithm -"md4".
-// This change can be remove when console UI update webpack to version 5 in the future.
-const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -35,9 +30,6 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      Object.assign(crypto, {
-        createHash: () => hash('sha256'),
-      });
       // eslint-disable-next-line global-require
       return require('./../../dev-console/integration-tests/plugins/index.js')(on, config);
     },
@@ -50,4 +42,15 @@ module.exports = defineConfig({
     injectDocumentDomain: true,
     userAgent: 'ConsoleIntegrationTestEnvironment',
   },
+  /**
+   * @see https://docs.cypress.io/app/references/experiments#Strip-Minimum-CSP-Directives
+   */
+  experimentalCspAllowList: [
+    'script-src-elem',
+    'script-src',
+    'default-src',
+    'form-action',
+    'child-src',
+    'frame-src',
+  ],
 });

frontend/public/components/app.tsx

@@ -487,7 +487,6 @@ graphQLReady.onReady(() => {
   setInterval(() => store.dispatch(UIActions.updateTimestamps(Date.now())), 10000);
 
   // Used by GUI tests to check for unhandled exceptions
-  window.windowError = null;
   window.onerror = (message, source, lineno, colno, error) => {
     // ResizeObserver loop errors are non-actionable and can be ignored
     if (typeof message === 'string' && message.includes('ResizeObserver loop')) {
@@ -496,14 +495,14 @@ graphQLReady.onReady(() => {
 
     const formattedStack = error?.stack?.replace(/\\n/g, '\n');
     const formattedMessage = `unhandled error: ${message} ${formattedStack || ''}`;
-    window.windowError = `${window.windowError ?? ''};${formattedMessage}`;
+    window.windowError += `;${formattedMessage}`;
     // eslint-disable-next-line no-console
     console.error(formattedMessage, error || message);
   };
   window.onunhandledrejection = (promiseRejectionEvent) => {
     const { reason } = promiseRejectionEvent;
     const formattedMessage = `unhandled promise rejection: ${reason}`;
-    window.windowError = `${window.windowError ?? ''};${formattedMessage}`;
+    window.windowError += `;${formattedMessage}`;
     // eslint-disable-next-line no-console
     console.error(formattedMessage, reason);
   };

frontend/public/i18n.js

@@ -104,7 +104,7 @@ export const init = () => {
       saveMissing: true,
       missingKeyHandler: function (lng, ns, key) {
         const formattedMessage = `Missing i18n key "${key}" in namespace "${ns}" and language "${lng}".`;
-        window.windowError = `${window.windowError ?? ''};${formattedMessage}`;
+        window.windowError += `;${formattedMessage}`;
         // eslint-disable-next-line no-console
         console.error(formattedMessage);
       },