Navigating to pages without content-type throws cross-origin error

[oliverjam]

Current behavior

Clicking a hyperlink to the same domain (localhost) causes a cross-origin error if the page doesn't have content-type set to text/html. This is probably not an important issue, but I just spent two hours tearing my hair out trying to figure out why a basic navigation was broken, so hopefully this can save someone else the trouble 😅.

tl;dr I accidentally did res.end instead of res.send in my Express server, so my pages had no content-type header set.

Why would this cause a cross-origin error?

Edge error

``` Cypress detected a cross origin error happened on page load: > Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame. Before the page load, you were bound to the origin policy: > http://localhost:8080 ```

Firefox Dev error

``` Cypress detected a cross origin error happened on page load: > Permission denied to access property "document" on cross-origin object Before the page load, you were bound to the origin policy: > http://localhost:8080 ```

Desired behavior

I'm not sure. Should Cypress be able to cope with HTML pages that don't have a content-type? The browser seems to handle it fine.

Test code to reproduce

mkdir cypress-repro
cd cypress-repro
npm init -y
npm i -D cypress
npx cypress open

// index.js

require("http")
  .createServer((req, res) => {
    if (req.url === "/") return res.end(`<a href="/about">About</a>`);
    if (req.url === "/about") return res.end(`<h1>About</h1>`);
  })
  .listen(8080);

Start the server with node index.js.

// cypress/integrations/test.js

it("clicks a basic link", () => {
  cy.visit("http://localhost:8080");
  cy.get("a").click();
});

Run the test in Cypress.

Versions

• Cypress: 7.0.1
• Node: 14.15.5
• Browsers:
  • Edge (Chromium) 89.0.774.57
  • Firefox Dev 87.0b9
• OS: macOS Big Sur 11.2.3

[bahmutov]

Thank you for reporting this, could you create a small repo with the code showing the problem, rather than pasting it in the issue, please? Things always find a way to change when I copy / paste them, so it would make sense to create a repo showing the problem for real.

[oliverjam]

Sure, here you go: https://github.com/oliverjam/cypress-test

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[oliverjam]

This is still erroring as of Cypress 12.12.0, but with a page timeout instead of a CORS error.

It looks like Cypress is failing to detect the page load event when the content-type is missing. I'm not sure why as a load event listener fires fine when I test in a browser directly.

I've upgraded the reproduction repo to 12.12.0 to make it easy to check: https://github.com/oliverjam/cypress-test/

[nagash77]

@oliverjam thank you for confirming this issue is still relevant and updating the example! It is much appreciated.

[chrisbreiding]

Yes, thanks for the confirmation!

This is because Cypress needs to inject a script into the page that's visited. It checks to make sure its content-type is text/html before injecting. It's possible we could handle non-text-html content-types or at least improve the error message when we encounter this.

I replicated the problem and will forward this ticket to the appropriate team. They will evaluate the priority of this ticket and consider their capacity to pick it up. Please note that this does not guarantee that this issue will be resolved.