获取跨域iframe的DOM内容[重复]

Posted 2023-05-09

【中文标题】获取跨域iframe的DOM内容[重复]

【英文标题】：Get DOM content of cross-domain iframe [duplicate]

【发布时间】：2020-08-20 12:37:15

【问题描述】：

我有一个跨域网站的 iframe。我想读取 iframe 的 DOM，我认为这是可能的，因为使用检查器，我什至可以修改 iframe 的 DOM。然而，我尝试阅读它的每一种方式，都会遇到相同的来源政策。我想要的只是从 iframe 加载到本地 DOM 中的内容。我以为它会像$(document.body).find('iframe').html() 一样简单，但那会返回空字符串。

我真的希望有一种方法可以做到这一点，因为我过去几天所做的工作都是基于这个可行的。

谢谢

【问题讨论】：

是的，您可以这样做 - 请参阅 ***.com/a/17262334/888177

【参考方案1】：

你不能。 XSS protection。 javascript 无法读取跨站点内容。没有主流浏览器会允许你这样做。对不起，这是一个设计缺陷，你应该放弃这个想法。

编辑

请注意，如果您对加载到 iframe 中的网站具有编辑权限，则可以使用postMessage（另请参阅browser compatibility）

【讨论】：

如果您的意思是设计（流程）缺陷，那么不，这不是缺陷，这是为了安全而实施的。

我知道它是出于安全原因而实现的，我的意思是基于此概念的设计缺陷（谢谢）。

那我理解错了

供参考，跨域同源策略意味着主机名、端口和协议必须都相同-en.wikipedia.org/wiki/Same-origin_policy（例如app1.example.com和app2.example.com不同; example.com 和 www.example.com 不同）

注意：你可以使用window.postMessage在iframe和主窗口之间进行通信。

【参考方案2】：

有一个简单的方法。

您创建了一个 iframe，其源代码类似于“http://your-domain.com/index.php?url=http://the-site-you-want-to-get.com/unicorn

然后，您只需使用$_GET 获取此网址并使用file_get_contents($_GET['url']); 显示内容

您将获得一个与您的域相同的 iframe，然后您将能够使用$("iframe").contents().find("body") 来操作内容。

【讨论】：

能否详细说明一下。非常感谢@@

抱歉来晚了，我没注意到。 1. 创建一个 php 页面，通过 GET 参数显示您想要的页面内容。 content.php <?php echo file_get_contents($_GET['url']); ?> 2. 然后，在你的主页中，添加一个 iframe 来加载这个页面。 <iframe src="content.php?url=http://google.com"> 3. 它会在 iframe 中显示想要的页面。 Content.php 来自您的域，因此您可以使用 JS 操作 iframe 内容，而不会违反跨域策略。 var $iframeBody = $("iframe").contents().find("body"); $iframeBody.css("background", blue");

如果出于某种原因您不想要 iframe，您也可以对您的 php 进行 ajax 调用

@Bharata：错了。如果将文件内容加载到 iframe 中，则可以像普通的同源 iframe 一样访问其内部 DOM。

请注意，如果您使用此方法，请非常小心，因为这将使您的服务器被用作事实上的代理。因此，这应该在身份验证之后和/或允许的网站列表应该受到限制。

【参考方案3】：

如果您可以访问 iframe 页面，则可以使用 easyXDM 之类的东西在 iframe 中进行函数调用并返回数据。

如果您无法访问 iframed 页面，则必须使用服务器端解决方案。 使用 PHP，你可以做一些快速而肮脏的事情，比如：

    <?php echo file_get_contents('http://url_of_the_iframe/content.php'); ?> 

【讨论】：

我无法访问 iframed 页面，而且服务器端解决方案几乎不可能，因为我使用的是 cocoahttpserver（服务器在 iphone 上运行）

在这种情况下是不可能的。有关更多详细信息，请参阅en.wikipedia.org/wiki/Same_origin_policy。

你先生是个学者和绅士

感谢分配的想法、这个答案和这个 - ***.com/a/29501376/1521606，帮助我创建了一个解决方法！欢呼

@devmatt，file_get_contents($_GET['url']) 可以获取页面内容，但不能获取 DOM 内容！答案错误。

【参考方案4】：

如果您有权访问已加载的域/iframe，则可以使用 window.postMessage 在 iframe 和主窗口之间进行通信。

在 iframe 中使用 JavaScript 读取 DOM，并通过 postMessage 将其发送到顶部窗口。

更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

【讨论】：

如何用js读取iframe中的DOM？有可能，不是吗？

您像往常一样阅读 DOM。例如 document.getElementsByTagName("BODY")[0];之后，使用 window.postMessage 将您刚刚在 iframed 窗口中读取的 DOM 对象发送到托管 iframe 窗口的窗口。

【参考方案5】：

有一个解决方法来实现它。

首先，将您的 iframe 绑定到具有相对 url 的目标页面。浏览器会将 iframe 中的网站与您的网站视为同一域。

在您的 Web 服务器中，使用重写模块将请求从相对 url 重定向到绝对 url。如果您使用 IIS，我建议您查看IIRF module。

【讨论】：

您的意思是服务器将http重定向发送到国外位置吗？如果是这样，它至少在 Firefox 9 中不起作用。我认为其他浏览器也不会被愚弄

他的意思是在服务器上重写请求，所以客户端根本不知道是不是正确的url