Fix CSP problems due to cypress-axe

.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:

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);
+            }),
+    );
+});