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
This commit is contained in:
Richard van der Hoff 2023-05-11 11:31:09 +01:00 committed by GitHub
parent 41c96877d3
commit 3c32ad7cab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 4 deletions

View file

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

View file

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