cypress: Redirected to chrome-error://chromewebdata/ when X-Frame-Options present on redirected domain

Reporting in, I’m having this same issue and would love for Cypress to better handle/solve this. It’s an annoying one especially when testing OAuth2 and other stuff that requires domain changing. These things are common nowadays and we should account for allowing us to test such cases.

We are facing the same issue - on 3.4.1 and see chrome-error://chromewebdata/ Has anyone found a workaround? Why is the cypress team not looking into it?

Also got that issue, Our app is redirecting directly to our auth(which is a seperated domain) if user is not logged in and then redirects back to the app. But it seems like it just shows that chrome-error://chromewebdata/

😕

Have exactly the same issue. Cypress looks nice, but if such “simple” things do not work it’s hard to work with it.

@jennifer-shehane

This is an absolute showstopper for us and in all honesty, the fact that so many people are commenting that this is an issue and it is not addressed because nobody can give steps to be reproduced is no justification for not addressing it after a year. The test failing is so simple that it shouldn’t need to try to be reproduced. But here it goes:

• cypress 4.4.1
• node 8.8.1
• Running Chrome 83

This is my test:

describe('Login Page', () => {
    beforeEach(() => {
        cy.server();
        cy.visit('/');
    });

    it.only('Has a Sign Up / Log In Section with logo and button', function() {
        cy.get('[data-cy="authenticationSection"]');
        cy.get('[data-cy="signupSection-logoBlue"]');
        cy.get('[data-cy="signupSection-button"]').click();
        // cy.location('pathname').should('include', 'auth0');
    });
});

I have a very simple react component:

import React from 'react';
import { connect } from 'react-redux';

// Styling
import { Flex, Image } from 'rebass';
import { withStyles } from '@material-ui/core/styles';
import { Card, Button } from '@material-ui/core';

// Local Imports
import logoBlue from '../assets/images/logo_blue.png';

import { useAuth0 } from '../react-auth0-spa';

