# Cross origin framing in webextensions

**URL:** <https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258>\
**Category:** Development\
**Created:** [May 2, 2018, 5:38pm UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258 "2018-05-02T17:38:28Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![semproms](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@semproms](https://discourse.mozilla.org/u/semproms)\
**Post date:** [May 2, 2018, 5:38pm UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258/1 "2018-05-02T17:38:28Z")

</div>

Hello everyone.

I am porting a legacy extension to the new WebExt. The main problem with this extension is that it works loading webpages into iframes, but as far as I’ve read that’s not possible with some websites for security reasons. Indeed sometimes I get the “does not permit cross-origin framing” and the extension stop working there. The old extension created the iframes like this:

this.newIframe = function(URL) {

```
this.myIframe = this.getDocument().createElement("Myiframe");   
this.myIframe.setAttribute("id", "MyIframe" + indexIframes);       

this.myIframe.setAttribute("name", "MyIframe" + indexIframes);

```

}

Is there any way to make this work in WebExt or an alternative?

Thank you in advance.

Greetings.

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [May 3, 2018, 12:18am UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258/2 "2018-05-03T00:18:44Z")

</div>

How did that code ever produce an `iframe` element?

Anyway, (in Firefox) WebExtensions now get around framing restrictions made by the “host” page, but I think restrictions made by the (to be) “guest” page still apply.  
AFAIK these restrictions are (only) expressed in the `X-Frame-Options` and `Content-Security-Policy` headers.  
You _could_ intercept them and whitelist the current host page. It would be quite a lot of work though. And a potential security risk if you get things wrong.

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [May 22, 2018, 1:55pm UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258/3 "2018-05-22T13:55:25Z")

</div>

It may be easier that it sounds. All you need to do is register custom header handler:

```
browser.webRequest.onHeadersReceived.addListener(onFrameHeader, {urls: ['*://*/*'], types: ['sub_frame']}, ['blocking', 'responseHeaders']);

```

With the following implementation:

```
function onFrameHeader(info) {
  const headers = info.responseHeaders;
  for (let i = headers.length - 1; i >= 0; --i) {
    const header = headers[i].name.toLowerCase();
    if (header === 'x-frame-options' || header === 'frame-options' || header === 'content-security-policy') headers.splice(i, 1);
  }
  return {responseHeaders: headers};
}

```

Don’t forget to unregister the handler once you done!!!

It works for most of the pages, however there are some pages that uses JavaScript based protection that may be much harder to overcome.

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [May 22, 2018, 4:24pm UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258/4 "2018-05-22T16:24:59Z")

</div>

While that way work, simply removing those security headers on all `sub_frame` requests (even if just for a time) is definitely:

> **a potential security risk** if you get things wrong.

---

<div class="post-metadata">

**Author:** ![kiboke](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/kiboke/32/3248_2.png) [@kiboke](https://discourse.mozilla.org/u/kiboke)\
**Post date:** [October 30, 2018, 8:21am UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258/5 "2018-10-30T08:21:26Z")

</div>

Is there a better solution?

I don’t want to delete existing headers and rise security issues, I’d rather modify headers to allow extension resources to be loaded. Can someone more experienced help me do it?

I think extension resources should not be affected and blocked by any website header.

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [October 30, 2018, 1:19pm UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258/6 "2018-10-30T13:19:51Z")

</div>

Well, if you only need to do this for a single URL(-prefix)/domain and all these documents are served with the same (relevant) headers, you can change exactly those headers in exactly the way required. That’s perfectly ok.

But that depends on the headers. In general it’s rather complex, so what’s the exact header you receive from the server?

---

<div class="post-metadata">

**Author:** ![kiboke](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/kiboke/32/3248_2.png) [@kiboke](https://discourse.mozilla.org/u/kiboke)\
**Post date:** [October 31, 2018, 8:56am UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258/7 "2018-10-31T08:56:58Z")

</div>

I’m author of “I don’t care about cookies” extension and I need to somehow be able to access all iframes on all websites, so I get all possible combinations of headers.

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [October 31, 2018, 11:24am UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258/8 "2018-10-31T11:24:00Z")

</div>

So you don’t actually want to frame the pages yourself, but you want to access framed pages?

You don’t need to modify any headers for that, just inject content scripts with the `{ frameId, }` or `{ allFrames, }` option.

---

<div class="post-metadata">

**Author:** ![kiboke](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/kiboke/32/3248_2.png) [@kiboke](https://discourse.mozilla.org/u/kiboke)\
**Post date:** [November 5, 2018, 8:37am UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258/9 "2018-11-05T08:37:13Z")

</div>

I already use allFrames. I don’t target with frameId because that can be too much on websites which constantly create new frames.

I tested a bit more and now I see that my problem is not here. It’s in the insertCSS which will not apply the code to frames if they are not already set when their parent is set. If you have a solution for that, I’ll be very thankfull (it’s a different topic, I can create a separate one if needed).

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [November 5, 2018, 4:12pm UTC](https://discourse.mozilla.org/t/cross-origin-framing-in-webextensions/28258/10 "2018-11-05T16:12:22Z")

</div>

I don’t think I really understand what you are saying …

But this might be helpful: [https://github.com/NiklasGollenstede/re-style/blob/master/background/web/index.js](https://github.com/NiklasGollenstede/re-style/blob/master/background/web/index.js)  
It injects styles, with special handling for subframes (see the event listeners). Maybe that is your issue as well.