如何在 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 中?