多个嵌套跨网域iFrame中的顶部窗口的网址表单 [英] Top window's URL form inside of multiple nested cross-domain iFrames

问题描述

我的内容（包括JS）在iFrame中提供，然后封装在中间人（经销商）iFrame中，然后由发布商加载到其网站中。所有3个框架都来自不同的域名（跨域）。

My content (including JS) is served in an iFrame that is then encapsulated in middleman's (distributor) iFrame that is then loaded by a publisher into his website. All 3 frames are served from different domains (cross-domain).

我需要从iFrame中识别顶部框架的网址（网站的网址）。但是我只能在我的iFrame中执行我的JS，中间人或网站发布商没有关联，我不能要求他们放任何脚本或以任何方式修改中间iFrame或网站的源代码。

I need to identify the URL of the top frame (URL of the website) from within my iFrame. But I can only execute my JS in my iFrame, the middle man or the website publisher are unaffiliated, I can not ask them to put any script or in any way modify the source code of the middle iFrame or the website.

我的问题类似于 this with the answer of：

My question would be similar to this with the answer of:

var parentUrl = document.referrer;

现在有两个嵌套的iFrames，所以如果我要求document.referrer我只会得到

except now there are 2 nested iFrames now so if I ask for document.referrer I will only get the URL of the middle man's iFrame, not the publisher's website.

因此，对于至少某些现代浏览器，可以在多个嵌套的网页中识别顶层窗口的网址表单跨域iFrames？

So is it possible - for at least some modern browsers - to identify the top window's URL form inside of multiple nested cross-domain iFrames?

推荐答案

有一种隐藏的方式来获取Chrome和Opera，域iframe），虽然它是不可能在其他浏览器。

There is a stealthy way to get the domain in Chrome and Opera, (in multiple nested cross-domain iframes), though it is not possible in other browsers.

您需要使用'window.location.ancestorOrigins'属性，这在广告领域似乎是一个小商业秘密。他们可能不喜欢我发布它，虽然我认为重要的是我们共享信息，可以帮助他人，并理想地分享良好的文档和维护的代码示例。

You need to use the 'window.location.ancestorOrigins' property, which seems to be a little trade secret within the advertising world. They may not like me posting it, though I think it's important for us to share information that may help others and ideally to share well documented and maintained examples of code.

，我已经创建了一段代码下面分享，如果你认为你可以改进代码或意见，请不要犹豫，编辑Github的要点，所以我们可以使它更好：

Hence, I have created a snippet of code below to share and if you think you can improve the code or comments, please don't hesitate to edit the gist on Github so we can make it even better:

Gist： https://gist.github.com/ocundale/281f98a36a05c183ff3f。 js

代码（ES2015）：

Code (ES2015):

// return topmost browser window of current window & boolean to say if cross-domain exception occurred
const getClosestTop = () => {
    let oFrame  = window,
        bException = false;

    try {
        while (oFrame.parent.document !== oFrame.document) {
            if (oFrame.parent.document) {
                oFrame = oFrame.parent;
            } else {
                //chrome/ff set exception here
                bException = true;
                break;
            }
        }
    } catch(e){
        // Safari needs try/catch so sets exception here
        bException = true;
    }

    return {
        'topFrame': oFrame,
        'err': bException
    };
};

// get best page URL using info from getClosestTop
const getBestPageUrl = ({err:crossDomainError, topFrame}) => {
    let sBestPageUrl = '';

    if (!crossDomainError) {
        // easy case- we can get top frame location
        sBestPageUrl = topFrame.location.href;
    } else {
        try {
            try {
                // If friendly iframe
                sBestPageUrl = window.top.location.href;
            } catch (e) {
                //If chrome use ancestor origin array
                let aOrigins = window.location.ancestorOrigins;
                //Get last origin which is top-domain (chrome only):
                sBestPageUrl = aOrigins[aOrigins.length - 1];
            }
        } catch (e) {
            sBestPageUrl = topFrame.document.referrer;
        }
    }

    return sBestPageUrl;
};

// To get page URL, simply run following within an iframe on the page:
const TOPFRAMEOBJ = getClosestTop();
const PAGE_URL = getBestPageUrl(TOPFRAMEOBJ);

如果任何人想要标准ES5中的代码，请让我知道，在线。

If anybody would like the code in standard ES5, let me know, or simply run it through a converter online.

这篇关于多个嵌套跨网域iFrame中的顶部窗口的网址表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！