Question

对“Foolproof way to detect if iframe is cross domain”的回答描述了一种方法，用于测试页面上的iframe是指向同域还是跨域页面，解决不同浏览器对跨域策略的解释并避免错误消息会中断用户或停止javascript。

我希望在iframe测试中的子页面中来自，而不是跨域iframe。

parent全局parent.document.location可以{} parent.location.host，但当检测到父网址是跨网域时，是否有可靠的方式来执行此跨浏览而不会导致错误？

对于方便的测试，这里是access (same domain) info about the parent 中的jsbin，在尝试测试false是否可访问时会崩溃成错误。是否有一种可靠的方法来获取可用的内容，如try...catch告诉我们这是一个跨域父，而不是错误？

是否有一个parent.postMessage()变体，它将是强大的跨浏览器？或者使用来自if的返回值的一些巧妙技巧？（虽然无法编辑父页面）

使用案例：想象嵌入在自己网站上的网页上的可嵌入内容，以及第三方。如果页面位于同域iframe上，我们会隐藏品牌并链接回原始网站，因为用户已在此处。如果他们从第三方iframe访问该页面或直接加载页面，我们会显示品牌和信用，以便他们可以看到内容的来源。

为了澄清，我知道相同的域策略，我不关心跨浏览器域是什么，我只是想写一个简单但可靠的if( crossDomainParent() ){ /* do something */}条件如{{1}}

Answer 1

首先检查你是否是IFramed。

window.self !== window.top

如果您是IFramed，那么您的推荐人是您的父框架网址。

document.referrer

通过此网址，您应该能够检测是否要分支代码。

Answer 2

后代的真正跨浏览器解决方案：

function isCrossOriginFrame() {
  try {
    return (!window.top.location.hostname);
  } catch (e) {
    return true;
  }
}

console.log(isCrossOriginFrame());

在大量桌面和移动浏览器上进行测试。

https://jsfiddle.net/arzd4btc/3/

Answer 3

使用x-frame标头，这样可以防止将您的网站加载到frame / iframe。有各种选项read here

Answer 4

如果我看到你的用例：

我会使用$_SERVER['REMOTE_ADDR']检查服务器端（谁调用您的网站），如果是您的IP，则可以隐藏品牌和链接。

如果用例即将阻止您的网站框架，您可以使用X-Frame-Options: deny。

其他猜测：文档中的元素具有ownerDocument属性，可能有助于检测您想要的内容。

Answer 5

根据您当前的限制，使用DOM API无法实现此目的。使用属于另一个域的窗口进行的任何评估都会显示错误。

但是，“hack”是从您的子窗口发送XHR以加载您域中的已知页面。如果此XHR成功完成，则您知道两个窗口都是同一个域。

但是，这会将错误消息记录到控制台。

Answer 6

试试这个（在iframe中）

<script type="text/javascript">
  var detectOrigin = (window.location.ancestorOrigins === undefined ? 
  /example.com/.test(document.domain) /* firefox */ : 
  /example.com/.test(window.location.ancestorOrigins[0])); /* webkit */
  if (detectOrigin === true) {console.log(detectOrigin)}; /* `true` example.com origin */
  if (detectOrigin === false) {console.log(detectOrigin)}; /* `false` !example.com origin */
</script>

Answer 7

我尝试使用referer来确定跨域，但我发现它在许多站点上都不可靠。也许有人会觉得这很有用。

function IsCrossDomainFrame() {
    if( parent === window ) return false; //not a frame
    var parentLocation = new URL(document.referer);//the referer of an iframe is the parent
    return (parentLocation.protocol !== location.protocol ||
            parentLocation.hostname !== location.hostname ||
            parentLocation.port     !== location.port);
}

协议，主机名和端口确定跨域。

Answer 8

对于嵌套的iframe：一种递归方式来了解iframe（执行此代码的位置）是否是跨域的：

function crosDomIfrm(win, data) {
        data = (typeof data === 'undefined')?{ref:win.document.location,isCD:false}:data;
        try { 
            if( win.document.referrer != '' ){
                data.isCD = parseURL(data.ref) != parseURL(win.document.referrer);
            }
        } catch(e){}
        if ( (win.self !== win.parent) && !data.isCD ) { //I'm in iframe
            data = crosDomIfrm( win.parent, data );
        }
        return {ref:data.ref,isCD:data.isCD};
    },

function parseURL(url) {
                var a=document.createElement('a');
                a.href=url;
                return a.hostname;
            }

检测此页面是否为跨域iframe的万无一失的方法

8 个答案: