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

简言之，我正在开发一个google chrome扩展，当我将任何以

http://

开头的url添加到

iframe

的源属性时，我会收到如下消息：

[已阻止]已加载“”处的页面 HTTPS，但从“”运行了不安全的内容： 此内容也应通过HTTPS加载

我在iframe中看不到内容！ 那么我怎样才能克服这个问题呢

我想实现的是：我隐藏facebook添加，并在其位置添加一个

iframe

，相反，我检测鼠标何时悬停在帖子中包含的链接上，然后我想在iframe中显示链接的内容

---

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

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

如果您可以使用

以外的其他方式加载页面，然后将其插入页面，会怎么样？有多种方法可以做到这一点，从更实际到不太现实

您可以使用Chrome生成网站的截图作为图像，这正是您所需要的。听起来你需要一个可见的标签来使用这个API，但实际上你可以指定任何一个Chrome窗口作为目标，并且你可以创建Chrome窗口

如果

captureVisibleTab

在步骤2中出现问题，还需要将整个页面作为单个内容对象获取

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

您还可以在扩展后台进程（不受安全限制）中使用xhr来获取HTML。这不会得到任何资源，但如果您想要一个非常快速但不准确的屏幕截图，这可能是一件有益的事情。只需加载HTML，解析和检测到样式表的链接，下载它们并将这些样式表作为

标记注入HTML即可。 生成的HTML可以手动注入

。您甚至可以通过这种方式注入脚本和图像，但这样做会更困难，也不太有用，因为您需要一个页面外观的快速屏幕截图

---

我认为在屏幕截图中使用内置的Chrome功能是最好的选择，只要你能让用户体验足够好。

第一个愚蠢的方法：在

https

上的链接中更改

http

。但youtube和我认为许多其他网站不允许在iFrame中显示其内容。试试看，您会发现

拒绝在帧中显示“link”，因为它将“X-frame-Options”设置为“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  
  }  
}  

---

作为记录，YT比HTTPS更有效。是什么让你认为这是可能的？@Xan我想问的是，这是否可能，或者是一个实现我目标的答案——在iframe中显示url内容，或者其他一些东西，如果可能的话。为了帮助你，请更详细地描述你试图实现的目标。对于一个不太常见的问题，可以有一个更简单的解决方案。@Xan我编辑了这篇文章。。你现在可以更好地理解了。非常感谢@Denis，如果我使用pageCapture API，我需要给它一个tabId，所以我必须打开一个窗口或一个特定url的选项卡，然后才能捕获它的页面，对吗？当我阅读时，我无法打开一扇隐藏的窗户！我的第一个选项描述了一个比pageCapture更好的api，captureVisibleTab api。同样的选项也解释了如何很好地打开一个窗口。是的，你是对的，但现在的问题是如何创建一个隐藏窗口来捕获它的页面，我可以让它不聚焦，但不能隐藏！我在屏幕边缘后面创建了一个新窗口，它是隐藏在屏幕之外的，但我可以在taskbarWell中看到它，目前这是使用Chrome的API可以做到的最好的方法。但你们应该在截图后迅速关闭那个窗口，这样它就不会在那个里呆太久了，对吗？我已经试过你们最后一种回答方式，我在使用alert（数据）时对它做了一点修改；它返回对象，它有什么？html源代码？如何得到它@ostapische@KaramNajjar您可以获得JSON格式的页面内容，在JSFIDLE上尝试演示，我是update answer。那么，通过获得JSON格式的页面内容，我可以自己显示页面吗？如果是，如何生成？从

data.query.results.body

生成标记，并将其附加到所需的位置。我试图将其附加到iframe src，但无效，你能给我看看JSFIDLE吗？