当点击扩展程序时，pinterest 如何在任何网站上加载 iframe？答案

【问题标题】：How pinterest managed to load an iframe on any website when their extension is clicked?当点击扩展程序时，pinterest 如何在任何网站上加载 iframe？
【发布时间】：2016-09-25 10:27:35
【问题描述】：

我正在尝试为谷歌浏览器开发类似于 Pinterest 的 PinIt 扩展程序的扩展程序。

一般来说，我知道在 iframe 中加载任何来自不同来源的 URL 会导致给出错误“拒绝在框架中显示 'https://www.someWebsite.com/'，因为它将 'X-Frame-Options' 设置为 'DENY'。”
但是，我确实看到 Pinterest 在使用其扩展程序时会在任何网站上加载 URL。例如，我在 instagram.com 上使用了扩展程序（我也在其他网站上使用过），然后我截取了我无法理解的屏幕截图。（请参考 DOM 中的选定区域）

谁能告诉我这是如何实现的，或者 pinterest 是如何做到的？

【问题讨论】：

这不正确，你可以在 iframe 中加载任何 URL，这里没有跨域限制。如果它来自另一个域，你不能做的是使用 JavaScript 访问 iframe 的文档。
@TiborSzaszOk，如果是这样，那么 pinterest 如何访问网页的图像？任何想法？顺便说一句，我试图通过我正在开发的扩展加载 iframe，我提到的错误就是我所看到的。
@TiborSzasz 作为实验，尝试在 iframe 中加载 Google 搜索。 X-Frame-Options 是一个东西。
@Tushar Shukla 使用 chrome 扩展，您可以将任何 JS 注入页面，并且不会遇到跨域问题。
@TiborSzasz 我知道我可以注入，我也成功完成了我的扩展开发，但没有使用 iFrame。但我确实需要使用 iframe 来完成，在这种情况下，我无法从父窗口访问数据。我的简单查询是 PINTEREST 如何实现捕获图像然后在 IFRAME 中显示这些图像的全部功能。

标签： javascript jquery google-chrome iframe google-chrome-extension

【解决方案1】：

X-Frame-Options 指定哪些框架可以嵌入页面，而不是哪些页面可以嵌入其中。

因此，如果 https://www.someWebsite.com/ 不允许嵌入，X-Frame-Options 不会阻止在其中嵌入 https://www.someOtherWebsite.com/（如果其他网站允许）。

但是，child-src or frame-src Content Security Policy directive 可以阻止嵌入另一个页面。

理论上，webRequest API 可以覆盖这两种机制。然而：

PinIt 不使用它，因此从逻辑上讲，它应该在某些网站上失败。
http://content-security-policy.com/ 是一个简单失败的示例。
如果您决定绕过响应标头，可能会有其他对策。
如果某些资源不愿意嵌入或不允许嵌入，那就是猫捉老鼠的游戏。
通过更改 CSP 标头，您会大大削弱用户的安全性。

【讨论】：

那么在这种情况下，我们仍然不知道 Pinterest 是如何做到这一点的。而且据我所知，我几乎在所有主要网站上都使用过 Pin It 按钮，并且它在任何地方都可以使用.....有什么建议吗？
“如何”通过查看源来回答。它被部分缩小，但被评论。 Pin 它通过executeScript 将一个<script> 标签注入到页面中，该标签从他们的CDN 加载代码，然后它会完成其余的工作，包括创建一个框架。这整个过程在具有严格 CSP 的页面上失败，无论您是否亲自观察它。我有一个失败的明确示例。

【解决方案2】：

我终于想出了如何处理这个问题。我仍然不知道 pinterest 到底是如何做到的，但我确信我已经接近它了。
我只是通过将我自己的 JS 注入页面来在父级的主体中加载一个 iframe。

然后我遍历页面上所有可用的图像，例如

$('img).each(function(){
    // do my stuff to see if i need this image
    // push them in an array (say, var imgArray)
})
    var imgToString = imgArray.toString();
    var myIframe = document.getElementById('iframe_id').contentWindow;
    myIframe..postMessage(imgToString , '*');

然后在我加载的 iFrame 中，我收到消息并使用图像...
所以整个问题的要点是postMessage()是我的救星。

【讨论】：