Cypress throwing SecurityError

Question

I am currently running with Chrome 74 and trying to use Cypress to test a style-guide in my app. When I load up Cypress it throws this error:

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

Please let me know if there is a solution to this!

I had tried to follow along with this: https://github.com/cypress-io/cypress/issues/1951

But nothing has changed/worked for me. :(

My code is shown below: cypress/plugins/index.js

module.exports = (on, config) => {
    on('before:browser:launch', (browser = {}, args) => {
        // browser will look something like this
        // {
        //   name: 'chrome',
        //   displayName: 'Chrome',
        //   version: '63.0.3239.108',
        //   path: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
        //   majorVersion: '63'
        // }

        if (browser.name === 'chrome') {
            args.push('--disable-site-isolation-trials');

            return args
        }

        if (browser.name === 'electron') {
            args['fullscreen'] = true

            // whatever you return here becomes the new args
            return args
        }
    })
}

in my cypress/support/index.js

This will load the site before every test I run to save myself from having to write cy.visit in every test.

beforeEach(() =>{
    cy.visit('http://localhost:3000/style-guide')
})

Answer 1

I had the very same issue yesterday and the answer from @jsjoeio in the cypress issue #1951 you've referenced in your question actually helped me.

So basically only thing I've done was to modify my cypress.json and add following value:

{
  "chromeWebSecurity": false
}

Answer 2

You can disable security to overcome this issue.

1. Go to cypress.json file.
2. Write { "chromeWebSecurity": false } and save.
3. Run the test again.

Answer 3

I had exactly the same problem, I advise you to do as DurkoMatko recommends. Documentation chromeWebSecurity

But I encountered another problem with a link pointing to localhost in an iframe. If you want to use a link in an iframe I recommend this :

cy.get('iframe').then((iframe) => {
  const body = iframe.contents().find('body');
  cy.wrap(body).find('a').click();
});

Answer 4

So, at least for me, my further problem was an internal one with tokens, logins, etc. BUT!

the code I posted for how the index in the plugin folder is correct to bypass the chrome issue. That is how you want to fix it!