kcLogin: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

[MarkLyck]

after kcLogin finishes and its('body') is logged in Cypress (last step of kcLogin succeeds)

Cypress then navigates to / and then fails with the following error:

Refused to frame 'https://sso.xxxxx.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

After some googling I tried setting "chromeWebSecurity": false, in cypress.json as recommended.

However doing that causes cypress to redirect to chrome-error://chromewebdata/ which there is a multi-year long discussion about here: cypress-io/cypress#4220

sadly this seems to have never been resolved.

There was 1 recommended solution "Using the Ignore X-Frame headers extension", which I tried, but that did not solve the problem for me.

I feel like I'm going down a rabbit hole for something completely unrelated, as no one else has reported the initial Iframe error on here?

I'm having the exact same error using kcFakeLogin.

Versions on the frontend:
"keycloak-js": "9.0.3",
"@react-keycloak/web": "^2.1.1",

Keycloak server:
Server Version | 4.8.3.Final

[softshipper]

@MarkLyck Yes, I have encountered the same issue. Would be great, if someone can fix it.

[raghugitrepo]

@MarkLyck did you find any solution. For me, it works on headless Darwin (MacOs) but not from cypress image https://hub.docker.com/layers/cypress/included/5.3.0/images/sha256-7198493e5d30c29a6650c625e47d130fbf999d58ad14b1ab71331d7a70b0bf29?context=explore

[WaldemarEnns]

@MarkLyck I have the same issue with kcFakeLogin - the reason seems to be that the client opens an iframe of my auth provider, to verify that the session is valid.

I am using vuex-oidc which has oidc-client under the hood.

I would be happy if this could be fixed very soon! :)

EDIT
This section does not help me (in my opinion it also lacks of documentation, since no one knows where to put the code by just reading the README.md -> optimization request 💯 ) because I can't block the iframe as soon as I know, by the modules I am using.

[WaldemarEnns]

@Fredx87 do you have any solution for us? :)

[DarioZuban]

I got around the issue by setting "chromeWebSecurity": false inside of cypress.json and using cy.kcFakeLogin("user", "some/path");.
It's important to do your desired .visit() with .kcFakeLogin("user, "some/path") because (at least in my case) keycloak kinda forgets that you did a fake login and throws me back to the login screen when I try to visit a page inside an actual test...

[WaldemarEnns]

@MarkLyck , @softshipper , @raghugitrepo , @DarioZuban I fixed this issue by switching to a newer cypress version.
Before, I was using cypress v3.8.3 - due to my vue-cli setup. Then I researched on how to switch my vue-cli used cypress version. I could do that by switching from nom to yarn and setting this in my package.json to enforce the usage of cypress v5.6.0.

For the vue-cli users: Be cautious: The resolutions attribute in the package.json will only work in yarn.
Read this manual to learn more about yarn and the resolutions attribute.

That made my cypress setup work - for now.
Currently I get redirected to the auth provider (which is a new origin so basically CORS requests work in the newer cypress versions). So this happens on kcLoginand kcFakeLogin. I have to figure out how to fix that - didn't look into that yet.

But for now: My cypress setup works again, with yarn and a newer cypress version. I can recommend to try it out!

For vue-cli users:

1. Use yarn
2. Install your dependencies with yarn
3. Install cypress ^5.6.0
4. Add a custom resolution to your package.json like here
5. Run your e2e tests with yarn

For non vue-cli users:

1. Install cypress 5.6.0 and use it to run your tests

[WaldemarEnns]

Btw., just installing the latest Cypress version works as well, without the resolutions stuff I mentioned before.