Loading a local html file in an injected iframe within a firefox extension

Question

I'm currently developping a firefox extension which basically insert an iframe in the current page when the user click on the extension icon. I managed to insert the iframe code, I figured out how to link the src attribute to my html file.

In the chrome version, I simply do a

 var main_html = chrome.extension.getURL('main.html');

And I pass the link to the src attribute of the iframe like that :

 iframe.setAttribute("src",main_html);

So main_html is a link like resource://idofmyextension/content/data/main.html

But, as I suspected, I get a security error telling me that the content located at the current url cannot load data or establish a link to my main.html file.

Is there a way to pass this security restriction ? Or another way to load my html file in my iframe ?

Thanks in advance.

Answer 1

I'm assuming the usage of the Addon SDK, that is more similar to Google Chrome extensions development, than the regular XUL development in Firefox. However, the approach I'm explaining here works also without the Add-on SDK.

In Add-on SDK is not currently possible, but there is some working about it, see Bug 820213.

The only workaround that comes to my mind at the moment, is using data: url. So, instead having:

const { data } = require("self");

let url = data.url("main.html");

// pass the url to the iframe

You will have:

const { data } = require("self");

let content = encodeURIComponent(data.load("main.html"));
let url = "data:text/html;charset=utf-8," + content;

// pass the url to the iframe

Notice the data.load instead of data.url: you basically load the content of the resource and use that as data url. It's ugly but at least can be used in some cases until a proper fix.

Hope it helps!