Styles dont render in pinned DOM snapshots when running in GUI mode with CSP enabled

[darrinmn9]

Current behavior

When running cypress tests in GUI mode against a page with a content-security-policy (csp) such as

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

The tests appear to run fine, and the html page loads correctly with all the correct styling. However, you do see csp violations if you have the console open, and if you try to hover/pin a DOM snapshot from the cypress GUI test panel, those snapshots fail to load styles due to a csp violation "trying to apply inline style" for cypress_runner.js. See repro https://github.com/darrinmn9/cypress-example-recipes/pull/1 for screenshots of issue.

Desired behavior

From my understanding of reading related csp issues, I believe cypress strips the csp meta tag before running tests since currently there is no support for running them with csp enabled. but I do still see this csp <meta> tag inside the iframe of my mounted html page in the cypress GUI. (correct me if im wrong here)

The desired behavior is that pinned DOM screenshots would work and render styles correctly, just like the main page in the test GUI does. Ideally you shouldnt see any csp errors in the console output.

Test code to reproduce

https://github.com/darrinmn9/cypress-example-recipes/pull/1

Cypress Version

9.6.0

Other

No response

[davidmunechika]

Thanks for opening an issue! I was able to reproduce this on my end and it looks to be a bug with how we handle CSP.

[darrinmn9]

Hi @davidmunechika , just curious, is there a temporary workaround that could help with this issue in the interim? Right now I basically cannot use any snapshot/pinning related features of the GUI during the development of cypress tests. Does cypress provide a way to edit the html before it is rendered the the page? (so i could just manually remove the <meta http-equiv="Content-Security-Policy" in my test code)

[darrinmn9]

So i finally stumbled on a workaround for this, as I realized 1 out of my entire suite of test specs was pinning snapshots correctly. The unique thing about this spec was that it finished on a webpage that did not have the csp defined... which then allowed me to pin any snapshot throughout the test (including snapshots of pages where the csp is defined).

So apparently snapshot pinning depends on the csp of the final html page rendered in the GUI. A hacky workaround would be to add an afterEach hook per test block to visit any webpage without this type of csp. Or manually perform an action on the webpage after the test finishes that makes it visit a different webpage without the csp defined.

@mjhenkes given this info, do you by chance have a better workaround than navigating to a different webpage after every test spec? or hopefully atleast this helps narrow down the source of the bug a little.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[darrinmn9]

still reproducible in v12.17.0

[bahmutov]

Still happens because you inject inline style for smooth scrolling directly without any hashes / nonces

reproduction https://github.com/bahmutov/cypress-csp-example/commit/f0e50851e94506e168e2e0774f0d51e628959b8a

[pawelfus]

The same problem with v12.17.1

[musicianfig]

I can reproduce this on v13.6.0

[musicianfig]

And reproducing this still on v13.6.1

[musicianfig]

Just checked this on v13.6.2 on Electron v114 and I'm still able to reproduce this issue. Unfortunately can't switch to Chrome as this just now spins and doesn't run our tests properly.

This is causing us real problems as we are unable to see any of the snapshots at all and therefore cannot see what happened with any issues apart from using screenshots/videos.

[musicianfig]

Btw.... I think this might be resolvable if the following option was allowed to be added to the config:

experimentalCspAllowList: ['style-src']

At the moment there is just the following options:

'default-src' | 'child-src' | 'frame-src' | 'script-src' | 'script-src-elem' | 'form-action'

[musicianfig]

Reproducing this still on v13.6.3

[josh-atkins]

Does anyone know if there are plans to include style-src as one of the options for experimentalCspAllowList?