Get Current Url from Iframe

Get current URL from IFRAME

For security reasons, you can only get the url for as long as the contents of the iframe, and the referencing javascript, are served from the same domain. As long as that is true, something like this will work:

document.getElementById("iframe_id").contentWindow.location.href

If the two domains are mismatched, you'll run into cross site reference scripting security restrictions.

See also answers to a similar question.

How to get the current page url from iframe and display on the browser

If you can put some js on both side it's possible.

In order, there the logic you needs:

1. Create/Get iframe element -> document.createElement
2. Parse URL -> URLSearchParams
3. Catching click event on iframe's link -> createEventListener
4. Manage main window location -> window.top and window.location

Following could be a good start:

On your https://sellproducts.com/docs put this code:

window.onload = function(e) {
    const docsUrl = 'https://docs.product.wiki/';
    const queryString = window.location.search; //Parse URL to get params like ?page=
    let iframe;
    if(document.querySelector('iframe').length) //If iframe exit use it
        iframe = document.querySelector('iframe');
    else
        iframe = document.createElement('iframe'); //Create iframe element
    iframe.src = docsUrl; //Set default URL
    iframeframeBorder = 0; //Set frameborder 0 (optional)
    if (queryString !== '') {
        const urlParams = new URLSearchParams(queryString); //Convert to URLSearchParams, easy to manipulate after
        const page = urlParams.get('page'); //Get the desired params value here "page"
        iframe.src = docsUrl+page + '.html'; //Set iframe src example if ?page=intro so url is https://docs.product.wiki/intro.html
    }
    if(!document.querySelector('iframe').length)
        document.body.appendChild(iframe);//Append iframe to DOM
}

And the https://docs.product.wiki side put this code in your global template (must be on all pages):

let links = document.querySelectorAll('a'); //Get all link tag <a>
links.forEach(function(link) { //Loop on each <a>
    link.addEventListener('click', function(e) { //Add click event listener
        let target = e.target.href; //Get href value of clicked link
        let page = target.split("/").pop(); //Split it to get the page (eg: page.html)
        page = page.replace(/\.[^/.]+$/, ""); //Remove .html so we get page
        let currentHref = window.top.location.href; //Get the current windows location
        //console.log(window.location.hostname+'/docs?page='+page);
        window.top.location.href = 'https://sellproducts.com/docs?page='+page; //Set the current window (not the frame) location
        e.preventDefault();
    });
});

Feedback appreciated :)

How to detect current iframe url?

I don't agree with the answers which suggest that you should use "src" to detect the current url of the iframe. It simply doesn't give you the current url - but the url it started with.

The domain has to be from the same origin to use the method of the following code:

$(document).ready(function() {
  $('#myframe').load(function() {
    alert($(this).get(0).contentWindow.location.href);
  }); 
});

If the domains are from different origins - but you have access to both (or both are yours), then you can use window.postMessage function and contentWindow property of iFrame to send the data for the parent to show when a new page loads.

Here is a tutorial on that: http://javascript.info/tutorial/cross-window-messaging-with-postmessage

And if the domain in the iFrame is completely alien, one approach I can think of is to load that domain in a server side script and get it to render this data with altered links. Now you can call this script inside the iFrame and use contentWindow.location.href property whenever it loads.

How to get current page loaded url from iframe

For a matter of security you are allowed to retrieve the URL as long as the contents of the iframe, and the referencing javascript, are hosted in the same domain.

Should it be the case, you can do something like:

document.getElementById("frameid").contentWindow.location.href

If the two domains are different then you'll have all the restrictions that apply to the cross-site reference scripting domain. Example:

document.getElementById("frameid").src = 'http://www.google.com/';
alert(document.getElementById("frameid").documentWindow.location.href);

Error: Permission denied to get property Location.href

For sure (except if you find some huge security flaw in your browser) you simply cannot achieve what you need using javascript in the parent document. Let's see with a simple example why. If the browser allowed what you need, you could easily:

1. Create a page, with a hidden iframe (e.g. http://malicous.com/dont-trust)
2. In that iframe, open a child page with the login process of some website (e.g. http://insecure-web-site.com/redirectlogin)
3. If cookies for child are present and under certain circumstances, the page inside the frame will redirect to the real website, proceeding with user login.
4. From the parent page now you will be able to read all the sensitive informations gone through the login process contained inside the URL, e.g. access tokens, session IDs, ...
5. At this point the victim website and its users are in front of a wide new set of possible security threats...

Access parent URL from iframe

You're correct. Subdomains are still considered separate domains when using iframes. It's possible to pass messages using postMessage(...), but other JS APIs are intentionally made inaccessible.

It's also still possible to get the URL depending on the context. See other answers for more details.

---

Related Topics