Get url from iframe when origin is not the same

access parent window from iframe cross domain
javascript get element in iframe cross domain
cross domain iframe example
iframe events
blocked a frame with origin from accessing a cross-origin frame
get url of iframe cross domain
detect iframe url
get the url of iframe

I want to get the URL from an iframe when the user redirects by clicking links in the iframe. The source of the iframe is not the same as the web application.

For example:

<iframe src="startingUrl" class="embed-responsive-item" id="iframe" sandbox="" allowfullscreen</iframe>

I add a load listener on the iframe to detect when the user redirects to other urls in this iframe:

const iframe = document.getElementById("iframe");

iframe.addEventListener("load", (evt) => {
    const location = iframe.contentWindow.location;

    console.log(location); // this gives me a Location object where I can see the href property
    console.log(location.href); // this gives me a SecurityError: Permission denied to get property "href" on cross-origin object, I also tried to get a copy of the object but that doesn't work either.
});

I know what causes this problem and I also know it is not possible. But I need to find a way to get the current URL of the page. If this is a no go then I want that the user who uses this web application can copy the url of the iframe and put it in an input field.

Now they can do "View frame source" in chrome and This frame: view frame source or info in Firefox. But this is too complicated for the user. Is there a way they can see the URL in the iFrame or a way for the user to get the URL simpler.

The site in the iFrame is not mine.

All help is much appreciated!

Short answer: This is a no go, unless you have the support of the other site in your iframe and they are willing to add the code in @박상수 answer.

Longer answer: You could set up a proxy server to inject the required code to make this work, but then you will run into legal and ethical difficulties, so I am not going to explain how to do that in depth.

Another approach might be to create a browser extension and have your users install that. Again I should point out FaceBook has in the past ran into ethical difficulties taking this approach.

Ultimately their are very good security reasons why the browser stops you doing this and you should probably respect those reasons and not do it.

Cross-window communication, The “Same Origin” (same site) policy limits access of windows and frames to If that's not so then the access is denied (writing to location is an Error (another origin) } // also we can't READ the URL of the page in iframe try� The videos are embedded onto the pages through an iframe, which was when I realized that this might not be as simple as I had hoped because: You cannot manipulate an external iframe. Sure, you can use .contents() of jQuery to get and manipulate the contents of an iframe, but only if the iframe is displaying an URL from the same domain.

If you don't see the code below, check the link below.

console.log(iframe.src);

Check out this link

SecurityError: Blocked a frame with origin from accessing a cross-origin frame

let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
window.addEventListener('message', event => {
    // IMPORTANT: check the origin of the data! 
    if (event.origin.startsWith('http://your-first-site.com')) { 
        // The data was sent from your site.
        // Data sent with postMessage is stored in event.data:
        console.log(event.data); 
    } else {
        // The data was NOT sent from your site! 
        // Be careful! Do not use it. This else branch is
        // here just for clarity, you usually shouldn't need it.
        return; 
    } 
}); 

Same-origin policy, Two URLs have the same origin if the protocol, port (if specified), and host are the same for both. the origin of the document containing that URL, since these types of URLs do not data: URLs get a new, empty, security context. Sites can use the X-Frame-Options header to prevent cross-origin framing. HTTPS websites not loading in iframe due to same-origin X-Frame-Options. Any help appreciated! Some background, I'm making a website where I want to dynamically load a user provided URL in an iframe and highlight some of the elements of that website after it is loaded.

You will want to override the error being automatically thrown:

const iframe = document.getElementById('iframe');
iframe.addEventListener('load', evt => {
  const loc = iframe.contentWindow.location;
  try{
    loc.href;
  }
  catch(e){
    if(e.name === 'SecurityError'){
      console.log(iframe.src);
    }
  }
});
<iframe src='https://example.com' class='embed-responsive-item' id='iframe' sandbox='' allowfullscreen></iframe>

<iframe>: The Inline Frame element, The topmost browsing context — the one with no parent — is usually If a browser does not support the srcdoc attribute, it will fall back to the URL in the Script access to a frame's content is subject to the same-origin policy. By default "sandbox" forces the “different origin” policy for the iframe. In other words, it makes the browser to treat the iframe as coming from another origin, even if its src points to the same site. With all implied restrictions for scripts. This option removes that feature.

How to get around the same-origin problem with iframes, How to get around the same-origin problem with iframes onto the pages through an iframe, which was when I realized that this might not be as simple contents of an iframe, but only if the iframe is displaying an URL from the same domain. If you are a front-end developer that need to use a cross-domain iframe, you know pain. You could write a nice bit of code and get it working on firefox but it would crash on IE. You would think that would be easy – facebook, twitter and all the others cool kids are doing it! Well, not quite.

The iframe cross-domain policy problem, You'll get something along the line of: Child document does not have the right to time ago – embedding an iframe in your child window that's on the same domain Some variants involve the url using a hash to pass data (#), which is really Origin being the message domain origin and source being a reference to the� A page inside an iframe is not allowed to access or modify the DOM of its parent and vice-versa unless both have the same origin. So putting it in a different way: document or script loaded from one origin is prevented from getting or setting properties of a document from another origin.

Cross-origin communication in between iframe and it's parent website, That was a complex application, but let's not get into that. So if iframe loads specifically any page from that URL will be able to Now the process is almost same for transmitting message from iframe to parent window. The same-origin policy is a browser security feature that restricts how documents and scripts on one origin can interact with resources on another origin. A browser can load and display resources from multiple sites at once. You might have multiple tabs open at the same time, or a site could embed multiple iframes from different sites.

Comments
  • Is the origin of the iframe under your control? If so you could consider postMessage.
  • No it is not... Thanks
  • Maybe something in this answer will be able to help you out: stackoverflow.com/questions/938180/get-current-url-from-iframe
  • Yes, I already read this but it doesn't work.
  • If you don't have CORS access to their page then you cannot detect Events on that page.
  • We are not as big as facebook, long off. I think this has been very helpfull. I will give you the reputation after I think about it ;-)
  • I already tried this, but the source of the iframe doesn't change. I just get the original src, thanks!
  • I don't understand what you mean. I assumed startingUrl was an absolute path, based on your poorly asked question. If it's a relative path, I assume you do have access, no?
  • No, I don't. I get these from a big database and load them with a view engine. How can I improve my question?