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

Posted

技术标签:

【中文标题】如何在 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吗?

以上是关于如何在 iframe 中显示不安全的内容的主要内容,如果未能解决你的问题,请参考以下文章

如何让 angularJS 动态内容显示在 iframe 中?

如何打印隐藏 iframe 的内容?

JS 判断页面中的iframe中显示的内容是不是被拉到底部

使用 iframe 在 SSL 站点上显示具有绝对 URL 的非 SSL 内容 [重复]

如何让iframe只显示网页的一部分?

如何扩展 iFrame/将内容从 iFrame 移动到 div? [复制]