From 3c32ad7cabc76bc7387d98e234a5d4b694484f0e Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Date: Thu, 11 May 2023 11:31:09 +0100
Subject: [PATCH] Fix CSP problems due to cypress-axe (#10843)

* Fix CSP problems due to cypress-axe

Rewrite `injectAxe` to use a script tag instead of an `eval`.

* remove gha workflow hack
---
 .github/workflows/cypress.yaml |  4 ----
 cypress/support/axe.ts         | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/cypress.yaml b/.github/workflows/cypress.yaml
index cba28da9b7..1529faccaf 100644
--- a/.github/workflows/cypress.yaml
+++ b/.github/workflows/cypress.yaml
@@ -135,10 +135,6 @@ jobs:
                   persist-credentials: false
                   path: matrix-react-sdk
 
-            # This is necessary as Cypress relies on eval for passing functions between processes
-            - name: Allow CSP script-src unsafe-eval
-              run: sed -i "s/script-src /script-src 'unsafe-eval' /" webapp/index.html
-
             - name: Run Cypress tests
               uses: cypress-io/github-action@59c3b9b4a1a6e623c29806797d849845443487d1
               with:
diff --git a/cypress/support/axe.ts b/cypress/support/axe.ts
index 4040a983d9..c0e7a6332a 100644
--- a/cypress/support/axe.ts
+++ b/cypress/support/axe.ts
@@ -67,3 +67,35 @@ Cypress.Commands.overwrite(
         );
     },
 );
+
+// Load axe-core into the window under test.
+//
+// The injectAxe in cypress-axe attempts to load axe via an `eval`. That conflicts with our CSP
+// which disallows "unsafe-eval". So, replace it with an implementation that loads it via an
+// injected <script> element.
+Cypress.Commands.overwrite("injectAxe", (originalFn: Chainable["injectAxe"]): void => {
+    Cypress.log({ name: "injectAxe" });
+
+    // load the minified axe source, and create an intercept to serve it up
+    cy.readFile("node_modules/axe-core/axe.min.js", { log: false }).then((source) => {
+        cy.intercept("/_axe", source);
+    });
+
+    // inject a script tag to load it
+    cy.get("head", { log: false }).then(
+        (head) =>
+            new Promise((resolve, reject) => {
+                const script = document.createElement("script");
+                script.type = "text/javascript";
+                script.async = true;
+                script.onload = resolve;
+                script.onerror = (_e) => {
+                    // Unfortunately there does not seem to be a way to get a reason for the error.
+                    // The error event is useless.
+                    reject(new Error("Unable to load axe"));
+                };
+                script.src = "/_axe";
+                head.get()[0].appendChild(script);
+            }),
+    );
+});