Browser Extension (CrossRider) iframe origin and parent access

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?

Try using https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL for your iframe src — Bnaya, Jul 14 '15 at 06:25
@Bnaya thanks, that works beautifully, you want to post it as an answer? — Elmar Weber, Jul 18 '15 at 12:13

score 2 · Answer 1 · answered Jul 14 '15 at 13:19

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]

Thanks, I thought of this, but it would be a pain in the butt for us because we would have to develop our own protocol to facilitate a rather complex interaction we are doing right now from the iFrame to the parent window through jQuery. It's possible and probable a nice re-usable component, but the solution C =) — Elmar Weber, Jul 18 '15 at 11:22

score 1 · Accepted Answer · answered Jul 21 '15 at 12:54

1

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

answered Jul 21 '15 at 12:54

Bnaya

765
6
15

Browser Extension (CrossRider) iframe origin and parent access

2 Answers2