浏览器扩展（CrossRider）iframe来源和父级访问

Question

I am developing with Crossrider an extension at the moment. I am now in the process of making it working also on IE and Chrome. The extension adds an IFrame to every page as a sidebar and from the iframe interacts with the parent window. To make this work I use Crossriders "recommendation" of using a data encoded block for the iframe instead of a URL to work around the same domain issue for security.

This works in Firefox (and with some hacking also in IE), however in Chrome i have the following issues:

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

From what I read the only way around it is to actually be on the same domain (not possible as the plugin works for every website) or use cross window messaging (because of a rich interaction we have with the parent a lot of overhead). So my question is, how can I configure override or whatever to fix this for Chrome, is there a way? As a quick work around it can even be a setting I have to do in chrome.

But in general I think there should be a way around this because in the end I already have full access to the browser because the extension is installed, so I assume I should be able to override this somehow?

Answer 1

In general, iframes are protected by security policies implemented by browsers. Hence, the simplest way to interact between an iframe and the extension running on its parent page, is to send messages between them.

You can achieve this by enabling the ( Settings >) Run in Iframes feature in the IDE, and then differentiate between the iframe and its parent in the extension.js code. The following example should help you understand the general idea:

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'
      });
    }
  });
});

For more information on the methods used in the example, see appAPI.dom.isIframe , appAPI.message.toCurrentTabIframes , and appAPI.message.toCurrentTabWindow .

[ Disclosure : I am a Crossrider employee]

Answer 2

You can use object urls as your iframe src. they considered as the same origin as the creating page. https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL