Cypress: Blank page/not fully loaded application when X-Frame-Options headers present.

Created on 14 Feb 2019 · 44Comments · Source: cypress-io/cypress

Current behavior:

When i use cy.visit(URL) getting blank page in preview pane, but application loads fine in browser tab

Desired behavior:

Expect app to load in preview

existing workaround needs investigating bug

Source

deepuec

👍1

Most helpful comment

please fix it. it's a cypress bug, because cypress use iframe for testing....

it's impossible for example to test e SSO login with redirect to 3d server...

salvoravida on 3 Jul 2019

👍33

All 44 comments

@deepuec Are there any errors in the devtools console?

jennifer-shehane on 14 Feb 2019

No, everything looks good

deepuec on 14 Feb 2019

In response header i see X-Frame-Options: SAMEORIGIN, will it make any difference?

deepuec on 14 Feb 2019

I see this in iframe

<!doctype html>
<html dir="ltr" lang="en">
  <head> <script type='text/javascript'> document.domain = 'mypepsico.com'; var Cypress = window.Cypress = parent.Cypress; if (!Cypress) { throw new Error('Something went terribly wrong and we cannot proceed. We expected to find the global Cypress in the parent window but it is missing!. This should never happen and likely is a bug. Please open an issue!'); }; Cypress.action('app:window:before:load', window); </script>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">

deepuec on 14 Feb 2019

Hey @deepuec, can you try setting modifyObstructiveCode to false in your cypress.json? You can read more about what this option does here: https://on.cypress.io/configuration#modifyObstructiveCode

jennifer-shehane on 15 Feb 2019

👍1

No luck. Still empty

deepuec on 18 Feb 2019

I had an issue running cy.visit('https://portal2.ite.mypepsico.com'), it displays the message Whoops, there is no test to run. instead of the empty page.

I haven't quite tracked down why this is happening. I did see some framebusting code in this application though, which may not play well when run inside of Cypress

function frames_evaluate() {
  //    alert("frames_evaluate()");
  if (window != top) {
    var loc1 = window.location.href;
    var targetVal = getURLParamValue(loc1, "TARGET");
    var fBreak = getURLParamValue(loc1, "FBREAK");
    var baseUrlTarget = parseBaseUrl(targetVal);
    if (fBreak != "0") {
      escape_frames(baseUrlTarget);
    }
  }
}

function escape_frames(url) {
  //    alert("escape_frames()");
  //    alert(url);
  if (url != null) {
    top.location.href = url;
  } else {
    top.location.href = location.href;
  }
  checkSmTimeout();
}

jennifer-shehane on 19 Feb 2019

That frame bursting code is from login page and I have written code to first get the auth token before visiting actual page. So when I use cy.visit("https://portal2.ite.mypepsico.com"); it will directly land on app page.

Other clickjack option we implemented is X-Frame-Options: SAMEORIGIN, will this make any difference in loading app in cypress?

deepuec on 20 Feb 2019

Cypress does remove X-Frame-Options from the application under test.

Is this issue resolved for you now?

jennifer-shehane on 20 Feb 2019

Nope

deepuec on 20 Feb 2019

Can be reproduced from https://github.com/cypress-io/cypress/issues/3604 code

describe('Initial Cypress Tests', () => {
  it('navigate to MSteams site', () => {
    cy.visit('https://teams.microsoft.com/_#/')
  })
})

jennifer-shehane on 27 Feb 2019

I tried to update my cypress.json file with "modifyObstructiveCode": false.
There is a slight improvement, able to launch web application splash screen.
But stays in same splash screen page.
Is this a known issue? If yes, do you have any work around?

akhiltabjula on 2 Mar 2019

👍1

I see this every now and then within my tests - it's intermittent and can affect any of my tests.

In this particular example, I've visited the page once already and on second visit after performing other tasks I am shown the white screen

GordonTester on 1 Apr 2019

Hey @GordonTester, is there any error logged in your console when opening DevTools?

jennifer-shehane on 1 Apr 2019

@jennifer-shehane , I'm getting blank page when i ran the cypress script , however manually working perfect .. do we know why ?

thank you!

sankarsp on 22 Apr 2019

Hey @jennifer-shehane It seems to only happen when running via the dashboard - as such I can't get in to the console, I can only go by a screenshot.

GordonTester on 23 Apr 2019

@jennifer-shehane
Any idea when it will be fixed? Or any other alternative?

2RajShaikh on 8 May 2019

i am facing the same issue. Test cases are working fine when i run manually from dashboard. but when i do cypress run from CI i am getting blank screen. @jennifer-shehane is it known issue ? and when we can expect a fix ?

ssamaji on 24 May 2019

please fix it. it's a cypress bug, because cypress use iframe for testing....

it's impossible for example to test e SSO login with redirect to 3d server...

salvoravida on 3 Jul 2019

👍33

I am facing the same issue. We have SSO login in our application and it gets stuck at blank screen.

akankshagaur on 18 Sep 2019

👍10

@jennifer-shehane I am currently having the same issue. I cannot test my application because of this bug. I used a work around with a extension to ignore the header. But when run the test with cypress run --browser chrome It does not work.

mcnl on 8 Oct 2019

👍1

Maybe it could be walkarounded from electron: https://github.com/electron/electron/pull/573

WadeTsai on 13 Oct 2019

Login E2E test is critical for real world, so please fix this issue ASAP.
Or people have no choice and have to go back to Katalon.

WadeTsai on 13 Oct 2019

👍8

@deepuec - Installing the chrome extension below in the browser (operated by Cypress) would fix the issue you are getting. Cheers!

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

vami-malengera on 15 Nov 2019

👍1

@deepuec - Installing the chrome extension below in the browser (operated by Cypress) would fix the issue you are getting. Cheers!

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

Didn't work for me. @vami-malengera . How you added extension in cypress automated chrome?

dalipkumar703 on 18 Nov 2019

@dalipkumar703 - copy and paste the link I provided (above) once cypress is running in the automated chrome browser, then click "Add to Chrome" button.

Note: Button should read "Add to Chrome" instead of "Remove from Chrome" if this is your first install.

vami-malengera on 18 Nov 2019

👍6

@vami-malengera Thanks! works like magic.

MoranFa on 26 Nov 2019

👍1

@deepuec - Installing the chrome extension below in the browser (operated by Cypress) would fix the issue you are getting. Cheers!

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

Yep, works like a charm with cypress open, but doesn't help for CI case

orelmax on 18 Dec 2019

👍8

the plugin indeed helped, looking forward for a proper solution though which will work in all cases

devstrat on 25 Dec 2019

No even the link worked for me :(

gmbarroso on 27 Jan 2020

Same issue here. Although I have my cookies set from a 3rd party provider. The application does redirect even though the sign in was successful. I suspect there's a hard redirect in the signin plugin we use in the application.

hamzahamidi on 19 Feb 2020

for some reason, i had this issue with Chrome BUT worked with Edge locally. I included the extension on my CI build (via TeamCity), and it worked with Chrome, which is really weird.

poponuts on 31 Mar 2020

I was taking another look into this and have been unable to reproduce this issue outright with only x-frame-options headers set.

As previously stated, Cypress strips x-frame-options headers from application when run within Cypress.

I've created an example repo of an express app with x-frame-options header deny. https://github.com/jennifer-shehane/express-x-frame-options

In Application

You can see when starting the server that the X-Frame-Options are present and correct.

Screen Shot 2020-04-22 at 2 47 20 PM

In Cypress

When running in Cypress, the X-Frame-Options are stripped and not present. Also, there are no errors or warnings present within Cypress.

Screen Shot 2020-04-22 at 2 47 40 PM

Need simplified reproducible example

It would be very helpful if we could narrow down the exact situation that will cause the x-frame-option errors from within Cypress. If anyone can provide a repository that recreates the issue (similar to my example above) - this would be a huge help in getting this issue addressed.

I can see the error with the example below, but there is a LOT of things involved with loading this page that could be contributing that we'd need narrowed down.

it('navigate to MSteams site', () => {
  cy.visit('https://teams.microsoft.com/_#/')
})

Workaround

I confirmed that the workaround of visiting https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe within the Cypress browser and 'Adding to Chrome' does seem to address the issue.

jennifer-shehane on 22 Apr 2020

So after checking in with the team. This issue is basically a combination of a few things. We do strip x-frame-options, but there are a couple of circumstances where we do not strip them.

We only strip x-frame-options from the same domains, so a request to a different domain will maintain the x-frame-options.
~We do not strip x-frame-options when chromeWebSecurity is set to false.~ I can't find any evidence of this.

I would still love a simplified repo that demonstrates the issue described here.

jennifer-shehane on 24 Apr 2020

👍2

This is certainly of interest. I've been following for a bit. I will try to create a minimal example that reproduces the issue.

benpolinsky on 27 Apr 2020

I have been experimenting as well with it this week. The proposed extension that @jennifer-shehane proposes works indeed. What I currently did is included the extension via the cypress-browser-extension-plugin.

This gets me at least past the login page. Another way would be to use Playwright for the headless authentication flow and pass the headers to the Cypress session. Once logged in, you'll face another issue. Which is the iframe approach Cypress uses.

A lot of MS application don't like it to get shown in an iframe, and would try to block it. So once logged in, you'll get redirected to Teams and end up on a broken page with the following errors:

Screenshot 2020-05-14 at 22 24 37

estruyf on 15 May 2020

I spent a bit of time on this as well, but without anything conclusive.
When Teams tries to redirect to an auth url, that's when the x-frame error occurs.

As @jennifer-shehane mentioned:

We only strip x-frame-options from the same domains, so a request to a different domain will maintain the x-frame-options.

benpolinsky on 15 May 2020

I get past the whole login flow, but now stuck on the iframe check, as it does window.top !== window.self.

estruyf on 15 May 2020

Another option would be to override the function which checks window.top !== window.self. The issue here is that the script(s) are async loaded and apparently there are two similar scripts that do the same thing. So the function overwrite is always overwritten by the second one. One time I was lucky, and the full flow was working but never happened again.

estruyf on 18 May 2020

is there workaround for Electron or only for Chrome ?

jamilhf on 22 May 2020

If Cypress would support Electron testing, it would work. I have tested the whole flow in Electron, but the issue is that Cypress not yet supports Electron, so again stuck.

estruyf on 29 May 2020

👍1

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 only)

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

`cypress run` (Chrome 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](https://on.cypress.io/browser-launch-api#Add-browser-extensions).

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)
Visit https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe and using the previously installed extension, click 'CRX' then 'Download as zip'.
Upzip the extension and place it within your project where you are testing with Cypress.

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
  })
}

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

jennifer-shehane on 25 Jun 2020

Hi @jennifer-shehane I was wondering if you had an ETA on when this might be fixed? For some reason when I run cypress run the browser extension does not install using the above work around but it does install and works as expected when running cypress open and clicking the test.

brinehart on 13 Jul 2020

👍3

Yesterday I finally found a workaround for Microsoft Teams and can start testing our solutions with Cypress. I wrote down the issues here: https://www.eliostruyf.com/e2e-testing-microsoft-teams-solutions-cypress - also made a sample project available here: https://github.com/estruyf/cypress-msteams-sample

Here you can see the result:

2020-07-28_16-00-53 (2)

estruyf on 29 Jul 2020

🎉2

Was this page helpful?

1 / 5 - 1 ratings

Related issues

Cypress fails to start on MacOS

carloscheddar · 3Comments

Prevent a form from submitting

weskor · 3Comments

Confusing Promise / Cypress.Promise behavior depending on browser and run mode

EirikBirkeland · 3Comments

Global hooks don't show up in test runner if first/last test are skipped

simonhaenisch · 3Comments

Proposal: Convert codebase CoffeeScript => JS => TypeScript

jennifer-shehane · 3Comments

Cypress: Blank page/not fully loaded application when X-Frame-Options headers present.

Current behavior:

Desired behavior:

Most helpful comment

All 44 comments

In Application

In Cypress

Need simplified reproducible example

Workaround

Workaround

cypress open (Chrome only)

cypress run (Chrome only)

Related issues

`cypress open` (Chrome only)

`cypress run` (Chrome only)