Question

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

[已屏蔽]＆＃39; https://www.facebook.com/＆＃39;装满了 HTTPS，但是来自＆＃39; http://youtu.be/m0QxDjRdIq4＆＃39;的不安全内容：此内容也应通过HTTPS加载。

我在iframe中看不到内容！那我怎么能克服这个呢？

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

我可能的替代方案是什么？我不需要在Chrome中显示不安全的内容，因为它是我将发布的Chrome扩展程序！

Answer 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功能进行屏幕截图是最好的选择，只要您能够让用户体验足够好。

Answer 2

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

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

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

第四种方式，不适用于所有网站：使用网站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

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

2 个答案: