WebExensions - show/render remote html snippet safely

Add-ons Development
#1

I have an html file bundled with an extension, that serves as a skeleton for the document in which I would like to show (insert into) remote html snippets and/or images. I understand that opening a tab to this file with an extension url (obtained from browser.runtime.getURL()) and inserting into that would not be safe, since the page has extension level permissions.

Then I tried getting the source of the file with XmlHttpRequest, which works fine. Then, from this source, I have tried to create either and object URL or a data URL. The former does not seem to work properly for html mime type (works for txt though). The data URL route works as far as opening the page, but I don’t seem to be able to add contentscript to it using tabs.executeScript() (I can add scripts to other tabs fine).

Is this a viable way to do it and I am missing something? If not, how can I safely insert remote HTML/images into an html file bundled with an extension so that I can manipulate the page using JS? If HTML cannot be inserted safely, is it safe to insert plain text (I would think so) and images (I don’t know about this one) to a page loaded from an extension URL?

#2

For non-webextensions there is this snippet, it may help guide you - https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/DOM_Building_and_HTML_Insertion#Safely_Using_Remote_HTML

#3

noitidart:

I was aware of the page you linked, and I could accomplish the manipulation of non-privileged documents by using XPCOM. The question is whether it is possible to do it with webextensions (and e10s). But thank you, one of those pages that talk about it for XUL and sdk addons did give me an idea.

Does anyone know if the following setup is secure (and if it would pass an AMO review):
I open a tab with an extension URL (browser.runtime.getURL('path/to/host.html')). In host.html I create an iframe with the sandbox attribute set to allow-scripts. I set the src of the iframe to a data URI (obtained from the source of an html file bundled with the extension). When the iframe loads, it seems that I can commonicate with the script running in the document of the iframe by using iframe.contentWindow.postMessage(). From the document loaded in the iframe I have tried to access window.top.location.href and window.top.browser among others and they were either not available, or even thrown some kind of privilege exception. Does it mean it is safe to insert remote html into this document if I pass the html string to it via iframe.contentWindow.postMessage()?

1 Like
#4

I think that method would pass AMO review.

#5

Unfortunately, somehow I have missed something. The browser object is actually available in the document loaded into the iframe (with sandox="allow-scripts") via a data URI. Although it seems only parts of it is available (runtime [connect(), getManifest(), getURL(), onConnect(), onMessage(), sendMessage()], extension [getURL(), inIncognitoContext], i18n [getMessage()]). I don’t know whether it is safe to have them there.

If it is not safe I don’t really know what to try next. In the “age of web accessible APIs” it shouldn’t be this hard/convoluted to safely display some remote html.

#6

I say do whatever works for you, and when you submit the addon, if the reviewer fails it for being unsafe, they will provide you an alternative method.

#7

You might be right, but on the other hand, I’d rather not invest many hours into writing something if I will likely have to scrap it and write it again.

Also it was just a kind of test. Right now I’m working with overlay and sdk extensions and they work just fine (I really liked overlay extensions, the main reason I got into addon development; sad to see them being deprecated; I think it’s a waste of awesomeness to banish them :’( ); I was just wondering how capable WebExtensions were, and they seem to be a no-go for now (but I hope one day they will be as good as the overlay extensions are right now).