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

Question

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

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

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

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

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

Answer 1

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

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

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

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

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

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

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

Answer 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