Cross origin error when running very basic Cypress test. Setting cromeWebSecurity to false didn't work

user_18578711 0
Viewed 608

Once worked with Cypress.io before but completely forgotten how to work around that cross origin error of theirs. Baically this code gives me error:

context('searching example',() => {
    beforeEach('open google',() => {
    //  Cypress.config('chromeWebSecurity', true);
        cy.visit('https://google.com');
    })
    describe('google test example', ()=>{
            it('search for death star',() => {
        
        cy.get("button[role='link']").click()
        
        
    })
    })

})

The error I'm getting is:

CypressError
Cypress detected a cross origin error happened on page load:

  > Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.

Before the page load, you were bound to the origin policy:

  > https://google.com

A cross origin error happens when your application navigates to a new URL which does not match the origin policy above.

A new URL does not match the origin policy if the 'protocol', 'port' (if specified), and/or 'host' (unless of the same superdomain) are different.

Cypress does not allow you to navigate to a different origin URL within a single test.

You may need to restructure some of your test code to avoid this problem.

Alternatively you can also disable Chrome Web Security in Chromium-based browsers which will turn off this restriction by setting { chromeWebSecurity: false } in cypress.json.Learn more

I've tried adding this to cypress.json to no avail


{"chromeWebSecurity": false}
cypress javascript
2 Answers

Permanent, it is not: feat: Multi-domain Support #18075

Install as a pre-release using

npm install https://cdn.cypress.io/beta/npm/9.6.0/win32-x64/feature-multidomain-8f7cc74ba942ead88ab09d632630c1d14679abfb/cypress.tgz

From Gleb Bahmutov's video Visit Two Domains In The Same Cypress Spec

Here's some sample code from that release.

It looks like the same scenario you're describing.

Sample page

<body>
  <div>
    Go to different domain:
    <a data-cy="multi_domain_secondary_link"
        href="http://www.foobar.com:4466/multi_domain_secondary.html">http://www.foobar.com:4466/multi_domain_secondary.html</a>
  </div>
</body>

Test

// @ts-ignore / session support is needed for visiting about:blank between tests
describe('multi-domain', () => {
  beforeEach(() => {
    cy.visit('/multi_domain.html')
    cy.get('a[data-cy="multi_domain_secondary_link"]').click()
  })

  it('tries to find an element that doesn\'t exist and fails', () => {
    cy.switchToDomain('http://foobar.com:4466', () => {
      cy.get('#doesnotexist', {
        timeout: 1000,
      })
    })
  })
})
user_169977070

The error that you are getting is a permanent trade=off from cypress and you can read more about it from the cypress docs. In a nutshell you cannot a work with url's from different origin in the same test.

Given the URLs below, all have the same-origin compared to https://www.cypress.io

https://cypress.io
https://docs.cypress.io
https://example.cypress.io/commands/querying

The URLs below, however, will have different origins compared to https://www.cypress.io.

http://www.cypress.io (Different protocol)
https://docs.cypress.io:81 (Different port)
https://www.auth0.com/ (Different host of different superdomain)

Solution: Try dividing your tests into two different tests something like this:

it('navigates', () => {
  cy.visit('https://apple.com')
})

// split visiting different origin in another test
it('navigates to new origin', () => {
  cy.visit('https://google.com') // yup all good
})
user_45712710
Related