如何在 iframe 中显示不安全的内容

Posted 2023-05-09

【中文标题】如何在 iframe 中显示不安全的内容

【英文标题】：How to show insecure content in iframe

【发布时间】：2014-11-15 01:22:39

【问题描述】：

简而言之，我正在开发一个 google chrome 扩展程序，当我将任何以 http:// 开头的 url 添加到 iframe 的源属性时，我会收到如下消息：

[blocked] 'https://www.facebook.com/' 处的页面已加载完毕 HTTPS，但运行来自“http://youtu.be/m0QxDjRdIq4”的不安全内容： 此内容也应通过 HTTPS 加载。

我没有看到 iframe 中的内容！ 那么我该如何克服呢？

我想要实现的是：我隐藏了 facebook 添加，并在其位置添加了一个 iframe，我检测到鼠标何时悬停在帖子中包含的链接上，然后我想显示链接的iframe 中的内容。

我有哪些可能的替代方案？我不需要启用在 chrome 中显示不安全内容，因为它是我将发布的 chrome 扩展！

【问题讨论】：

郑重声明，YT 在 HTTPS 上运行良好。

是什么让您认为这是可能的？

@Xan 我在问是否有可能，或者是否可以实现我的目标 - 在 iframe 中显示 url 内容，或者如果可能的话

为了帮助您，请更详细地描述您想要实现的目标。对于不太通用的问题，可以有一个更简单的解决方案。

@Xan 我编辑了帖子..你现在可以更好地理解了

【参考方案1】：

似乎安全限制很严格，所以我们需要一种方法来解决这个问题。

如果您可以使用 <iframe> 以外的其他方式加载页面，然后将其插入页面中，该怎么办？有多种方法可以做到这一点，从更实用到不太现实。

您可以使用 Chrome captureVisibleTab API 将网站的屏幕截图生成为图像，这正是您所需要的。听起来您需要一个可见的选项卡才能使用此 API，但实际上您可以将任何 Chrome 窗口指定为目标，并且您可以创建 Chrome 窗口unfocused and hidden behind the edge of the screen。

如果captureVisibleTab 在第 2 步中出现问题，还有pageCapture API 可以将整个页面作为单个内容对象。

您还可以使用服务器来创建屏幕截图。通过 HTTPS 提供一个简单的应用程序，该应用程序使用 PhantomJS 创建屏幕截图。这种方法的一个优点是您的服务器在生成屏幕截图时可能要快得多。缺点是需要为服务器付费。

您也可以在您的扩展后台进程（不受安全限制）中使用 xhr 来获取 html。这不会获得任何资源，但如果您想要一个非常快速但不准确的屏幕截图，这可能是一件有益的事情。只需加载 HTML，解析和检测样式表的链接，下载它们并将这些样式表作为<style> 标签注入 HTML。 生成的 HTML 可以手动注入到<iframe>。您甚至可以通过这种方式注入脚本和图像，但这会更难，也更没用，因为您需要快速截取页面的外观。

我认为使用内置的 Chrome 屏幕截图功能是最好的选择，前提是您可以让用户体验足够好。

【讨论】：

非常感谢@Denis，如果我使用 pageCapture API，我需要给它 tabId，所以我必须打开一个窗口或选项卡到一个特定的 url，然后捕获它的页面，我我对吗？当我阅读时，我无法打开一个隐藏的窗口！

我的第一个选项描述了一个比 pageCapture 更好的 API，即 captureVisibleTab API。同样的选项也解释了如何很好地打开一个窗口。

是的，你是对的，但现在的问题是如何创建一个隐藏窗口来捕获它的页面！ ，我可以让它不集中，但不隐藏！

我在屏幕边缘后面新建了一个窗口，它被屏幕隐藏了，但我可以在任务栏中看到它

嗯，目前这是使用 Chrome 的 API 可以做到的最好的事情。但是你应该在得到屏幕截图后迅速关闭那个窗口，这样它就不会在那里太久了，对吧？

【参考方案2】：

第一种也是愚蠢的方法：在https 的链接中更改http。但是 youtube 和我认为许多其他网站不允许在 iframe 中显示他们的内容。试试看，你会得到Refused to display 'link' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

第二种也是至少是愚蠢的方法：从链接中删除协议，例如//youtu.be/m0QxDjRdIq4，然后您会在此页面上获得协议。但情况与之前类似。

仅适用于 youtube 的第三种方式：您可以使用 src 生成 iframe，例如 //www.youtube.com/embed/m0QxDjRdIq4，并且用户可以观看视频。

第四种方式，不适用于所有网站：使用网站 API - 不是最佳解决方案，但可以作为一种选择。

第五种方式，但不可能（我认为）：尝试使用 javascript 获取页面内容并以您需要的方式重新生成它。

第六种方式，需要强大的服务器：在你的服务器上创建一个服务，它会下载页面并重新发送给用户。一个问题 - 线性依赖服务器的请求能力。

第七种方式，我忘了它是扩展：您可以在另一个选项卡/窗口中打开链接，获取它的内容，关闭选项卡/窗口并在选项卡中显示您需要的内容。

八种方式，最好的，我认为：像这样使用YAHOO yql：

$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select"  
          +"* from html where url='youtube.com/watch?v=m0QxDjRdIq4'"  
          +"&format=json&diagnostics=true&callback=?"  
  , function (data, textStatus, jqxhr)   
    // process data  
    
  

Demo on jsFiddle

【讨论】：

我已经尝试过你最后的回答方式，当我使用警报（数据）时，我对其进行了一些修改；它返回对象，它有什么？ html源代码？以及如何获得它@ostapische

@KaramNajjar 你得到 JSON 格式的页面内容，在 jsfiddle 上试用演示，我正在更新答案。

所以通过 JSON 格式获取页面内容，我可以显示页面吗？如果是，如何？

从data.query.results.body 生成标签并将其附加到您想要的位置。

我试图将它附加到 iframe src 中，但没有成功！ ，你能给我看看jsfiddle吗？