// Local Style
const styles = theme => ({
    root: {
        flex: 1,
        display: 'flex',
        padding: theme.spacing(6, 4),
        background: '#eaeff1',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    card: {
        borderRadius: 10,
        height: '60%',
        boxShadow: '0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)',
    },
    styledInput: {
        border: '2px solid #e1e8ee',
        borderRadius: 4,
        fontSize: '1em',
        padding: '12px 6px',
        marginBottom: 5,
    },
});

const Login = ({ classes }) => {
    const { loginWithRedirect } = useAuth0();

    return (
        <Card data-cy="authenticationSection" className={classes.root}>
            <Flex width="50%" bg="white" className={classes.card} flexDirection="column" alignItems="center" justifyContent="center">
                <Flex flexDirection="column" flex={1} width={0.75} p="6% 2%">
                    <Flex alignItems="center" justifyContent="center" flex={1}>
                        <Image data-cy="signupSection-logoBlue" width={[0.5, 0.5, 0.3]} src={logoBlue} />
                    </Flex>
                    <Flex flexDirection="column" justifyContent="flex-end" flex={1}>
                        <Button
                            className="signupButton"
                            data-cy="signupSection-button"
                            style={{ borderRadius: 20 }}
                            size="medium"
                            variant="contained"
                            color="primary"
                            onClick={() => {
                                loginWithRedirect();
                            }}
                        >
                            Sign Up / Log In
                        </Button>
                    </Flex>
                </Flex>
            </Flex>
        </Card>
    );
};

export default withStyles(styles)(
    connect(
        null,
        null,
    )(Login),
);

All it has is one button that takes me to my Auth0 login. I cannot navigate to it because of chrome-error://chromewebdata/ and have set "chromeWebSecurity": false.

I have read your best practices and I agree that you should try to programmatically get access but think of your customers going to your app and not being able to log in via the UI that is probably the worst thing that can happen. So it is imperative that we make sure that we are not breaking the UI in the same way that we test everything else. I understand the drawbacks but I am willing to go through them so long as when I know I go into production my users will be able to authenticate.

I hope that this provides sufficient information and I’m happy to provide more to get this resolved.

What appears to be the case in some of these examples is a presence of an X-Frame-Options header on a separate domain. Normally, Cypress strips these headers for the application under test. But there’s an exception.

• We only strip X-Frame-Options from the same domain under test, so a request to a different domain will maintain the X-Frame-Options headers.

This is, in some cases, causing the site to redirect to chrome-error://chromewebdata/

Workaround

Using the Ignore X-Frame headers extension will ignore X-Frame-Options headers and Content-Security-Policy HTTP response headers when installed in the Cypress Chrome browser.

⚠️ Note: These extensions are third party and not created, maintained or monitored by Cypress. You are responsible for evaluating these extensions.

cypress open (Chrome, headed only)

1. Open Cypress using cypress open and click on a spec file to open Cypress via Chrome.
2. Visit https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe and click ‘Add to Chrome’
3. Run cypress open as normally, the site under test should now properly redirect.

cypress run (Chrome, headed only)

We’ll need to make this extension available via Chrome on any machine, not just the one we locally opened. To do that, we’ll load the unpacked extension via Cypress’s before:browser:launch API.

1. Visit https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin to download the ‘Chrome extension source viewer’ extension and click ‘Add to Chrome’. (Or any other means you’d like to get an unpacked extension from the Google WebStore)

2. Visit https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe and using the previously installed extension, click ‘CRX’ then ‘Download as zip’.

3. Upzip the extension and place it within your project where you are testing with Cypress.

4. In your cypress/plugins/index.js file, provide the following code, replacing the path with an absolute path to the previously unzipped extension’s folder:

   module.exports = (on, config) => {
     on('before:browser:launch', (browser, launchOptions) => {
       if (browser.family === 'chromium' && browser.name !== 'electron') {
         // provide absolute path to unpacked extension's folder
         launchOptions.extensions.push('/Users/jane/Dev/my-app/gleekbfjekiniecknbkamfmkohkpodhe')
       }
   
       return launchOptions
     })
   }
   

5. Run Cypress, specifying the chrome browser (or chromium browser other than Electron), the site under test should now properly redirect.

   cypress run --browser chrome
   

More Issues?

This may not cover all cases of redirects to chrome-error://chromewebdata/. If you’re still experiencing this issue after trying the workarounds, please comment with a reproducible example so we can investigate.

Permanent Solution

I’ll have to discuss with the team what Cypress would plan as a more permanent, cross-browser compatible solution to this situation. This is obviously something we don’t want our users to have to encounter.

We have larger feature work in the works surrounding testing authentication (visiting cross-domain sites) and I will surface this as a factor to consider as part of that work.

@jennifer-shehane is there any updates where it will be possible to access more domains at the same test? Cause it seems a lot of people try this.

Me, for example, I can’t open some modal in a table just because this modal verifies the user token to open it.

I’m keeping having this issue and it is really annoying.

Thanks

@afrancht We do and have had a reproducible example as given here. https://github.com/cypress-io/cypress/issues/4220#issuecomment-597602768 We however have not been able to determine what is causing this behavior to date.

This issue is not currently in our backlog to address, but I can bring it up with the team to reevaluate if we have resources to dedicate to investigating this.

We understand this is a blocker when attempting to click through a button/link that redirects.

Currently we do recommend programmatically testing login. Testing login flows end-to-end is a current priority of ours that we are planning a multi-step approach for addressing soon.

I have the same issue, it works in 3.2.0. After updating to 3.3.1 i now get this error as well. Also have “chromeWebSecurity”: false, yes working cross domain but didn’t have the issue before the update.

[deleted]

On May 6, 2021 9:50 PM, “Ponthius Gamer” @.***> wrote:

Yes and fuck off am tired and also muting.

On May 6, 2021 9:48 PM, “Wayde” @.***> wrote:

After a lot of digging I finally found this @.***/configuring-cypress-to-work-with- iframes-cross-origin-sites-afff5efcf61f. Remember to also set “chromeWebSecurity”: false after following this article.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cypress-io/cypress/issues/4220#issuecomment-833772462, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATT3XTZFN6NRSYNOBG2LVW3TMLQBFANCNFSM4HNQRQYQ .

Yes and fuck off am tired and also muting.

On May 6, 2021 9:48 PM, “Wayde” @.***> wrote:

After a lot of digging I finally found this @.***/ configuring-cypress-to-work-with-iframes-cross-origin-sites-afff5efcf61f. Remember to also set “chromeWebSecurity”: false after following this article.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cypress-io/cypress/issues/4220#issuecomment-833772462, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATT3XTZFN6NRSYNOBG2LVW3TMLQBFANCNFSM4HNQRQYQ .

I forget my apple password

Unfortunately no one has provided enough information to reproduce the problem. This means that we do not have a path to move forward, so no, no progress has been made on this issue as we cannot see this error on our machines with no reproducible example.

Please comment in this issue with a reproducible example so we can begin addressing the issue.

I would suggest taking a look at one of our recipes testing clicking into links with a different domain and restructuring your test to account for this.

We get the same error and we’re on one superdomain. We are however using a subdomain for authentication. The referenced solutions are specifically for other superdomains.

The last version that still worked for us was 3.2.0

When we install the latest Cypress (3.4.1) the tests run up until the first redirect (from https://bar.foo to https://login.bar.foo). It errors with the cross-origin error message.

When we add chromeWebSecurity:false to the settings we fail before redirecting to a subdomain with chrome-error://chromewebdata/ in the address bar and the following error stacktrace (failed trying to load):

Error: write EPROTO 101057795:error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure:c:\projects\electron\vendor\node\deps\openssl\openssl\ssl\s23_clnt.c:802:

    at _errnoException (util.js:1024:11)
    at WriteWrap.afterWrite (net.js:867:14)

Cypress 3.3.0 throws the same errors so something in that changelog should have caused it.

The one change that stands out are the proxy settings. We did find a proxy in the registry but adding it to HTTP_PROXY and HTTPS_PROXY simply causes the tests to fail altogether (a blank test page without the Cypress ui). Previously it failed after login. We did suddenly get the message that Cypress couldn’t verify the baseurl running (which is running).

Maybe it is not really a proxy issue ? (since we can login but the subdomain redirect fails) We are running out of ideas here.

The same problem is happing over here. I tried basically everything you guys said over here, including chromeWebSecurity to “false” and also I added this on my plugins/indes.js: launchOptions.args.push("--ignore-certificate-errors")

The interesting point is that I am just moving to another URL, but in the same domain and both are HTTPS pages.

This issue concerning X-Frame-Options requests for different domains will be part of the work for our multi-domain support, which we are currently working on. Please see https://github.com/cypress-io/cypress/issues/944#issuecomment-764232328 for most recent updates.

Are there any updates regarding this issue?

1. In headed mode and chrome browser, it will work perfectly after you install a chrome extension https://github.com/cypress-io/cypress/issues/1763#issuecomment-394492373
2. However, in headless mode and chrome browser, the error will still persist.

Does anyone know how to perform case 2?

Just a thought, but some websites, especially when federating logins, cause this error in the console:

Refused to display 'https://....' in a frame because it set 'X-Frame-Options' to 'deny'.

Which causes the same behavior of chrome-error://chromewebdata/ even though this config is set: "chromeWebSecurity": false

Some workarounds have been proposed here: https://github.com/cypress-io/cypress/issues/1763

@jennifer-shehane Are there any updates on this? At the moment we are removing the tests from our CI pipeline because they always erroneously fail.

Same issue…even with the Ignore-X-Frame-headers_v1.1 loaded headless it does not work

Good day everyone! I have the same issue and wanna describe how I fixed it.

Application features:

1. We have the main domain - https://condogenie-app and can create “accounts” from it. Every account has own subdomain for example: https://staging.condogenie-app where “staging” is the unique account name
2. To create a new account we are navigating to https://condogenie-app/account-sign-up. On this page, we set the account name and click the ‘Finish’ button. After this action system navigates us to subdomain page: https://staging.condogenie-app/account-sign-up-finish Exactly on this step, the issue arises.

Strangeness:

1. The issue started to reproduce one week ago before it no problems occurred
2. If "chromeWebSecurity": true - cypress shows ‘cross-origin security’ error
3. If "chromeWebSecurity": false- we get chrome-error://chromewebdata/ and the cypress runner crashed

How I fixed it: It was surprising for me, but no error arises for my old code(which was written several weeks or months ago). So I started comparing new and old code and couldn`t find any differences. That why I decided to copy the old code to the new file(it is working). After that I started to delete parts of the old code and found that the issue arises if we change the variables names! Example of variables with which tests passed:

export const renterEmail = 'renter4booking@example.com';
export const renterFname = 'Renter';
export const renterLname = 'Book';
export const accountName = `bookings${Date.now()}`; 

Example of variables with which tests failed:

export const accountName = `bookings_tests${Date.now()}`;
export const renterEmail = 'renter4bookings@example.com';
export const renterFname = 'Renter';
export const renterLname = 'Bookings';

I can`t explain this strange behavior. I tried to change variables import order but it changes nothing. Besides, if I write a new code it will be crashed. Hope this information will help you in the issue investigation

Same

@sfrendpax8 we decided to run Cypress on CircleCI instead of GitHub Actions and it runs without a hitch 😃

What appears to be the case in some of these examples is a presence of an X-Frame-Options header on a separate domain. Normally, Cypress strips these headers for the application under test. But there’s an exception.

• We only strip X-Frame-Options from the same domain under test, so a request to a different domain will maintain the X-Frame-Options headers.

This is, in some cases, causing the site to redirect to chrome-error://chromewebdata/

Workaround

Using the Ignore X-Frame headers extension will ignore X-Frame-Options headers and Content-Security-Policy HTTP response headers when installed in the Cypress Chrome browser.

⚠️ Note: These extensions are third party and not created, maintained or monitored by Cypress. You are responsible for evaluating these extensions.

cypress open (Chrome, headed only)

1. Open Cypress using cypress open and click on a spec file to open Cypress via Chrome.
2. Visit https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe and click ‘Add to Chrome’
3. Run cypress open as normally, the site under test should now properly redirect.

cypress run (Chrome, headed only)

We’ll need to make this extension available via Chrome on any machine, not just the one we locally opened. To do that, we’ll load the unpacked extension via Cypress’s before:browser:launch API.

1. Visit https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin to download the ‘Chrome extension source viewer’ extension and click ‘Add to Chrome’. (Or any other means you’d like to get an unpacked extension from the Google WebStore)
2. Visit https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe and using the previously installed extension, click ‘CRX’ then ‘Download as zip’.
3. Upzip the extension and place it within your project where you are testing with Cypress.
4. In your cypress/plugins/index.js file, provide the following code, replacing the path with an absolute path to the previously unzipped extension’s folder:

   module.exports = (on, config) => {
     on('before:browser:launch', (browser, launchOptions) => {
       if (browser.family === 'chromium' && browser.name !== 'electron') {
         // provide absolute path to unpacked extension's folder
         launchOptions.extensions.push('/Users/jane/Dev/my-app/gleekbfjekiniecknbkamfmkohkpodhe')
       }
   
       return launchOptions
     })
   }
   

5. Run Cypress, specifying the chrome browser (or chromium browser other than Electron), the site under test should now properly redirect.

   cypress run --browser chrome
   

More Issues?

This may not cover all cases of redirects to chrome-error://chromewebdata/. If you’re still experiencing this issue after trying the workarounds, please comment with a reproducible example so we can investigate.

Permanent Solution

I’ll have to discuss with the team what Cypress would plan as a more permanent, cross-browser compatible solution to this situation. This is obviously something we don’t want our users to have to encounter.

We have larger feature work in the works surrounding testing authentication (visiting cross-domain sites) and I will surface this as a factor to consider as part of that work.

This solved my issue for both local development and CI/CD. I am working on an os project so please find an example of the code working solution. The steps I followed in addition to @jennifer-shehane’s suggestion.

1. For CI/CD we enable the browser to be chrome instead of Electron this makes really a difference since the workaround is only for chrome at the moment https://github.com/dhis2/capture-app/pull/828/files#diff-4544ea583ec25b9579b382134a525f89R21
2. We set the chromeWebSecurity to false. This is also important so that you can be navigated to the different origin https://github.com/dhis2/capture-app/pull/828/files#diff-4e5a69f9c5bdec4c20952d93e2a1827fR7
3. Including the plugin in out codebase and installing it before we run the cypress app to ignore-x-frame-headers https://github.com/dhis2/capture-app/pull/828/files#diff-4bcea4966f5e62ded90298c2b0907445R5

The links are on a PR atm so please if they get lost in the future ping me and I will make sure I include the right links

to reproduce the problem you really need to click the link with external resource like itunes, google play store, amazon etc… test will look like this example provided by cypress team: https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__tab-handling-links/cypress/integration/tab_handling_anchor_links_spec.js#L74

Since Cypress does not support switching between tabs, we need to make it open in current tab resetting href attribute to default _target value by removing it entirely:

.invoke('removeAttr', 'target')

or by setting it to _self :

.invoke('attr', 'target', '_self')

then source will be opened in current tab and another problem will appear as described in this ticket:

(NEW URL)
chrome-error://chromewebdata/
URL
ASSERT
expected chrome-error://chromewebdata/ to include google.com

as you can see I expected cy.url().should('include', 'google.com'); but instead url was chrome-error://chromewebdata/

Example of button to click:

<a href="https://play.google.com/store/apps/details" test-id="google-play" target="_blank">

Example of test verification:

cy.get('[test-id="google-play"]').invoke('attr', 'target', '_self').click();
cy.url().should('include', 'google.com');

PS: I also tried exporting HTTP_PROXY but this did not work either and is really overkill especially in case where we have many links to test.

hopefully this is something cypress team willing to implement sooner

@Tay08 No, the issue will be closed and a comment will be made if it is part of a release.

I’m experiencing this issue with only different subdomains in one test (http://www.lvh.me:3000 & http://www_xyz_com.wl.lvh.me:3000) which should be fine as per https://docs.cypress.io/guides/references/trade-offs#Same-origin “chromeWebSecurity”: false is set

Still happening on version 6.9.1

Still happening on version 6.8.0

What is new about this error? Right now cypress is unusable in github actions with this error…

Any updates on this ?

Afaik, it is something they are considering to have better support for. For now, the post on the workaround using the Chrome extension works wonders. It is great both locally and in CI.

@jennifer-shehane I’m also seeing what @valentijnnieman observed — the plugin workaround does not work on the latest version of Chrome (84.0.4147.89).

The workaround seems to work on some versions of Chrome but not on others. And at least in my case, I have still never been able to get it to work successfully on linux. (Anyone out there get it to work on linux?)

Here are the Chrome versions I have tested so far:

• 84.0.4147.89 — no, workaround does not work. Mac+Linux runs fail with chrome-error://chromewebdata/ message
• 83.0.4103.116 — yes, workaround does work on my Mac. Linux run hangs
• 81.0.4044.138 — no, workaround does not work. Mac+Linux runs fail with chrome-error://chromewebdata/ message
• 80.0.3987.87 — yes, workaround does work on my Mac. Linux run hangs

On Chrome versions 83.0.4103.116 and 80.0.3987.87, the workaround works fine on my Mac, but on Linux the test runs hang forever without actually starting. Any tips/ideas for what might be going on?

@oliver441 It seems like we have the same flavor of this bug!

No, I did not have any more ideas once the plugin failed 😦

@jennifer-shehane - could it be about CORS? if chrome is hitting the OPTIONS command first, and then gets something it doesn’t like and falls over? They made some CORS changes in v76 https://bugs.chromium.org/p/chromium/issues/detail?id=989443

Cypress version 4.4.0 same issue

trying to test payment methods in sandbox. It’s weird that testing of PaySafe method is working correct(transfer from one superdomain to another, fill info and go back), but iDeal method is failed with chrome-error://chromewebdata/ when redirect should perform

I have same issue. Please help.

Thanks in advance

We have the same issue. We use a call to an external link for authorization. cy.request('https://our-identity-server.com'); It worked well until 3.2.0. Most interesting thing is that it works on Electron 78, but fails with Chrome 80

Good day everyone! I have the same issue and wanna describe how I fixed it.

Application features:

1. We have the main domain - https://condogenie-app and can create “accounts” from it. Every account has own subdomain for example: https://staging.condogenie-app where “staging” is the unique account name
2. To create a new account we are navigating to https://condogenie-app/account-sign-up. On this page, we set the account name and click the ‘Finish’ button. After this action system navigates us to subdomain page: https://staging.condogenie-app/account-sign-up-finish Exactly on this step, the issue arises.

Strangeness:

1. The issue started to reproduce one week ago before it no problems occurred
2. If "chromeWebSecurity": true - cypress shows ‘cross-origin security’ error
3. If "chromeWebSecurity": false- we get chrome-error://chromewebdata/ and the cypress runner crashed

How I fixed it: It was surprising for me, but no error arises for my old code(which was written several weeks or months ago). So I started comparing new and old code and couldn`t find any differences. That why I decided to copy the old code to the new file(it is working). After that I started to delete parts of the old code and found that the issue arises if we change the variables names! Example of variables with which tests passed:

export const renterEmail = 'renter4booking@example.com';
export const renterFname = 'Renter';
export const renterLname = 'Book';
export const accountName = `bookings${Date.now()}`; 

Example of variables with which tests failed:

export const accountName = `bookings_tests${Date.now()}`;
export const renterEmail = 'renter4bookings@example.com';
export const renterFname = 'Renter';
export const renterLname = 'Bookings';

I can`t explain this strange behavior. I tried to change variables import order but it changes nothing. Besides, if I write a new code it will be crashed. Hope this information will help you in the issue investigation

Thank you for taking the time to report this here! That’s a strange issue indeed. Let’s hope cypress team has some ideas.