Develop Reference

Blocked a frame with origin "https://dev.*******" from accessing a cross-origin frame

I am getting errors whenever I run this code to load an iframe on cypress.
Blocked a frame with origin "https://dev.expensa.me" from accessing a cross-origin frame.
cy.frameLoaded('#connect__iframe')
cy.iframe('#connect__iframe')
.find('button_Continue')
.click()
})
})

See the Cypress documentation:
If your site embeds an <iframe> that is a cross-origin frame,
Cypress will not be able to automate or communicate with this
<iframe>.
Examples of uses for cross-origin iframes
Embedding a Vimeo or YouTube video.
Displaying a credit card form from Stripe or Braintree.
Displaying an embedded login form from Auth0.
Showing comments from Disqus.
It's actually possible for Cypress to accommodate these situations the
same way Selenium does, but you will never have native access to these
iframes from inside of Cypress.
As a workaround, you may be able to use window.postMessage to
directly communicate with these iframes and control them (if the 3rd
party iframe supports it).
Other than that, you'll have to wait for us to implement APIs to
support this (check our open issue), or you can disable web
security.

How pinterest managed to load an iframe on any website when their extension is clicked?

I'm trying to develop an extension similar to that of Pinterest's PinIt extension for google chrome. In general, i know that loading any URL in an iframe which is not from the same origin would result in giving an error "Refused to display 'https://www.someWebsite.com/' in a frame because it set 'X-Frame-Options' to 'DENY'."
However, i do see that Pinterest is loading a URL on any website when using their extension. For Example, i was using the extension on instagram.com (i've used it on other sites as well) and then i took a screenshot of what i could not understand. (Please refer to selected area in DOM)
Can anyone tell me how this can be achieved or probably how pinterest is doing this?

X-Frame-Options dictate which frames can embed the page, not which pages can be embedded in it.
So if, say, https://www.someWebsite.com/ disallows to be embedded, X-Frame-Options doesn't prevent embedding https://www.someOtherWebsite.com/ inside it (if the other website allows it).
However, child-src or frame-src Content Security Policy directive can prevent embedding another page.
In theory, both mechanisms can be be overridden by webRequest API. However:
PinIt doesn't use it, so logically it should fail on some sites.
http://content-security-policy.com/ is an example where it simply fails.
There may be additional countermeasures if you decide to circumvent response headers.
It's a cat and mouse game if some resource is unwilling to be embedded or allow embeds.
By changing CSP headers, you are weakening security considerably for your users.

I finally figured out how to deal with this. I still do not know how exactly pinterest is doing it but i'm sure i'm close to it.
I simply load an iframe in the body of the parent by injecting my own JS to the page.
Then i iterate through all the images available on the page like
$('img).each(function(){
// do my stuff to see if i need this image
// push them in an array (say, var imgArray)
})
var imgToString = imgArray.toString();
var myIframe = document.getElementById('iframe_id').contentWindow;
myIframe..postMessage(imgToString , '*');
And then in the iFrame that i load, i recieve the message and use the images...
So the gist of the whole issue is that postMessage() is my saviour.

Set data attribute value in iframe that has cross origin

So I am going to be brutally honest about my motive. I am using one of the many video streaming sites out there...it has great quality content, however it has tons of popups and it doesn't work when my ad-blocker is on.
I have been trying to disable the ads when I load the page, but I am unable to set values of the attributes inside of the iframes.
I can select the iframe itself using:
window.frames[x]
However once I try and do anything example
window.frames[1].getElementByClassName('classname').length
I get an error in the console log that says
Uncaught DOMException: Blocked a frame with origin
"http://url.com" from accessing a cross-origin frame.
Any suggestions on how I can circumvent this? I have seen similar posts, but most people are trying to interact with the iframe they are using on their own sites, I want to use a chrome extension to inject the js onload for the site I am accessing.
I imagine the reason I cannot do this has to do with security restrictions, but I figured it was worth a shot asking.

The only way to do this is to setup your own local proxy server and use that to inject your JavaScript into their page.

Xpath of element on another website/cross domain

I want to get the XPATH of an element on a website (my own domain), which I got it using JavaScript code as mentioned in this answer.
Now what I want to click on button which will open a url (cross domain) window and when user click on an element on that window it's XPATH is captured.
I tried doing the same using iframe with no luck.
Now my question is there a way to get the XPATH of an element of another website/ Cross domain?

Sorry this is not possible without cooperation from the other (x-domain) site. Browsers are designed not to allow access to the DOM of x-domain documents (iframe included) for security reasons.
If you had cooperation from the other site, they could load your javascript file and then use postmessage to pass the xpath to the original page.
Other options would be to create a bookmarklet users could use on the other page, or a browser extension (Chrome and FF are pretty easy to develop for)... depends on your use case.

From your comments, I've gathered that you want to capture information from another website that doesn't have Access-Control-Allow-Origin headers that include your domain (e.g. the other site does not have CORS enabled). This is not possible to do cross-domain and client-side due to the Same-Origin Policy implemented in most modern browsers. The Same-Origin Policy prevents any resources on your site from interacting with resources on any other site (unless the other site explicitly shares them with your site using the Access-Control-Allow-Origin HTTP header).
If you want to get information about another site from your site, there is no way around using server-side code. A simple solution would be to implement a server-side proxy that re-serves off-site pages from your own origin, so the Same-Origin Policy will not be violated.

You may get the data using jQuery's load function, and append it to your page.
From there, the DOM nodes from your external page should be accessible for your processing.
$('#where-you-want').load('//example.com body', function() {
console.log($('#where-you-want'))
// process the DOM node under `#where-you-want` here with XPath.
})
You can see this in action here: http://jsfiddle.net/xsvkdugo/
P.S.: this assumes you are working with a CORS-enabled site.

Get innerHTML of iframe loaded in chrome background page

I'm loading a webpage inside iframe of a background page in chrome extension. I need to fetch the content (i.e. DOM) of iframe. I'm getting protocol error. how to overcome this situation, any workaround.
"Unsafe JavaScript attempt to access frame with URL https://swym.3ds.com/ from frame with URL chrome-extension://ohhaffjbbhlfbbpcdcajbkeippadmipk/back.html. The frame requesting access has a protocol of 'chrome-extension', the frame being accessed has a protocol of 'https'. Protocols must match."
I'm trying to implement a desktop notification for the above site, hiding the process from user eye.
I tried using XMLHTTPRequest and Jquery GET, unfortunately my site loading is unstandard, it doesn't work as intended.
Any suggestion on this topic will be very helpful.

It seems you're facing Cross-origin resource sharing issues. Do a quick check for resources loaded with protocols, convert http://www.example.com resources to //www.example.com Also refer MDN CORS Article

Javascript cannot access content on another domain as it poses security risks. If you have control over the domains, you may use postMessage to overcome this. Take a look at this link