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

How to show insecure content in iframe

本文关键字：不安全 显示 iframe      更新时间：2023-09-26

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

[已阻止]位于'的页面https://www.facebook.com/'已加载HTTPS，但从"运行了不安全的内容http://youtu.be/m0QxDjRdIq4'：这些内容也应该通过HTTPS加载。

我看不到iframe中的内容！那么我该如何克服这一点呢？

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

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

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

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

  1. 您可以使用Chrome captureVisibleTab API生成网站截图作为图像，这正是您所需要的。听起来你需要一个可见的选项卡才能使用这个API，但你实际上可以指定任何Chrome窗口作为目标，你可以创建不聚焦和隐藏在屏幕边缘后面的Chrome窗口。

  2. 如果captureVisibleTab在步骤2中出现问题，那么也有pageCapture API将整个页面作为单个内容对象。

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

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

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

第一个愚蠢的方法：更改https上链接中的http。但youtube和我认为许多其他网站不允许在iframe中显示他们的内容。试试看，你会得到Refused to display 'link' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

第二种也是最愚蠢的方法：从链接中删除协议，比如//youtu.be/m0QxDjRdIq4，然后您就可以在这个页面上获得协议。但情况与之前类似。

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

第四种方法，并非适用于所有网站：使用网站API的-不是最好的解决方案，但像一个选项。

第五种方法，但不可能（我认为）：尝试用javascript获取页面内容，并按照您需要的方式重新生成它。

第六种方式，需要powerfull服务器：在服务器上创建一个服务，该服务将下载页面并重新发送给用户。一个问题是线性依赖服务器的请求能力。

第七种方式，我忘记了它的扩展：你可以在另一个选项卡/窗口中打开链接，获取内容，关闭选项卡/窗口，并在选项卡中显示你需要的内容。

第八种方式，最好的，我认为：像这样使用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  
  }  
}

jsFiddle 上的演示

相关文章：