浏览器扩展 (CrossRider) iframe 来源和 parent 访问

Question

我目前正在使用 Crossrider 开发一个扩展。我现在正在使它在 IE 和 Chrome 上也能正常工作。该扩展程序将 IFrame 作为侧边栏添加到每个页面，并从 iframe 与 parent window 交互。为了完成这项工作，我使用 Crossriders "recommendation" 为 iframe 使用数据编码块而不是 URL 来解决同一域的安全问题。

这在 Firefox 中有效（在 IE 中也有一些黑客攻击），但是在 Chrome 中我有以下问题：

Blocked a frame with origin "null" from accessing a cross-origin frame.

根据我的阅读，唯一的解决方法是实际上在同一个域上（不可能，因为该插件适用于每个网站）或使用交叉 window 消息传递（因为我们有丰富的交互parent 很多开销）。所以我的问题是，我如何配置覆盖或任何东西来为 Chrome 修复此问题，有什么办法吗？作为一种快速解决方法，它甚至可以成为我必须在 chrome 中进行的设置。

但总的来说，我认为应该有解决这个问题的方法，因为最后我已经有了对浏览器的完全访问权限，因为安装了扩展程序，所以我想我应该能够以某种方式覆盖它？

Answer 1

通常，iframe 受到浏览器实施的安全策略的保护。因此，在 iframe 和其父页面上的扩展运行之间进行交互的最简单方法是在它们之间发送消息。

您可以通过在 IDE 的 Iframes 功能中启用 (Settings >) 运行来实现这一点，然后区分 iframe 和它的extension.js 代码中的父项。以下示例应该可以帮助您理解总体思路：

extension.js:

appAPI.ready(function($) {
  if (appAPI.dom.isIframe()) {
    // iframe code
    appAPI.message.addListener(function(msg) {
      if (msg.action === 'someAction') {
        ...
        // send response
        appAPI.message.toCurrentTabWindow({
          action:'otherAction',
          response:'otherResponse'
        });
      }
    });
    // end iframe code
    return;
  }
  // Parent window code
  appAPI.message.addListener(function(msg) {
    if (msg.action === 'otherAction') {
      ...
      // send response
      appAPI.message.toCurrentTabIframes({
        action:'someAction',
        response:'someResponse'
      });
    }
  });
});

有关示例中使用的方法的详细信息，请参阅 appAPI.dom.isIframe, appAPI.message.toCurrentTabIframes, and appAPI.message.toCurrentTabWindow。

[披露：我是 Crossrider 员工]

Answer 2

您可以使用对象 url 作为您的 iframe src。他们认为与创建页面的来源相同。 https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

浏览器扩展 (CrossRider) iframe 来源和 parent 访问

Browser Extension (CrossRider) iframe origin and parent access

javascript

google-chrome

iframe

same-origin-policy

crossrider