Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iFrame interaction issues #1763

Closed
oiurch opened this issue May 24, 2018 · 16 comments

Comments

@oiurch
Copy link

commented May 24, 2018

Current behavior:

I'm trying to interact with cross-origin iframe present on the website.
In my test, when i don't have "chromeWebSecurity": false parameter set, all steps before the iframe interaction are passing and the interaction is not working (currently known issue).

But when i set the "chromeWebSecurity": false parameter in cypress.json my test start to fail on earlier steps like asserts, getting elements etc. and i can't even get to iframe interaction part.

As i've found in console, i've got error, like this:

Refused to display 'https://myurl.com/some_id' in a frame because it set 'X-Frame-Options' to 'sameorigin'

When the option isn't added in cypress.json i don't have such issues and all previous steps are working.

Desired behavior:

I can interact with iFrame after adding "chromeWebSecurity": false (as suggested in discussions about iframes)

Steps to reproduce:

Add "chromeWebSecurity": false to cypress.json and try to proceed to iframe and interact with it.
check the same without setting this parameter to false

Versions

Cypress 2.1.0, Chrome66, Electron59

@pgroot91

This comment has been minimized.

Copy link

commented May 24, 2018

issue: #136 ?

@oiurch

This comment has been minimized.

Copy link
Author

commented May 24, 2018

Yes, it's related, but adding "chromeWebSecurity": false isn't working for me, as it causes another issues, described above.

@Bkucera

This comment has been minimized.

Copy link
Member

commented May 24, 2018

@oiurch set chromeWebSecurity in cypress.json, not cypress.js

@oiurch

This comment has been minimized.

Copy link
Author

commented May 25, 2018

@Bkucera yes, it was set correctly in cypress.json (mistake just in issue description, corrected already)

@oiurch

This comment has been minimized.

Copy link
Author

commented May 25, 2018

I've managed to pass steps previous to the iframe, but still looks like i can't interact with any of iframe elements with chromeWebSecurity set as false.
I'm trying it with this style:

cy.get('.view-content iframe').then(function ($iframe) {
      // This line works
      expect($iframe.attr('src')).to.contain('https://myurl.com');
      // Any attempt to get elements inside the iframe fails, e.g.:
      cy.get('span').contains('Categories').click();
    });
@itaykotler-fundbox

This comment has been minimized.

Copy link

commented Jun 4, 2018

@oiurch - I have found a way to bypass the iframe issues. Works with the latest Chrome verision 67.0.3396.62

In my plugins/index.js file I have added the following:

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
      args.push("--load-extension=cypress/extensions/Ignore-X-Frame-headers_v1.1");
      return args;
    }
  });
};

You can download the extension from here.
Just copy-paste this and unpack it to your extension folder.
You can find more details about the disabled flags here.
Good luck

@2RajShaikh

This comment has been minimized.

Copy link

commented May 5, 2019

Unfortunately I am still facing this issue. Is there any way to bypass this issue with any configuration flags?
Refused to display 'https://accounts.google.com/o/oauth2/v2/auth?client_id=.....' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

@YOU54F

This comment has been minimized.

Copy link

commented May 10, 2019

@oiurch - I have found a way to bypass the iframe issues. Works with the latest Chrome verision 67.0.3396.62

In my plugins/index.js file I have added the following:

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
      args.push("--load-extension=cypress/extensions/Ignore-X-Frame-headers_v1.1");
      return args;
    }
  });
};

You can download the extension from here.
Just copy-paste this and unpack it to your extension folder.
You can find more details about the disabled flags here.
Good luck

This worked for me, you absolute legend @itaykotler-fundbox

@dhair-seva

This comment has been minimized.

Copy link

commented Sep 11, 2019

@oiurch - I have found a way to bypass the iframe issues. Works with the latest Chrome verision 67.0.3396.62

In my plugins/index.js file I have added the following:

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
      args.push("--load-extension=cypress/extensions/Ignore-X-Frame-headers_v1.1");
      return args;
    }
  });
};

You can download the extension from here.
Just copy-paste this and unpack it to your extension folder.
You can find more details about the disabled flags here.
Good luck

I cannot go to the link to the extension. Any other link that would work? I'm having the same issue

@itaykotler-fundbox

This comment has been minimized.

Copy link

commented Sep 12, 2019

@oiurch - I have found a way to bypass the iframe issues. Works with the latest Chrome verision 67.0.3396.62
In my plugins/index.js file I have added the following:

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
      args.push("--load-extension=cypress/extensions/Ignore-X-Frame-headers_v1.1");
      return args;
    }
  });
};

You can download the extension from here.
Just copy-paste this and unpack it to your extension folder.
You can find more details about the disabled flags here.
Good luck

I cannot go to the link to the extension. Any other link that would work? I'm having the same issue

Here is the source code:
https://gist.github.com/dergachev/e216b25d9a144914eae2

@dhair-seva

This comment has been minimized.

Copy link

commented Sep 12, 2019

I ended up finding a way to create the crx file from the source code, but I can't seem to get the extension to load. I didn't what you suggested, except I changed the name

image

But this is still throwing the error in cypress. Any ideas why?

@itaykotler-fundbox

This comment has been minimized.

Copy link

commented Sep 12, 2019

@dhair-seva
image

You'll need to extract the crx file.
These are the original files from the original extension:

background.js

var HEADERS_TO_STRIP_LOWERCASE = [
  'content-security-policy',
  'x-frame-options',
];

chrome.webRequest.onHeadersReceived.addListener(
  function(details) {
    return {
      responseHeaders: details.responseHeaders.filter(function(header) {
        return HEADERS_TO_STRIP_LOWERCASE.indexOf(header.name.toLowerCase()) < 0;
      })
    };
  }, {
    urls: ["<all_urls>"]
  }, ["blocking", "responseHeaders"]);

manifest.json

{
"update_url": "https://clients2.google.com/service/update2/crx",

  "manifest_version": 2,

  "name": "Ignore X-Frame headers",
  "description": "Drops X-Frame-Options and Content-Security-Policy HTTP response headers, allowing all pages to be iframed.",
  "version": "1.1",

  "background": {
    "scripts": ["background.js"]
  },
  
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ]
}

They are a bit different than the ones described in the link I sent.
You can use the snippets above, they are working for me. If you are going to use the code in the link, make sure they work first.

Good luck!

@dhair-seva

This comment has been minimized.

Copy link

commented Sep 12, 2019

Thank you @itaykotler-fundbox! This worked like a charm!

@itaykotler-fundbox

This comment has been minimized.

Copy link

commented Sep 12, 2019

Thank you @itaykotler-fundbox! This worked like a charm!

Glad I can help :)

@dhair-seva

This comment has been minimized.

Copy link

commented Sep 13, 2019

I'm sad to report that this error came back after the computer restarted. This morning, I began to work on cypress tests again and now they are broken because this error came back, but I have not changed any of the cypress code (it still has the load extension code). Any ideas?

For reference, @itaykotler-fundbox, I used your code for the iframe extension

@itaykotler-fundbox

This comment has been minimized.

Copy link

commented Sep 15, 2019

@dhair-seva, make sure that "chromeWebSecurity" is set to false in cypress.json.
Maybe try updating Cypress and Chrome and let me know

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
8 participants
You can’t perform that action at this time.