Cypress: Blocked frame origin error when having css rule: background-image: url();

Created on 11 Sep 2017 · 8Comments · Source: cypress-io/cypress

Current behavior:

When page has style rule background-image: url(); Cypress fails with:

SecurityError: Blocked a frame with origin "http://your.page.dev" from accessing a cross-origin frame.

Desired behavior:

For sure better messaging what's the problem, it was very hard to find the source of this issue in a working full app.

Then again there is a question, why this error happens in Cypress ? Cypress should not fail as there is no such error on tested page when browsed separately.

Test code/page:

    <html>
      <body>
      <div>
        <style> .headerstrip { background-image: url(); } </style>
        <div class='headerstrip'>abc</div>
      </div>
      </body>
    </html>

describe('cypress error', () => {
  beforeEach(() => {
    cy.visit([page address])
  })

  it('should not fail', () => {
  })
})

Operating System: macOs 10.12.5
Cypress Version: 0.19.4
Browser Version: Chrome 61

Source

pawelgalazka

Most helpful comment

I got around this by setting in cypress.json:

{
  ...
  "chromeWebSecurity": false
}

and reading best-practices really helped :)

christian-fei on 29 Jun 2018

👍20 🎉4 👎2

All 8 comments

Please look into our workarounds with cross origin errors here: https://on.cypress.io/web-security#Common-Workarounds

Also, look into upgrading to version 0.20.0 as there were a lot of technical improvements.

jennifer-shehane on 14 Sep 2017

👍1

When is this actually erroring? And can you provide an example of the background-url?

When Cypress runs it runs on the same domain as your app expects, so it avoids most cross origin errors.

However we do special stuff when we restore snapshots and should handle this situation.

Is this problem occuring during snapshot handling or somewhere else? Can you provide a screenshot

brian-mann on 14 Sep 2017

@brian-mann the point is that is happening when url() is empty in background-image exactly as in the example. The example given is the minimal code to reproduce the error. It is also occurring for 0.20.0

pawelgalazka on 15 Sep 2017

screen shot 2017-09-15 at 8 25 37 am

The error disappears when I remove background-image: url(); css rule. Happens also for headless run. This was run on 0.20.0. Also found out that after adding background-image: url(); need to rerun tests 2 times, to start failing (like it is caching previous working run at some point)

pawelgalazka on 15 Sep 2017

I'm facing the same issue in Out-System application. I would really appreciate if any has solution or any workaround for this issue ?