当点击其扩展名时，pinterest如何设法在任何网站上加载iframe？

Question

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

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

任何人都可以告诉我这是如何实现的，或者可能是如何做到这一点？

Answer 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覆盖。但是：

1. PinIt不使用它，所以逻辑上它应该在某些网站上失败 http://content-security-policy.com/就是一个失败的例子。

2. 如果您决定绕过响应标头，可能还有其他对策 如果某些资源不愿嵌入或允许嵌入，那就是猫捉老鼠游戏。

3. 通过更改CSP标头，您的用户会大大削弱安全性。

Answer 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()是我的救世主。