访问从不同来源加载的 iframe 的内容

Posted 2023-05-09

【中文标题】访问从不同来源加载的 iframe 的内容

【英文标题】：Accessing contents of an iframe that's loaded from a different source

【发布时间】：2019-12-19 13:26:19

【问题描述】：

使用 jQuery 并通过 Chrome 扩展程序，我尝试访问从 php 脚本动态加载并从不同来源加载的 iframe 的内容。

我可以使用下面的代码访问控制台上的内容，但前提是我单击元素并在 DOM 中找到它。

$("#view-chat").find("span.msg-text").last().text();

如果我尝试相同的代码，我会得到"" 1.通过Chrome扩展 2.页面加载时 3. 无需通过 DOM 导航来查找元素。

关于如何使用扩展访问 iframe 元素的任何想法？

非常感谢任何帮助。

【参考方案1】：

是的，你可以解决这个问题：

确保 iframe 具有相同的来源，指向您网站的某个页面，我们将其称为 yourproxy。现在，这当然意味着浏览器会因为 iframe 向 yourproxy 发送请求。

到目前为止一切顺利。现在，在您的代理上，您需要向要加载的页面发送请求（可能是 cURL 请求）并将其内容放入 iframe。

【讨论】：

感谢@Lajos 的回复。我认为由于跨站点脚本，实际上不允许访问内容。由于我无法控制 iframe 的来源，我收到错误 Blocked a frame with origin... from accessing a cross-origin frame.

@bamerf 我的回答的重点是，您可以将页面加载到 iframe 中而不是其他来源，但是您的页面在服务器端会碰巧向其他来源发送请求并将结果发送到浏览器。您的服务器上不会出现跨域问题，因此您可以在那里提取页面内容并将其显示在您的 iframe 中。

@bamerf 换句话说，您将从外部来源下载内容的任务委托给服务器，并将结果显示在 iframe 中作为您的页面。您创建一个页面并在 iframe 中请求它。在这种情况下，您不会遇到跨域问题，因为来源是相同的。但是，您在服务器端 iframe 中加载的来自您的来源的页面会向外部来源发送请求。简而言之，您将创建一个作为代理运行的页面，以绕过浏览器的跨域问题。