Part of the Console CI suite, we should be testing if the proposed PR changes are not introducing a CSP violation and if so, the test should fail. Currently the violations are being logged into the browser console.

Cypress can be configured to capture and assert CSP violations that are logged in the browser console. By listening to console events in Cypress, we can check for errors or warnings related to CSP violations.

Currently we are defining a custom before and after function which will run as part of the general before and after method.

Also worth to check: 

• https://docs.cypress.io/faq/questions/using-cypress-faq#How-do-I-spy-on-consolelog

AC:

• Investigate which of the testing framework/tool would suite our need to check the CSP directives which console is supporting.
• Create a follow up tory for implementation in Console CI
• Create follow on stories for static-plugins to update e2e tests with CSP test

Note: Console itself is currently triggering a single violation, which should be taken care of by CONSOLE-4266.

Note: Testing should be ideally done in a real browser not in a framework/tool which is using iframe for lunching the tests, eg. Cypress.

https://docs.cypress.io/guides/guides/content-security-policy

Additional info:

We tried writing the CSP violations end-to-end test in Cypress but found that the `experimentalCspAllowList` doesn’t support some of the directives used in Console. The `experimentalCspAllowList` supports only these values: `["script-src-elem", "script-src", "default-src", "form-action", "child-src", "frame-src"]`. Since we cannot use all the directives in Console, we decided to investigate other testing frameworks i.e. Puppeteer that we could use for this purpose.