Javascript 如何从 iframe 获取当前页面加载的 url

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26055152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 22:15:59  来源:igfitidea点击:

How to get current page loaded url from iframe

javascriptjqueryhtml

提问by user4082518

I'm using iframe to load faroo.com as default src in frame when i search and move to other webpage using faroo.But still in the iframe src its display faroo.com only i wanted to capture url of page that has loaded in iframe

当我使用 faroo 搜索并移动到其他网页时,我正在使用 iframe 将 faroo.com 加载为框架中的默认 src。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#frameid').load(function(){
            var z=$('#frameid').attr('src');
            console.log('hi '+z);
        });

        $('#clicked').on('click', function(){
            $('#frameid').attr('src', 'http://www.faroo.com/');    
        });
    });

</script>

</head>
<body>

<iframe width="100%" height="500px" id="frameid" src="" name="iframe_a" ></iframe>

<p><input type="button" value="click me!" id="clicked"></p>

</body>
</html>

The o/p at console.log is always faroo.com not the current website that has loaded

console.log 上的 o/p 始终是 faroo.com,而不是当前已加载的网站

回答by Alex Gidan

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.

出于安全考虑,只要 iframe 的内容和引用的 javascript 托管在同一域中,您就可以检索 URL。

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 scriptingdomain. 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 achievewhat you need using javascriptin the parent document. Let's see with a simple example why. If the browser allowed what you need, you could easily:

可以肯定的是(除非您在浏览器中发现了一些巨大的安全漏洞)您根本无法javascript在父文档中使用所需的内容。让我们用一个简单的例子来看看为什么。如果浏览器允许您需要什么,您可以轻松地:

  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...
  1. 创建一个带有隐藏 iframe 的页面(例如http://malicous.com/dont-trust
  2. 在该 iframe 中,使用某个网站的登录过程打开一个子页面(例如http://insecure-web-site.com/redirectlogin
  3. 如果存在儿童 cookie 并且在某些情况下,框架内的页面将重定向到真实网站,继续进行用户登录。
  4. 现在从父页面,您将能够读取包含在 URL 中的登录过程中的所有敏感信息,例如访问令牌、会话 ID、...
  5. 此时,受害者网站及其用户面临着一系列新的可能的安全威胁......

回答by juminoz

Seem likes there is a hack to make this work and I actually can't believe it's even allowed. This is how it seems to work:

似乎有一个 hack 可以让这个工作,我真的不敢相信它甚至被允许。这就是它的工作方式:

1) Change the domain to match iframe:

1) 更改域以匹配 iframe:

document.domain = <iframe_domain>

2) Get the URL like so:

2) 像这样获取 URL:

console.log($('iframe')[0].contentWindow.location.href)

In my opinion, this should not have worked, but it does. I tested with the following in Safari, Chrome and Firefox all latest version as of 02/01/2017:

在我看来,这不应该奏效,但确实如此。截至 2017 年 1 月 2 日,我在 Safari、Chrome 和 Firefox 中使用以下所有最新版本进行了测试:

Main: http://subdomain.website.comiframe: http://www.website.com

主要:http: //subdomain.website.comiframe:http: //www.website.com

What do you think? Is this permanently allowed or is it an oversight that will be patched soon?

你怎么认为?这是永久允许的还是很快就会被修补的疏忽?

Update

更新

I started another thread for discussion here regarding browser security.

我在这里开始了另一个讨论浏览器安全性的线程。

Isn't This A Serious Browser Security Issue? RE: Cross-Domain iframe Hack

这不是一个严重的浏览器安全问题吗?RE:跨域 iframe 黑客

Update 2

更新 2

Seems like this will always be supported for specific cases.

对于特定情况,似乎总是支持这种方式。

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy